课程地址：【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目录
3 Vue CLI脚手架
Vue Router（Vue核心插件）也会在这章里讲到。
Vue项目代码过于繁杂，脚手架（建房子时的脚手架）做好模型，将模型进行组合，最终成为一个页面。脚手架集成了很多系统开发中用到的东西，具体比较麻烦（有webpack打包工具）。
2.12的axios就是插件，需要npm指令去安装（或者使用src引入）。
Vue脚手架的作用是用来自动一键生成 Vue + webpack 的项目模板，包括依赖库，免去手动安装各种插件、寻找各种cdn并一个个引入的麻烦。它是一个专门为单页面应用快速搭建繁杂的脚手架，可以轻松创建应用程序，省去繁琐的配置工作。
3.1 Vue CLI介绍和安装
需要安装node.js和Vue CLI。
node安装后会自动安装npm。
补充：
node是什么？
- node，全称Node.js，是一个基于Chrome V8引擎的JavaScript运行环境；
- 是一个让JavaScript运行在服务端的开放平台；
- 让JavaScript与php、Python、Perl等服务端语言平起平坐的脚本语言。
npm是什么？
程序员写的一些代码想要开源共享，GitHub是首选。
但是自己的项目里包含了很多代码包，比如jQuery、Bootstrap、swiper等等，很明显这个工作量有点大，还很麻烦。
一位优秀的程序员Isaac Z，Schlueter 用JavaScript（运行在node.js上）Node Package Manager（简称npm，节点包管理器）
基本思路是搭建一个代码仓库服务器，邀请jQuery、Bootstrap、Vue等众多开发维护团队，将代码放在该npm服务器上。
node内置了npm，只要别人去使用，只需要在package.json里写上所依赖的jQuery、Vue等，再执行npm install，npm就会帮他们下载代码。
下载的代码出现在node_modules目录里，就可以随意使用了。
查看自己电脑上是否有Vue 脚手架。
Vue CLI可以通过npm包安装。
指令npm install -g@vue/cli（Vue CLI官网有这个指令）
（安装太慢可以使用cnpm，淘宝镜像）
（install可以简写为i）
3.2 使用脚手架创建项目
也可以使用图形化界面
终端窗口，win+R打开，也可以在vs code里打开。
3.1.1 指令创建Vue CLI项目
在vs code里创建第一个Vue CLI项目
会有一些选项
选项1：
选择手动选择配置。
选项2：
Babel：Babel编译，将ES6编译为ES5，进行兼容；
Typescript：给JavaScript添加特性的语言扩展；
Progressive Web App(PWA) Support：让网页渐进地变成App；
Router：Vue路由
Vuex：Vue路由
CSS Pre-processors：CSS预编译器
Linter/Formater：代码检测和格式化
Unit Testing：单元测试
E2E Testing：端到端测试
选择图中选中的4项。
选项3：
2.x
选项4：
路由方式，选择路由方式还是其他方式。选择n，不用路由方式。（后期可以重新设置）
选项5：
CSS编译模式。选择less，好用。
选项6：
选择代码规范
eslint with ... 进行报错提醒
eslint + A... 不严谨模式
eslint + S... 正常模式
eslint + P... 严格模式
选择正常模式。
选项7：
lint何时验证？保存的时候验证就行。
选项8：
安装的这些东西放在哪里。选择第一个，独立文件。
选项9：
问上述配置是否保存为一个文件。n就行。
3.1.2 运行项目
首先要进入当前文件夹 cd 项目名
然后启动项目
> demo1@0.1.0 serve H:\前端\004 Vue2【尚硅谷】\【b站咸虾米】Vue2\code\2 Vue CLI\demo1
项目启动后，点击local路径
点击上述链接
另外图形化界面创建项目的方式就不介绍了。
3.3 项目结构及介绍
温故而知新。
3.4 模块化介绍
一、模块化概念：将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起；块的内部数据与实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。
二、为什么使用模块化：在实际开发过程中，经常遇到变量、函数和对象等名字的重复，这样容易造成冲突，还会造成全局变量被污染；同时，程序复杂时需要写很多代码，还会引入很多类库，这样容易造成文件依赖混乱。
三、因此为解决上述问题，使用模块化的JS，所以模块化的作用就是
1. 避免全局变量被污染
2. 便于代码编写和维护
没有模块化之前，一个文件需要引入很多的JS文件，很麻烦，比如存在变量覆盖的问题（两个js文件有相同的变量，但是值不同，导致html打印最后一个引入的js文件）。
四、模块化的历程：
之前的JavaScript没有模块化的概念，如果要进行模块化操作，需要引入第三方类库：AMD/CMD（用于浏览器环境），CommonJs（用于Node环境）；
随着技术发展，前后端分离，前端业务越来越复杂。直到ES6带来了模块化，才让JavaScript第一次支持了module（用于浏览器环境）
五、模块化的使用
ES6模块化，分为导出export 与 导入import两个模块。
在ES6中每一个模块式一个文件，在文件中定义的变量、函数和对象在外部是无法获取的。
如果希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。
如果在其他文件中想要获取暴露的内容，以import的形式将这个变量进行引入。
六、按需导入和导出
注意：测试时需要在服务端，不然出现跨域问题。
3.5 import导入与export导出
up说的太细了，实际用的时候会下面这样写就行了。
export
import
3.6 export default默认导出
export default默认暴露一个对象
export default { }
导入默认暴露的对象时，可以给他起名
import aaa from '@/page/page/HelloWorld.js’
@是根目录src
3.7 使用less编写css样式
main.js导入了一个Vue，且没有路径。这是为什么？
这个表示去node_modules里去找依赖Vue。
代码第2、3行这种，引入组件的路径是相对路径的，才是进入相应的文件夹。比如第2行，就是选择了App.vue。
使用less编写css样式，就是说样式可以嵌套写，这里就不演示了。
&表示标签本身自己box。
<style lang="less">
.box {
width: 100px;
&:hover {
background-color: skyblue;
}
}
</style>3.8 引入组件和scoped局部样式
(代码检查关不掉了，奇怪，项目终止然后重启就好了）
3.8.1 引入组件
在components文件夹下创建一个组件，组件名称首字母大写（建议）。
这里不大写是因为项目老报错，结果重启了就好了，但是组件名称没有改回去。
<template>
<div class="box">
<h1>web前端开发</h1>
<p class="title">这是文字描述信息</p>
</div>
</template>
<script>
export default {};
</script>
<style lang="less">
h1 {
color: red;
font-size: 50px;
}
p.title {
color: green;
font-size: 30px;
}
</style>然后在App.vue里引入、注册和使用一下这个组件。
3.8.2 scoped局部样式
看，只给itemBox自己的h1标签设置了样式，但是App.vue的h1标签的样式被污染了。
如果App组件对p标签修改样式，那么itemBox组件的p标签的样式也会被污染。
结论：父子组件的样式会相互污染。
但是父组件改子组件样式是正常的，App父组件通常是设置全局样式的。
解决途径：给子组件添加scoped，即局部css。
结果
这样就可以了。
3.9 使用脚手架搭建简易网页
创建了一个网页，不练习了，去第4章练习去。
