Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https://github.com/pagekit/vue-resource)。再加上构建工具vue-cli,sass样式,就是一个完整的vue项目的核心构成。axios
概括起来就是:、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。
一、Vue-cli是快速构建这个单页应用的脚手架,
# 全局安装 vue-cli2.0
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
# 全局安装 vue-cli3.0
查看前文链接(https://blog.csdn.net/weixin_42332641/article/details/102928387)
二、vue-router
安装:npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
mport Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)
另外注意在使用中,可以利用vue的过渡属性来渲染出切换页面的效果。
三、vuex
vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成:state action、mutation、getters、mudle组成。
使用流程是: 组件中可以直接调用上面四个部分除了mudle,
1、state
类似vue 对象的data, 用来存放数据以及状态。存放的数据为响应式,如果数据改变,那么依赖数据的组件也会发生相应的改变。
在页面获取state的两种方式例子:
1.store.getters['getRateUserInfo']
2. ...mapGetters({
UserInfo: 'UserInfo', // 用户信息
})
注意:可以通过mapState把全局的state和 getters 映射到当前组件的 computed计算属性中。
import { mapState, mapMutations } from "vuex";
computed: {
...mapState(["filtrateObj",'zjSearch']),
}
2、actions
Action 通过 store.dispatch 方法触发:action支持异步调用(可以调用api),mutation只支持操作同步,并且action提交的是 mutation,而不是直接变更状态。
例如:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
detailActions({commit}, value) { //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
commit('detailDataChange', value)
},
3、mutation
每个 mutation 都有一个字符串的 事件类型(type) 和一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。
4、getters
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
//实时监听state值的变化(最新状态)
hasLogged(state) {
return state.hasLogged;
},
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
四、axios
axios是一个http请求包,vue官网推荐使用axios进行http调用。
安装依赖:
npm install axios --save
用来发送get,post请求