技术栈
vue-cli
vue-router
vuex
axios
1、vue-cli配置项修改
vue-cli 配置项在build文件夹，主文件为webpack.base.conf, 修改部分配置为开发方便，webpack.dev.conf为开发模式运行npm run dev 的时候所用配置，主要修改其devServer，自模拟请求。
- 修改入口项，将通用模块集体打包
entry: {
bablePolyfill: ["babel-polyfill","vue","vuex","vue-router","axios"],
app: './src/main.js'
}
- 修改 webpack.dev.conf
const service =require("./service"); //引入自定义请求，内容如下
/*
module.exports = {
before(app){
app.get("/getList",async(req,res)=>{
res.json({
code:200,
messages:"ok",
data:[]
})
});
}
}
*/
devServer: { //倒入到当前模块内
... service
}
- 安装scss解析插件"node-sass","sass-loader"，transform-decorators-legacy","transform-decorators"使用yarn或npm装载, 修改 .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-1"
],
"plugins": ["transform-vue-jsx", "transform-runtime","transform-decorators-legacy","transform-decorators"],
"env": {
"test": {
"presets": ["env", "stage-1"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node","transform-decorators-legacy","transform-decorators"]
}
}
}
- vue单文件开发, css 单文件引入方式为在style内以 @import的方式引入，lang=“scss”，可以使用scope设置css仅用于当前模块。js可以单独引入。
<template>
<article id="app">
<!--页面整体布局-->
<a-layout id="components-layout-demo-custom-trigger" class="container">
<AppHeader> <!-- 头部导航 --></AppHeader>
<AppSlide :collapsed="collapsed"><!--侧边栏--></AppSlide>
<AppContent>
<!-- 中心路由切换-->
<router-view />
</AppContent>
</a-layout>
</article>
</template>
<style src="@css/animate.css"></style>
<style lang="scss">
@import "@css/public.scss";
</style>
<script src="./app.js"></script>
- redux 的使用, 在入口页面引入名为store的 redux实例，在单页面中设置store属性，这样做是为了在所有子模块中使用，类似react-redux中的<Provider store={store}>
/**
* Created by mazhenxiao on 2018/7/24.
*/
import store from "@store";
export default {
name: 'App',
store,
data(){
return {}
},
components:{
...
}
}
- vuex实例部分设置,采取了模块的方式处理state
import Vue from "vue";
import Vuex from "vuex";
import SIndex from "@store/S-index.js";
Vue.use(Vuex);
const store = new Vuex.Store({
modules:{
"SIndex":new SIndex()
}
})
export default store;
- SIndex 实例,设置name名称js是为了能在后面一览所有触发器，并添加注释说明，非必须。官网主张在vuex实例模块上处理数据加载，其做法效仿angular，后期版本最好采用angular现在采用的decorator方式最佳。
/**
* Created by mazhenxiao on 2018/7/24.
*/
import {
MSIndex_MenuList,MSIndex_TreeData,
ACTIONS_GET_MenuList,ACTIONS_GET_TreeData
} from "@store/name.js";
import Service from "@service/SAppHeader";
class SIndex{
state={
MenuList:[],//AppHeader页面顶部菜单列表
TreeData:[],//AppSlide 左侧M
}
mutations={
[MSIndex_MenuList]:(state,data)=>{state.MenuList=data},
[MSIndex_TreeData]:(state,data)=>{state.TreeData=data}
}//mutations
actions={
[ACTIONS_GET_MenuList]:({commit},params)=>{
Service.getList(params)
.then(da=>{
commit("MSIndex_MenuList",da);
})
},
[ACTIONS_GET_TreeData]:({commit},params)=>{
Service.getTreeData(params)
.then(da=>{
commit("MSIndex_TreeData",da)
})
}
}//actions
} //end class
export default SIndex
- 视图模块掉用,使用vuex中的mapState,mapActions，将vuex单独实例模块中的方法混合到当前试图模块的计算中。
<template>
<ul>
<li v-for="item in MenuList">
<a href="javascript:;" >{{item.text}}</a>
<ol v-if="item.child">
<li v-for="citem in item.child">
<a href="javascript:;">{{citem.text}}</a>
</li>
</ol>
</li>
</ul>
</template>
<script>
import {mapState,mapActions} from "vuex";
export default{
name:"AppHeader",
data(){
return {
}
},
mounted(){
this.ACTIONS_GET_MenuList({load:"加载顶部菜单"});
},
computed:{
...mapState({
MenuList:state=>state.SIndex.MenuList, //顶部菜单
})
},
methods:{
...mapActions({
ACTIONS_GET_MenuList:(dispatch,params)=>dispatch("ACTIONS_GET_MenuList",params)
})
}
}
</script>
