15. vue.cli【开发标准工具】

15. vue.cli【开发标准工具】

1.工具说明

1.cli是vue项目的快速构建工具，类似于gulp
2.它的底层是基于webpack

2.cli的安装流程

1.全局安装yarn【包管理】
$ cnpm i yarn -g

2.全局安装cli3
$ cnpm i  @vue/cli -g


3.图形界面创建
$ vue ui

4.选择创建新项目
create a new project here

5.选择手动选择功能
    1.Babel
    2.CSS Pre-processors【预处理器选择 Stylus】

6.选择不保存预设【最后等待完成即可...]

3.文件目录说明

1.node_modules【项目的依赖包】
  cli3 webpack配置放在node_modules中
  
2.public【静态资源目录】（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】
  - img
  - js
  - css
  - favicon.ico  项目标题的logo
  - index.html   根实例组件的模板，也是整个项目的容器
  
3.src【源代码开发目录】（ 也是开发者主要开发的目录文件夹 ）
    1.assets【开发环境的静态资源目录】（ 这个目录中的资源会被webpack编译）
                        assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录
                        assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64 
        2.components【组件存储目录】
                        xxx.vue文件,单文件组件,一个vue文件就是一个组件
                    组成部分
                         1.template模板（ 必须写的 ）
                         2.script脚本 （ 可写可不写）
                         3.style样式 （ 可写可不写 ）
                        4.scoped 作用是可以减少命名冲突，规定一个样式的作用域
- .gitignore             【git上传忽略文件配置】
- babel.config.js      【优雅降级配置文件】  用来将es6 --> es5
- package.json        【整个项目的依赖配置文件】
- README.md         【整个项目启动的说明性文件】
- yarn.lock                 【整个项目的依赖性文件的信息】
- postcss.config.js    【项目css预处理的配置】
- .browserslistrc      【浏览器版本的支持】