### <------------------- 1.路由：試試 ------------------> ~~~ import Vue from 'vue' import VueRouter from 'vue-router' // 引用路由配置文件 import routes from './config/routes' // 使用配置文件規則 const router = new VueRouter({ routes: routes }) // 跑起來吧 new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }) ~~~ ***** ### <------------------- 2.elementUI ------------------> ~~~ // 引入ui組件 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' // import 'style/elementUI/elementUI.css' Vue.use(ElementUI) ~~~ ***** ### <------------------- 3.axios 發送請求 ------------------> ~~~ // axios 官方推薦API import axios from 'axios' Vue.prototype.$http = axios ~~~ ****** >[info]可以把接口封裝到services里邊，防止接口修改維護時，可以很快直接的定位。 ~~~ import axios from 'axios' let adminService = {}； adminService = { getUser(params) { return new Promise((resolve, reject) => { axios.post(baseURL + '/getUser',params).then(function(res) { resolve(res); }).catch(function(reason){ console.log(reason); }); }); }, } export { adminService } ~~~ 如果本地測試的話，可以做到前后端分離，只不過要保存一份json格式的文件。以方便測試。這樣做，好處多多。本人在搭建環境的時候，逐漸總結和積累的。  ### <------------------- 4.vuex數據 ------------------> ~~~ // 組件之間數據傳遞 import Vuex from 'vuex' Vue.use(Vuex) import store from './config/vuex/store' ~~~ store.js---保存存儲數據的 ~~~ import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 定義狀態 state: { // 靜態的。 classfiyList:[ {"enable":"0","name":"管理員","value":"1"}, {"enable":"0","name":"領導","value":"2"}, {"enable":"0","name":"老師","value":"3"}, {"enable":"0","name":"學生","value":"4"} ], trainmodelQuery:{}, } mutations: { getTrainmodelQuery(state,trainmodelQuery){ state.trainmodelQuery = trainmodelQuery } } ~~~ ~~~ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }) ~~~ 子頁面需要把數據存儲到store里邊 ~~~ this.$store.commit('getTrainmodelQuery',params); ~~~ ****