重新认识vue-cli

重新认识vue-cli

1. 首先呢，我们先检测其版本

npm -v    node -v   vue -V

2. 检测如果不是最新版，就进行先卸载在重新下载新版

用 npm uninstall vue-cli -g卸载
用 npm install -g @vue/cli来进行下载

3. 安装完成后，就进行搭建脚手架，命令行输

vue create lbj_pro

4. 然后有两种模式的，手动跟自动的
   我采用的呢，是手动版的
   选择需要下载的命令

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing                                                                                                                           

将自己可以用到的进行选择

5. 选择2.x的版本的

6. 选择历史模式

    Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n       
   

   我这里不需要的，选择no

7. 选择scss的安装与Eslint+Prettire

8. 然后是保存的 与babel的选择

9. 最后进行下载

下载完后呢，项目目录结构是

其中，每一项大致是
public
index.html —入口html页面
静态资源–json文件
src
assets:资源文件（字体，图标，图片）’
components:存放公共组件
router:路由文件
store:存放vuex状态管理
views:存放页面
filters:存放过滤器文件
directives:存放自定义指令文件夹
mixins:存放混入方法
utils:存放一些封装的公共方法(js文件)
http:存放封装的http接口请求
App.vue 根组件
main.js 项目执行的入口js
.gitignore:git提交时忽略文件
.babel.config.js babel配置文件
.eslintrc.js EsLint配置文件（代码质量检查配置）
package.json node配置依赖文件
README.MD 项目的说明文档
vue.config.js 配置webpack环境

到这里就大致结束了