技術(shù)棧
vue-cli
vue-router
vuex
axios
1、vue-cli配置項(xiàng)修改
vue-cli 配置項(xiàng)在build文件夾鹅心，主文件為webpack.base.conf, 修改部分配置為開(kāi)發(fā)方便锅移，webpack.dev.conf為開(kāi)發(fā)模式運(yùn)行npm run dev 的時(shí)候所用配置熔掺，主要修改其devServer，自模擬請(qǐng)求非剃。
- 修改入口項(xiàng)置逻，將通用模塊集體打包
entry: {
bablePolyfill: ["babel-polyfill","vue","vuex","vue-router","axios"],
app: './src/main.js'
}
- 修改 webpack.dev.conf
const service =require("./service"); //引入自定義請(qǐng)求，內(nèi)容如下
/*
module.exports = {
before(app){
app.get("/getList",async(req,res)=>{
res.json({
code:200,
messages:"ok",
data:[]
})
});
}
}
*/
devServer: { //倒入到當(dāng)前模塊內(nèi)
... 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單文件開(kāi)發(fā), css 單文件引入方式為在style內(nèi)以 @import的方式引入券坞，lang=“scss”，可以使用scope設(shè)置css僅用于當(dāng)前模塊肺素。js可以單獨(dú)引入恨锚。
<template>
<article id="app">
<!--頁(yè)面整體布局-->
<a-layout id="components-layout-demo-custom-trigger" class="container">
<AppHeader> <!-- 頭部導(dǎo)航 --></AppHeader>
<AppSlide :collapsed="collapsed"><!--側(cè)邊欄--></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 的使用, 在入口頁(yè)面引入名為store的 redux實(shí)例，在單頁(yè)面中設(shè)置store屬性倍靡，這樣做是為了在所有子模塊中使用猴伶，類(lèi)似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實(shí)例部分設(shè)置,采取了模塊的方式處理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 實(shí)例,設(shè)置name名稱(chēng)js是為了能在后面一覽所有觸發(fā)器，并添加注釋說(shuō)明塌西，非必須他挎。官網(wǎng)主張?jiān)趘uex實(shí)例模塊上處理數(shù)據(jù)加載，其做法效仿angular捡需，后期版本最好采用angular現(xiàn)在采用的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頁(yè)面頂部菜單列表
TreeData:[],//AppSlide 左側(cè)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單獨(dú)實(shí)例模塊中的方法混合到當(dāng)前試圖模塊的計(jì)算中栖忠。
<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>
