前言
在使用vue-cli创建工程前,在cmd中使用
1
vue --version
确认vue-cli版本高于等于3.0,如果低于3.0版本.执行已下命令:
1
2
npm uninstall -g vue-cli
npm install -g @vue/cli
执行后结果为:
1
2
vue --version
@vue/cli 4.0.5
正文
使用vue-cli创建工程项目
①使用vue create命令行
在cmd中输入
1
vue create hello-world
选择默认配置或自定义配置
②使用vue ui命令行
进入可视化网页端进行创建工程.
组件化思想
什么是组件化?
- 独立的
- 可复用的
- 整体化的
为什么要组件化?
- 实现功能模块复用
- 高执行效率
- 开发单页面复杂应用—进行拆分
如何进行拆分
- 300行原则
- 复用原则
- 业务复杂性原则
组件带来的问题
- 组件状态管理(vuex)
- 多组件的混合使用,多页面,复杂业务(vue-router)
- 组件间的传参、消息、事件管理( props , emit/on , bus )
代码规范
vue-router的创建与使用
①在views文件夹中创建新的vue文件
这里注意格式的规范,注意格式的规范,注意格式的规范,不然无法正常生成页面!
②在router文件夹中进行修改
③在App.vue文件中新增router-link标签
vuex 介绍
- 多个识图依赖于同一状态,如:菜单导航
- 来自不同视图的行为需要变更同一状态,如:评论弹幕
什么是vuex?
- 为vue.js开发的状态管理模式
- 组件状态集中管理
- 组件状态改变遵循统一的规则
vuex 的基础使用
①配置store文件夹中的index.js文件
state中变量应为需要全局管理的变量.
mutations中应为通过vuex管理的方法.
使用import store from '../store/index'引入vuex,在export default中调入store,再为新增的button绑定事件.
修改要数值显示的页面,使用import store from '../store/index'引入vuex,在export default中调入store,再添加return事件更新页面.
集成Vue
集成场景
- 简单的单页面 — 直接在页面上引入 CDN 脚本
- 复杂的单页面/多页面应用 — 使用 vue-cli 创建工程
开发工作流
- 需求调研
- 交互设计、逻辑设计、接口设计
- 代码实现、测试运行(10% ~ 20%)、线上部署
