vue2.X基础速成---核心技术（3）

认识vue-cli

快速创建工程的两种方法（ vue create命令，ui界面）

方法1

vue create hello-world

配置组件

方法2：

vue ui

把这个地址粘贴到浏览器地址栏

勾选
”使用配置文件“
上面勾选的就会在各个配置文件中

工程化项目的目录结构（组件目录、 package. json）

组件化思想

什么是组件化？

• 独立的
• 可复用的
• 整体化的

为什么组件化？

• 实现功能模块的复用
• 高执行效率
• 开发单页面复杂应用

如何拆分？

• 300行原则
• 复用原则：头部导航、底部版权信息、侧边栏，经常复用的
• 业务复杂性原理

组件化带来的问题

• 组件状态管理（vuex）
• 多组件的混合使用，多页面，复杂业务 vue-router）
• 组件间的传参、消息、事件管理（ props，emit/on，bus）

风格指南

固定风格好处

• 好习惯，少走坑
• 写出自己看得懂的代码
• 写出别人看得懂的代码

vue-router

vue调试插件

router目录结构

vuex

为什么使用vuex？

页面由view视图构成，用户操作action，会带来状态state变化，造成视图view更新。传统操作方法一场复杂，例如

• 多个视图依赖于同一状态（例：菜单导航）
• 来自不同视图的行为需要变更同一状态（例：评论弹幕）

vuex的用处

• 为vuejs开发的状态管理模式
• 组件状态集中管理
• 组件状态改变遵循统一的规则

简单说，可以实现多个页面状态更新的管理，页面更新

如何使用vuex？

1. 在views文件夹中创建一个store.js文件，

然后引用vue，vuex

import Vue from 'vue'
import Vuex from 'vuex'

使用vuex

Vue.use(Vuex)

再定义states,mutations

state：{
组建共有的状态变量:变量值
}
mutations：{
	改变组件状态的函数/方法{
		this.state.blabla
	}
}

2. 在组件中怎么使用vuex？

在组件中引入store.js

import store from '@/store(.js)'//(.js)可以省略

对象中引用

store,

在组件中修改
关键词commit

store.commit('increase')

调试方法

方法1;

alert()
console.log()
debugger

debugger然后在网页F12，控制台中输入this.xxx输出

方法2