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 【浏览器版本的支持】
