Vue.js开发的标准工具——CLI

首先一个问题 cli是什么？

cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于 express-generator

1. cli的版本

   • 目前最新 3.x
   • 老版本是 2.x

2. cli的底层的自动化工具是： webpack

cli的安装：

我们可以使用- npm/ - cnpm/ - yarn 三种方式

1. 这里推荐使用yarn的包管理工具
   1. $ yarn add @vue/cli global 这个是cli3的版本
      如果我们还想使用cli2的脚手架，那么我们可以再安装下面这个包
   2. $ yarn add @vue/cli-init global
      （注：安装过3以后，不可以在安装2的版本，第2步只是让我们可以使用2的脚手架）
2. 如果安装失败了：
   那么可以使用cnpm继续安装 @vue/cli @vue/cli-init
   1. $ cnpm i @vue/cli -g 这个是cli3的版本
   如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
   2. $ cnpm i @vue/cli-init -g
3. 如果还有问题：
   那么就不要使用cli3了，可以单独安装cli2
   $ cnpm i vue-cli -g
4. 验证是否安装成功：
   命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

接下来我们可以开始创建项目了

1. cli3版本创建：
   我们有两个选择
   1. 命令创建 【 推荐 】
      $ vue create project-------然后手动选择配置
      这里我们安装sass的时候经常会出错
      - 如果安装node-sass出问题，如何解决：
      - 先切换成npm源 nrm use npm
      - 使用cnpm 安装 cnpm i node-sass sass-loader -D
   2. 图形界面创建
      $ vue ui
      输出此命令会出现一个浏览器页面,按提示来就可以了
2. cli2版本
   1. 标准版
      $ vue init webpack project
   • 安装完成后目录介绍：
     • package.json 整个项目的依赖配置文件，脚本命令运行的存储文件
     • build 整个项目的配置性文件，比如webpack配置
     • config 对整个项目的静态服务器配置
     • dist 运行 npm build 打包出来的文件
       • js 项目的js文件
       • .map 文件 错误资源定制文件
       • html 整个项目的容器，也是根实例的模板
     • node_modules 整个项目的依赖包文件
     • src 源代码开发目录，也是开发者具体操作的目录
       • assets 开发环境的静态资源 ， webpack编译
       • components 组件存放目录
         • xxx.vue 一个.vue文件就是一个组件，我们称之为：单文件组件（template js style）
       • App.vue 根实例的直接子组件，其他组件往App.vue中放
       • main.js 整个项目的入口文件
     • .babelrc 优雅降级
     • .editorconfig 编辑器配置文件
     • .gitignore 配置git上传时，不需要上传文件配置
     • postcssrc.js css预处理器的配置
       • display: flex;
         • -webkit
         • -moz
         • -ms
       • README.md 项目说明文件
         • static 生产环境的静态资源 webpack不编译
   2. 简易版
      $ vue init webpack-simple project

注：cli3 的 webpack 配置放在了node_modules 的 @vue/cli-server 中

1. 问题： 如果我们在cli3中要进行webpack配置，怎么办？
2. 分析： cli3的基础webpack 配置我们不要动 ， 将来node_modules会被删除
   3. 解决： 新建一个vue.config.js文件进行webpack的覆盖配置