vue-router、vue-cli、vuex在cmd下快速安装使用
vue-router
安装
a. cmd切换盘符到当前项目的文件夹下
b. 安装路由模块 npm install vue-router
c. main.js引入
-
import VueRouter from ‘vue-router’
-
可以在main.js中直接使用
-
也可以建立routes.js文件然后使用 （推荐，方便后期维护）
配置及使用路由
配置
const router = new VueRouter({
routes: Routes,
mode:"history", //取消默认的#
})
在new Vue中使用
new Vue({
el: '#app',
components: { App },
template: '<App/>',
router: router,
})
也可以使用单独的路由文件（routes.js），结构上更加条里，但需要将配置路由的组件，引入到当前文件当中
vue-cli
安装
a. 下载node.js的环境
b. 检验安装环境
i. 使用node -v测试node版本
ii. 使用npm -v测试npm版本
c. cmd切换盘符到当前项目的文件夹下
d. 安装使用vue-cli
i. 命令行安装 npm install -g @vue/cli
ii. vue --version (检测版本)
e. 创建项目
i. cmd切换盘符的指定路径
ii. vue init webpack 项目名称（不能有大写字母）
iii. 后边的几个yes/no可以选择no，有需要的话在进行安装
iv. cd 到当前项目文件夹
v. 执行 npm install
f. 打开项目到浏览器 npm run dev
g. 复制 地址到浏览器打开
配置
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>',
})
vuex
安装
a. cmd切换盘符到当前项目的文件夹下
b. 执行安装 npm install vuex
c. 检查package.json中是否有vuex的数据（vuex对应的版本），若有证明安装成功
d. 导入vuex import Vuex from ‘vuex’
e. 全局使用vuex Vue.use(Vuex)
i. 可以在main.js来写
ii. 也可以新建js文件统一写vuex的代码
使用
在组件中使用（通过计算属性）
computed:{
products(){
return this.$store.state.products;
}
}
对State、Getter、Mutation、Action、Module的理解
State：
- 每个应用将仅仅包含一个 store 实例
- 计算属性返回 count () {
return store.state.count } - 子组件能通过 this. store.state.count
- mapState 辅助函数
Getter：
- “getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter
的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 - Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值
- Getter 也可以接受其他 getter 作为第二个参数： doneTodosCount: (state, getters) => {
return getters.doneTodos.length } - mapGetters 辅助函数
Mutation：
-
Vuex 的 store 中的状态的唯一方法是提交 mutation
-
以相应的 type 调用 store.commit 方法：
store.commit(‘increment’)
-
可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
Action：
- Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
- Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
- context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取
state 和 getters。 通过 store.dispatch 方法触发——异步 - …mapActions
Module:
- Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的
state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 - 对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象state
使用辅助函数…mapGetters和…mapActions
a. cmd切换盘符到当前项目的文件夹下
b. 安装 npm install babel-preset-stage-2
c. .babelrc 文件中检查 “presets” 是否有 “stage-2”
d. 引入vuex
import Vuex from ‘vuex’
e. 使用
Vue.use(Vuex);
f. 引入（在哪个组件使用在哪个组件引入）
import {mapGetters} from ‘vuex’
import {mapActions} from ‘vuex’
g. 重新启动服务器 npm run dev（看是否需要）
