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后面的网址复制粘贴到网页打开,出现下面的内容。