Vue Vue-CLI脚手架的介绍和简单使用

Vue CLI

• 概念：
  • CLI即Command-Line Interface，命令行界面，俗称脚手架。
  • Vue CLI是官方发布vue.js项目脚手架。
  • 使用脚手架可以快速搭建Vue开发环境以及对应的webpack配置。
• 脚手架依赖
  1. webpack
  2. node.js
  3. npm
• 安装脚手架
  • npm install -g @vue-cli
  • 拉取2.x模板（旧版本）
    • npm install -g @vue/cli-init
  • Vue CLI2初始化项目
    • vue init webpack projectName
  • Vue CLI3初始化项目
    • vue create projectName

Vue CLI2初始化项目过程

• Vue CLI2是基于webpack3打造的。

1. 创建项目文件夹存放项目
2. 项目名称（不能含大写字母）
3. 作者的信息（默认从Git获取）
4. Vue build runtime
5. 选择vue-router路由
6. ESLint检测代码规范
   • runtime-compiler
     • 流程：template -> ast -> render -> vdom -> UI
   • runtime-only
     • 流程：render -> vdom -> UI
     • 性能更高
     • 代码量更少
   • 总结：
     • 若在日后开发中，依然使用template，就需要选择runtime-compiler
     • 若在使用的是.vue文件夹开发，则可以选用runtime-only。
7. 单元测试
8. e2e测试，进行自动化测试
9. 选择用yarn或npm安装

项目目录解析

• 文件夹

  1. build
     • webpack配置文件
  2. config
     • webpack配置文件
  3. node_modules
     • 依赖的相关的node模块
  4. src
     • 源代码
  5. static
     • 静态资源

• 文件

  1. .babelrc
     • ES代码相关转化配置
  2. .editorconfig
     • 项目文本相关配置
  3. .gitignore
     • Git仓库忽略的文件夹设置
  4. .postcssrc.js
     • css相关转化的配置
  5. index.html
  6. package.json
  7. package-lock.json
  8. README.MD

Vue CLI3初始化项目过程

• Vue CLI3和Vue CLI2的区别
  • Vue CLI3是基于webpack4打造的。
  • 设计原则：“0配置”。移除了配置文件根目录下的build和config目录。
  • 提供了vue ui命令，提供了可视化配置。
  • 移除了static文件夹，新增了public文件夹，并且index.html移动到public文件夹中。

1. 选择配置方式
2. 选择需要的项目特征（空格键选中）
   1. （*）babel
   2. （ ）TypeScript
   3. （ ）Progressive Web App (PWA) Support
   4. （ ）Vuex
   5. （ ）CSS Pre-processors
   6. （ ）Linter / Formatter
   7. （ ）Unit Testing
   8. （ ）E2E Testing

未完待续ing…