vue脚手架cli

学无止境，望君把握时间。

cli（别名：脚手架）

包管理器的优先级权限：
npm < cnpm < yarn

1. cli作用：
   快速构建vue项目，底层配置使用的是webpack.
2. cli 的版本：
   cli2， cli3.
3. 安装：

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

值得注意的是：
同一台电脑是不兼容两个版本的。
使用需要使用调节工具：

npm install @vue/cli-init -g 

yarn add @vue/cli-init global

步骤：

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

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  当前项目的依赖包的第三方库的详细信息记录

cli2的安装：

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

总结：市面上可以见到4个版本
1.cli2
2.cli2简化版本
3.cli3 独立性的配置型文件版本
4.cli3 package.json配置项文件版本
5.webpack自定义构建项目版本（自己做的）

cli2与cli3的比较：
cli2的webpack配置是独立在外的。
cli3的webpack配置是放在了node_modules中，不建议我们修改原配置文件，要进行
覆盖文件的配置，配置vue.config.js

界面化安装cli3（不推荐）

1.使用：
命令行输入：
vue ui

介绍cli3的具体内容：

--vue的文件 --->单文件组件。
  ---单文件组件由3个部分组成:
    --:template 模板(必写)
    --:script
    --:style
     --scoped解决了css命名冲突，给css样式独立的作用空间。

es6的模块化

  --定义： 任意数据类型。
  --导出： export|export default
    -- export 与export default的比较：
      export可以批量导出，export default 默认只能导出一个
  --引入：
      --export 导出  import {} from '文件路径'
      --export default 导出 import 变量 from '文件路径'

自定义插件：

–vue组件库的封装原理