一个规范vue开发的模版,集成vue,vue router,vuex,axios
---src开始--------------------------
|-assets 【静态文件目录,如一些icon,css,图片等】
|-components 【组件相关目录,一般为从页面抽象出来公用的组件】
|-pages 【页面相关文件】
|-router 【路由相关文件】
|-vuex 【vuex相关文件】
|-modules 【vuex模块】
|-index.js 【store的入口文件,将在这里合并各个vuex模块】
|-api.js 【api获取或者提交数据统一接口】
|-types.js 【定义一些静态的常量】
App.vue 【Vue的入口模版文件】
main.js 【项目入口文件】
------src结束--------------------------
api.js使用方法
# 暴露一个接口在export default里,如,要一个获取get的获取新闻列表数据接口
export default {
# url 接口地址
# cb 回调函数
getNewsLists: (url,cb) => {func_axios(url,cb)},
}
4、不同页面的数据放在不同的vuex模块里,通过getters获取其数据,例如com为通用配置模块,为其新建一个"com.js",放于"vuex/modules",通过vuex/index.js引入,合并,步骤如下:
1、新建vuex/modules/com.js
2、在vuex/index.js中引入,并合并
index.js
# 引入com.js
import com from "./modules/com.js"
Vue.use(Vuex)
const store = new Vuex.Store({
modules:{
com
},
strict:process.env.NODE_ENV !== 'production'
})
export default store;
5、vuex的使用,页面的控制器dispatch一个actions操作,actions操作进行数据获取【调用api.js】,再通过mutations更改state数据,state数据更改后自动更新视图,如要更改应用title【应用的标题,假设咋header组件里显示title】
header组件
<template>
<div>
<div class="title">
{{title}}
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
computed:{
...mapGetters({
title: "getTitle"
})
}
}
</script>
com.js
const state = {
title:""
}
const getters = {
getTitle: state=>state.title
}
const actions = {
setAppTitle({commit},title){
commit("setAppTitle",title);
}
}
const mutations = {
setAppTitle(state,title)
{
state.title = title;
}
}
export default {
state,
actions,
getters,
mutations
}
user.vue更改title为“个人中心”
<script>
export default {
created(){
this.$store.dispatch("setAppTitle","个人中心");
},
}
</script>
# 从github克隆到本地或直接下载[zip文件](https://github.com/lsiten/vue-template/archive/master.zip) 进行解压
git clone https://github.com/lsiten/vue-template.git
# 进入项目目录
cd vue-template
# 下载依赖,如果npm慢可以使用[cnpm](https://github.com/cnpm/cnpm) :cnpm install
npm install
# 打开dev环境
npm run dev