vue-cli的安装

cli

cli 别名： 脚手架
npm < cnpm < yarn （优先级）

1. 作用：

   • 快速构建vue项目， 底层配置使用的就是webpack

2. 版本

   cli2 cli3

3. 安装

      npm install @vue/cli -g  cli3的版本
      npm install vue-cli  -g  cli2的版本
   
      yarn add @vue/cli global    yarn的安装
   

   • 报错：有的电脑使用yarn安装@vue/cli , vue命令未找到 ，那么使用npm / cnpm 安装@vue/cli
   • 注意： 同一台电脑， 不兼容两个版本
   • 但是有某一个工具， 既能让我们随意安装cli2有能随意安装cli3
     -调节工具
     npm install @vue/cli-init -g
yarn add @vue/cli-init global

   步骤：

   1. 先安装cli3
   2. 在安装@vue/cli-init
   3. 那么我们就可以随意安装cli3 和 cli2

4. cli3安装

   1. vue create project/ .
   2. 选择你的项目中的webpack的一些配置项
      1. babel
      2. css-pre css预处理语言
         1. less
         2. sass
         3. stylus
      3. 上面所选的配置是往 In dedicated config files（生成的单独的配置性文件） 还是往 package.json放 ， 建议大家使用第一个
   3. 目录基本介绍
      • node_modules 项目的依赖包
      • public 静态资源文件夹
        • favicon.ico 浏览器标题的图标
        • index.html 它是整个项目的入口文件（根实例）的模板
      • src 源代码开发目录
        • assets 当前项目开发的静态资源
          • js
          • css
          • img
        • components 项目的组件
          • xxx.vue 一个.vue的文件， 它就是一个组件， 也是一个模块
        • App.vue 入口的主组件
        • main.js webpack中配置的主入口文件
        • .browserslistrc 项目不支持 ie8及以下的
        • .gitignore git上传时， 不上传的文件
        • babel.config.js es6->es5 优雅降级
        • package.json 当前项目的依赖包配置文件
        • postcss.config.js 给css添加引擎头前缀
        • readme.md 当前项目的说明文件
        • yarn.lock 当前项目的依赖包的第三方库的详细信息记录

5. 安装 cli2

   1. vue init webpack/webpack-simple app
   2. 进行问题的选择
      1. 不安装单元测试
      2. 不安装e2e的测试
      3. eslint自愿

6. 安装 cli2_simple版本

• 总结： 市面上可以见到4个版本
  • cli2
  • cli2简化版本
  • cli3 独立性的配置型文件版本
  • cli3 package.json配置项文件版本
  • webpack自定义构建项目版本（自己做的）
• cli2 vs cli3
  • cli2的webpack 配置是独立在外的
  • cli3的webpack 配置是放在了node_modules中， 不建议我们修改原配置文件， 要进行覆盖文件的配置， 配置vue.config.js