目录
12. Vue Cli详解
12.1 webpack
12.1.1 什么是webpack
官方的解释：
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
比较认可的解释
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。可以把代码从开发模式变成线上模式，最终交给浏览器渲染。
webpack有很多插件，比较重要的两个插件分别是loader和plugin。
loader和plugin的区别：
loader 相当于一个语言的翻译官，比如可以把 less 翻译成 css，把 TypeScript 翻译成 js；
主要用于转换某些类型的模块，它是一个转换器。
plugin 可以监听 webpack 在打包过程中发出的事件
plugin是插件，是对webpack本身的扩展，是一个扩展器。
webpack 在打包的时候，需要通过 webpack.config.js 这个文件告诉它，先从什么文件开始打包，比如先从 index.js 文件开始，index.js 文件又引用了 a.js 和 b.js 文件，那么 webpack 在处理的时候会把 index.js 文件合并到一个文件中。最终需要一个 output（出口）告诉 webpack 把最终生成的文件要放到哪个地方。
总的来说，webpack 就是一个前端打包工具，它拥有非常多的小工具，学习webpack是为了更好集成资源——（关键词：模块化，打包）
模块化：更好的复用代码（偷懒）
打包：帮助处理模块间的各种复杂关系（还是偷懒）
~~~~~~~~~~~~~果然——各种工具出现的本质就是为了偷懒，人类在偷懒这件事情上从来没有松懈过~~~~~~~~~~
12.1.2 webpack和gulp的对比
但是打包的操作似乎grunt/gulp也可以帮助我们完成，它们有什么不同呢？
grunt/gulp的核心是Task
我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）
之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
所以grunt/gulp也被称为前端自动化任务管理工具。
我们来看一个gulp的task
下面的task就是将src下面的所有js文件转成ES5的语法。
并且最终输出到dist文件夹中。
什么时候用grunt/gulp呢？
如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。
只需要进行简单的合并、压缩，就使用grunt/gulp即可。
但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。
grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。
12.1.3 手动配置webpack
安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm，在官网上下载就可以，我只改了路径，其他直接下一步下一步就能安装成功，node.js会自动配置环境变量，等出现finish就是安装完毕了，
webpack的全局安装和局部安装
为什么需要局部安装
当项目开发时，可能需要的不是如今版本的开发环境，可能是旧代码，所以在代码所在路径下安装它使用的版本，这样运行才不会出错
~~~~~~~~vscode以管理员方式打开
全局安装
npm install webpack -g
如果需要特定指某个版本，敲击 npm install webpack@3.6.0 -g
(-g表示-global，表示全局，而且-g 位置可以移动，不一定非要在末尾@后面写版本号)
局部安装
npm install webpack --save-dev
同样，如果需要特定指某个版本，敲击 npm install webpack@3.6.0 --save-dev
如果想要局部运行的时候，没有找到局部webpack，那么它还是会使用全局的webpack版本
12.1.4 webpack配置解析
dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件
12.1.5 webpack的打包
webpack src/main.js dist/bundle.js
意思是把src下面的main.js文件打包成dist目录下的bundle.js文件，这种方式还有省略写法，但是省略写法步骤也不简单，这一章知识匆匆看过就结束了，以后如果用得着再来补笔记（大概率是不会补充了）
新建在webpack.config.js中填写绝对路径
然后在窗口敲下npm init 对项目进行初始化
12.2 Vue Cli脚手架的使用
12.2.1 Vue Cli是什么
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
Vue CLI是一个官方发布 vue.js 项目脚手架
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
~~~~~~~~~~~信我，脚手架好用，特别是经历过webpack的折磨之后，深深明白了这一点
12.2.2 Vue Cli依赖环境
脚手架需要依赖node环境，所以在安装脚手架前需要安装node.js
12.2.3 Vue Cli的安装
1.脚手架3的安装
安装环境
npm install @vue/cli -g
如果想要查看vue的版本，请输入—— vue --version
是两根杠，气死我啦，当时只写了一根杠查不出版本，
创建项目
vue create my-project
2.脚手架2的安装
脚手架不能直接安装了，只能够通过间接安装的方式
安装环境
npm install @vue/cli -init -g
创建项目
vue init webpack my-project
12.3 Vue Cli2的使用
12.3.1 Vue Cli配置过程
使用脚手架3真实配置一个项目——安装node.js——npm install webpack -g ——npm install @vue/cli -g ——vue create my-project——npm run serve
manually手动的,选择manually这一项是手动配置脚手架，当然也可以用之前就配置过的模板。
敲击空格键能控制是否配置。
关于怎么将配置信息保存为模板，就是sava preset as
是否保存为独立文件，第一个就是保存独立文件，第二个则不保存独立文件
这一项是是否为未来的项目保存配置信息
接着下一步，下一步，中间过程没有重要信息，就不截图了。
等脚手架搭建完成之后，直接在项目所在的路径敲 npm run serve 会获得网址，按住ctrl点击就能在浏览器中打开配置好的网页，成就感满满呐~
使用脚手架2真实配置一个项目——安装node.js——npm install webpack -g ——npm install @vue/cli -init -g——vue init webpack my-project——npm run dev
前几步骤和安装脚手架3相似，如果已经安装过脚手架3的项目，可以直接从 npm install @vue/cli -init -g开始，下面的图是我和老师对步骤的解释
如果创建项目名称里有斜杠，在VScode中会被误认为下一层级，因此要注意在正确路径运行 npm run dev
Vue.config.productionTip = false，阻止启动生产消息；
没有Vue.config.productionTip = false这句代码，它会显示你生产模式的消息；
开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。
而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。
此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。
作用： 消息提示的环境配置，设置为开发环境或者生产环境
Vue.config.productionTip = false
Vue.config.productionTip = true
点击会跳转到如下的页面
12.3.2 Vue Cli目录结构
12.3.3 入口文件详解
buildhe config都是关于webpack的配置
从package.json开始读数据
从package.json可知，npm run start和npm run dev是同样效果
npm run build 对项目进行打包——去找到build/build.js
放在static的数据、图片会原封不动的放到dist里面，放assets的数据则会根据文件的大小看是否压缩
package.json 存储依赖信息
package-lock.json 当版本信息为^，就可以查找最近版本
.gitignore设置git服务器不用显示的文件，比如.log
.babelrc设置依赖包，ES各种代码转换的配置
node_modules是node环境依赖包，里面有vue的东西
src文件夹是以后写代码的地方
.editorconfig是代码文本的设置(一般正规公司都有)
.postcssrc.js是css代码转换的配置
index.html是项目网页——单页面富应用（SPA）
12.3.3.1 Vue的渲染过程
runtime+compiler与runtimeonly的区别
runtime+compiler：template-ast-render-virtual dom-真实DOM (vue1)
runtimeonly：render-virtual dom-真实代码 (vue2)
vue2所用的代码量更少，性能更优越，少6kb
如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only
12.3.3.2 render函数的使用
很重要，但是暂时跳过
12.4 Vue Cli3的使用
vue-cli 3 与 2 版本有很大区别
vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中
12.4.1 Vue Cli配置过程
12.4.2 Vue Cli目录结构
12.4.3 Vue Cli配置修改
自定义配置：起别名
12.4.3.1 Vue UI
在命令窗口里面输入vue ui ，任何路径都可以，它是通用的
12.4.3.2 配置存放路径
12.4.3.3 添加新的别名
修改配置：webpack.base.conf.js起别名
vuecli3配置去哪里了，原来以前脚手架2的东西隐藏到下图的serve里面了
3525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
