Vue CLI脚手架篇

1. 概述

1. 如果只是写几个Vue的Demo小程序，那么就不需要Vue CLI

2. 如果开发大型项目，那么就需要，并且必然需要使用Vue CLI

3. 使用Vue.js开发大型应用时，我们需要考虑代码的目录结构、项目部署、热加载、代码单元测试等事情，如果每个项目
   都要手动完成这些工作，那无疑效率比较低效，所以我们会使用一些脚手架工具来帮助完成这些事情

4. CLI是什么意思：CLI是Command-Line Interface，翻译为命令行界面，俗称脚手架Vue CLI是一个官方发布 vue.js项
   目脚手架，使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

5. Vue CLI 使用前提安装node、webpack

2. Vue CLI的安装

1. 安装 Vue 脚手架：

   npm install "@vue/cli" -g
   // 全局下载
   

2. 查看安装版本：

    vue --version
    // 一般下载的为最新版本
   

3. 如果想同时还可以用CLI2的话还要安装：

   npm install "@vue/cli-init" -g	
   

4. Vue CLI 安装失败，报错4048，解决方法：清空npm缓存

   //  命令行清除：
   npm cache clean --force
   //  手动清除：
   // C:\Users\Administrator\AppData\Roaming\删除此目录下的npm-cache文件夹
   // 注：如果命令行清除不了，请手动清除
   

3. Vue CLI2的使用

1. Vue CLI2初始化项目的命令：

   // 1. 创建项目文件夹
   vue init webpack 项目文件夹名称
   //===========================================
   // 回车之后会根据cli2自动下载一些模板 
   /downloading template 
   // 如果在这个位置卡住，可以 Ctrl+c 结束命令，然后从新执行 vue init webpack my-project 
   

   // 2. 创建项目名称
   ? Pproject name 项目名称
   // 直接敲回车，默认使用文件夹名称当做项目名称     
   

   // 3. 设置项目描述
    ? Project description 项目描述 
   

   // 4. 设置作者信息
   ? Author 作者 
   

   // 5. 用哪一个 Vue 版本构建项目
   ? Vue build (Use arrow keys)
   >Runtime + Compiler：...
    Runtime-only：...
    // 两者区别详见目录 4
   

   // 6. 是否安装路由
   ? Install vue-router? (Y/n)
   

   // 7. 是否选择代码约束
   ? Use ESLint to lint your code? (Y/n)
   // 如果选择 Y
   >Standard  // 标准规范	
    Airbnb    // 爱彼迎公司规范
    none	   // 自定义规范
   

   // 8. 是否要写单元测试
   ? Set up unit tests? (Y/n)
   // 国内一般不写单元测试
   

   // 9. 端到端测试
   ? Setup e2e tests with Nightwatch? (Y/n)
   // 先选择 n
   

   // 10. 选择包管理工具
   ? Should we run `npm install` for you after the project has been created? (recommended)
   >Yes, use NPM
    Yes, use Yarn
    No, I will handle that myself
    // 这里选择 npm
   

2. Eslint 代码规范关闭：
   config/index.js 里面的 useEslint: true把 true 改成 false 就可以了。然后重新启动本地服务器 npm run dev

4. runtimeCompiler 和 runtimeOnly的区别

1. 在初始化项目时，会让选择 runtimeCompiler 还是 runtimeOnly

2. 它们之间最大的区别在于main.js中

3. runtimeCompiler模式下vue实例的执行过程：

   // template(模板)-解析->ast(抽象语法树)-编译->render(函数)-渲染->vdom(虚拟dom)-->UI(浏览器)  
   

4. runtimeOnly模式下vue实例的执行过程：

   //  render(函数)-渲染->vdom(虚拟dom)-->UI(浏览器)
   

5. runtimeOnly的性能更高，代码更少，更轻量(小6kb，因为少了前面两步)，所以一般开发中都选择这个

6. runtimeOnly模式下的main.js中的 render 函数

    new Vue({
           el: '#app',
           render: h => h(App)
    })
   注: A. h 是一个函数，全名为createElement
       B. h(App) 是箭头函数的返回值
       C. App值是从.vue文件导入页面的组件对象
       D. .vue在导入main.js的时候已经被编译成组件对象了
       E. 而组件中原先的template被编译成组件对象中的render函数了
       F. 它们是由我们安装的一个插件编译的:vue-template-compiler
       G. App 组件对象传入h函数中，然后会替换 el绑定的控制区域
   

7. 总结：如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler如果你之后的开发，使用的是.vue文件开发，那么就可以选择Runtime-Only

5. Vue-CLI3

5.1 概述

1. vue-cli3 与 2 的版本有很大的区别

2. vue-cli3是基于webpack4打造，vue-cli2还是使用的webpack3

3. vue-cli3 的设计原则是“0配置”，移除了配置文件根目录下的build和config等目录

4. vue-cli3 提供了vue ui命令，提供了可视化配置，更加人性化

5. 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

5.2 CLI3 初始化

1. 初始化命令：

   vue create 项目名称 
   

2. 选项：

   default (babel, eslint)  // 默认配置
   Manually select features  // 手动选择
   

3. 手动选择后：

   () Babel       // ES6 转 ES5 的插件
   () TypeScript
   () Progressive Web App (PWA) Support  // 先进的App
   () Router  // 路由
   () Vuex
   () CSS Pre-processors  // 预处理器
   () Linter / Formatter  //语法规范
   () Unit Testing  // 单元测试
   () E2E Testing   // 端到端测试
   // 空格键选中、取消
   

4. 选项：

   In dedicated config files  // 独立配置文件
   In package.json     // 配置文件放在package.json中
   

5. 是否保存之前的选择，下次初始化使用

   Save this as a preset for future projects? (Y/N)
   // 如果选择 Y 则下次创建项目的时候，步骤2就会多一项（保存下来的选中信息）
   

6. 如果选择yes：

   Save preset as: // 设置一个保存的名字
   // 注：如果要删掉保存的初始化配置: C:\Users\Administrator\.vuerc 文件中删除
   

7. 选项：

   Use Yarn // yarn指令
   Use NPM  // npm指令   
   

5.3 CLI3 命令

1. 命令一般都在package.json文件的scripts中

2. 运行命令：npm run serve
   

3. 打包命令：npm run build
   

5.4 修改配置

1. CLI3 的大部分配置文件隐藏起来了，如果想要修改配置有以下三种方法：
2. 打开项目的图形管理界面：vue ui
3. 打开隐藏的配置文件：node_modules/@vue/cli-service/webpack.config.js
4. 在项目根目录下创建特定配置文件：vue.config.js 将要添加修改的配置导出module.exports={}

5.5 CLI3 创建的项目

1. 项目中每个文件的作用
   

6. eslintrc 代码格式化

1. 在创建项目的时候，安装了 eslintrc 代码格式限制的前提下
2. 如果代码不规范就会报错
3. 比如：代码中不允许有分号，字符串要用单引号…
4. 我们可以配置文件，在代码格式化的时候，让代码符合 eslintrc 的代码规范
5. 在项目的根目录下创建 .Prettierrc文件，然后进行配置

   {
   	"semi": false,       // 格式化的时候去掉分号(;)
   	"singleQuote": true  // 格式化的时候把字符串的双引号("") 换成单引号 ('')
   }
   // VsCode 代码的格式化快捷键： clrt + shift + F
   

6. 还有一个错误，就是 () 前后都必须留一个空格，但是一般调用方法的时候，留空格不好看，所以我们可以在 eslintrc 代码规范的 eslintrc.js 文件中进行配置

   module.exports = {
   	root: true,
   	...
   	rules: {
   		'space-before-function-paren': 0   // 配置这一条就是告诉它，禁用 space-before-function-paren 规则
   	}
   }