1.组件化与模块化
- 组件化：组件化是从UI界面的角度进行划分的，将页面构成分成一个个组件，方便UI组件的重用。组件包含页面构成（template）、样式（css）、功能（js）。
- 模块化：模块化是从代码逻辑的角度进行划分，将项目按照一定的规则拆分成一个个模块，进行组合使用
模块化方便代码的分层开发，保证每个功能模块的职能单一。
模块化开发一般需要独立的开发环境，一般基于Node.js和webpack进行环境构建。
Vue模块化项目环境的搭建，可以通过官方提供的环境构建工具Vue CLI，称为Vue脚手架。
2.Vue脚手架
脚手架安装
@vue/cli是一个Vue脚手架，用来快速构建模块化项目结构。所需系统环境: node环境、npm环境。查看环境
node -v
npm -v全局安装：（需要管理员权限）
npm install @vue/cli -g验证安装：
vue --version常用命令：
- 创建项目：
vue create 项目名
或 vue ui- 为项目增加扩展插件：
vue add 插件3.使用脚手架
3.1创建项目
创建一个存放项目的文件夹，在命令行窗口切换到该文件夹下。（或直接在该文件夹中使用shift+鼠标右键，选择在此文件夹打开DOM窗口。）
在命令行窗口输入命令创建Vue项目，进入交互模式。（项目名称必须2个或以上字母组成，可由短划线隔开）
vue create test-project执行后，进入预设选择。提供了三个选项，前两个是使用默认选项，只包含基础依赖。最后一个是自定义环境，支持手动选择功能特性，自己想用什么，选择什么。
3.2环境自定义
通过键盘上下键选择第三个选项，进入环境自定义的选择。
环境特性介绍：
- Babel：ES6语法兼容转换器，可以将ES6代码转为ES5代码，避免运行环境不支持。
- TypeScript：TS语法支持
- Progressive web App（PWA）Support：构建渐进式web应用，优化用
- Router：集成路由功能
- Vuex：集成统一数据状态管理器
- CSS pre-processors：CSS预编译，支持使用LESS、SASS等动态样式语言
- Linter/Formatter：代码规范检查和格式化检测
- Unit Testing：单元测试
- E2E Testing：端到端测试
使用键盘上下键将光标移动到要选择的行，使用空格选中（*）。
3.3进一步配置环境
如果选择了CSS Pre-processors，则需要选择动态样式语言，可以选择Sass/SCSS或Less。
如果选择Linter / Formatter，则需要选择 代码规范检查的规则。
ESLint with error prevention only # 使用ESLint，仅检测错误（ESLint是用来统一代码规范和风格的工具）
ESLint + Airbnb config # 使用 eslint+airbnb 前端规范
ESLint + Standard config # 使用标准规范
ESLint + Prettier # 使用严格规范进一步选择代码规范检查的时机
Lint on save # 文件保存时
Lint and fix on commit # 代码整理和提交时继续选择工具配置文件的存放位置
In dedicated config files # 存放在独立的配置文件中
In package.json # 集成在package.json文件中此处一般选择创建独立的配置文件。
然后，继续选择是否将上述配置保存为一个预设选项，方便以后创建项目使用，选择y。并为预设创建名称：mypreset。
回车后，开始创建项目test-project。
出现上述结果，则项目创建成功，并给出了启动项目的命令。
3.4启动项目
“npm run 命令名称”是npm内置的脚本执行命令，该命令会自动搜索执行目录下package.json文件中的’scripts’对应的命令并执行。
启动成功后，会给出访问地址，包括Local、network两种。将Local后面的网址复制粘贴到网页打开，出现下面的内容。
