工程化开发(脚手架环境)
工程化，也可以称之为脚手架环境。
1、组件
组件 （Component）是 Vue.js 最强大的功能之一，**组件是一个自定义HTML元素（标签）**或称为一个模块，包括所需的模板（HTML）、逻辑（JavaScript）和样式（CSS）。
组件化开发的特点：
- 标准
- 分治
- 重用
- 组合
组件也是有全局（component）与局部（components）之分。
2、单文件组件 single file component SFC
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JS驱动的时候，下面这些缺点将变得非常明显：
所有的组件都放同一个html文件中
没有构建步骤(build操作)，不能使用npm来管理项目
缺乏语法高亮和提示
没有针对单个组件的css样式支持
针对于上述的问题，vue框架发布了vue-cli项目生成工具，Vue-cli是一个基于 Vue.js 进行快速开发的完整系统， 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
单文件组件的要求：
后缀必须是“.vue”
需要使用三个标签将整个文件分成3部分
template标签：包裹的是html部分（视图部分）【必须要有的】
script标签：包裹的是JavaScript部分（逻辑部分）【必须要有的】
css-in-js：在JavaScript中写样式
style标签：包裹的css/scss/less等样式部分（样式部分）【可以没有】
样式存在范围的问题的
有“scoped”属性则表示该组件的样式代码只在当前组件生效
如果没有“scoped”属性则表示该组件的样式会影响自己及后代，一般在工程化开发的模式中，只有根组件“App.vue”不写“scoped”属性（全局样式）
其他的语法与之前的一致
单文件组件只是工程化中的一个文件，无法单独运行，必须在项目中运行
3、工具安装
网址：http://npmjs.com
## 安装 # -g：全局安装 npm i -g @vue/cli ## 安装成功后，检查 vue --version vue -V # Vue和VueCLI是两回事 ## 卸载（了解） npm uninstall -g @vue/cli
如果需要安装其他版本，可以使用npm install -g @vue/cli@版本号的方式进行指定版本。
如果最新版安装不成功，可以尝试以下几种方式去解决：
- 断网，使用热点共享流量去执行安装命令
- 安装其他版本
- 切换一下npm镜像源，切换成taobao
- 卸载nodejs重安装
- 重装系统/换电脑
vue/cli ≠ vue，切勿将版本搞混
4、创建项目
脚手架创建初始项目的方式有2种：
- 通过UI界面方式去创建（了解）
- 在命令行中输入以下命令启动UI界面：
vue ui
通过命令行的方式切创建（推荐）
- 执行命令：
vue create 项目名
# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令 # 如果当前你的终端工作路径带有中文或者空格，你可以使用`cd 路径`形式进行路径切换，切换到符合要求的路径中 vue create 项目名称(创建时会自己以对应的项目名称生成目录) ## 例 vue create myproject # 上述命令中，可以允许变的就是`myproject`部分
5、目录结构介绍
public：不需要去改动现有的文件，里面存放的是浏览器访问的入口文件（index.html）
src（后期很多操作都在这个目录中完成）
main.js：项目/程序入口文件 （该文件中JavaScript代码都会被执行）
App.vue：根组件（万物之根）
components：存放自定义的功能组件（涉及到业务逻辑）
assets：静态资源目录（图片、视频、音频等就是静态资源），这里面的静态资源浏览器是无法直接访问的，而是给组件通过模块化的方式导入进组件使用的。
项目中的静态资源有2个地方可以放
public：供在public/index.html中直接引入（link标签、script标签）的
src/assets：供单文件组件导入时需要的静态资源文件（import …）
views：（当前是没有的，但是后期要用）存放视图组件的（只是涉及到页面的布局排版）
如何很好的划分功能组件与视图组件呢？
小技巧：可以被复用的就算它功能组件，不能被复用的就算它是视图组件。
补充：（readme.md文件中的内容）后续入职的时候项目给到的代码可能不不包含node_modules目录，需要自己执行npm i，随后项目才完整。
6、项目的运行及注意事项
6.1、项目的启停
如上图所示，在创建项目完成后有提示我们后续的操作：
- 在命令行中进入项目目录
- 运行
npm run serve命令来启动项目
按照上述命令执行后，我们会见到如下的效果，即表示项目运行成功：
注意：默认端口号会从8080开始，如果再次启动其他项目后续会以8081、8082……进行监听。
如果需要停止正在运行的项目，可以选择以下两种方式任一：
- 关闭终端
- 在终端中按下组合键
Ctrl + C（Cancel），随后选择Y并键入回车（如下图） - 也可以按下两次
Ctrl + C
部分同学的机器在启动vue项目的时候可能会出现卡在“40%”的进度并且长时间不动，如果这样，则直接Ctrl + C停止本次启动，重新再去尝试启动。
关于项目运行时，如果修改了项目代码是否需要重启的说明：
是否需要重启取决于我们修改了什么内容，如果只是修改了代码部分（js、css、vue文件等）是不需要开发者手动重启项目的，系统会自动重新编译（有点nodemon感觉）；但是如果修改的是配置文件，则必须需要自己先去停止项目，然后再去启动项目（手动实现重启）。
6.2、关于ESlint
ESlint用于规范项目的编码，大型项目一般多人开发，为了避免一些个人编程恶习坑自己坑别人，项目中使用了ESlint会起到紧箍咒的作用，强制开发人员注意代码规范。例如，在不使用ESlint的情况下，JS允许我们声明一个不变量但不使用。如果使用了ESlint，在上述情况下会报错如下：
关于ESlint的报错，有一份错误参照，可以访问以下地址查看：https://cn.eslint.org/docs/rules/
在前期学习阶段不建议去使用ESlint，所以待会会重新创建一个不带有eslint的项目来学习路由的使用。但是，以后企业中开发项目的时候都会启用eslint。
实际使用中可以通过npm run lint来解决eslint所爆出的大部分错误（例如：分号、引号、空格、多余换行等等），但是涉及到代码多余或者缺少表达式之类的错误需要开发者自己解决的。
