vue模塊化開發入門| 從0到1——使用vue.js2.0 + ElementUI開發BS後臺管理系統
最近一段時間在開發新項目很高興領導信任我，能把如此重要的任務交給我。如下是個人我的總結，方便之後可以快速回憶具體細節，同時也方便你們。有欠妥之處望大神糾正，一塊兒進步~css
技術選型：
- 基於vue2.0腳手架的搭建
- elementUI 框架 element-cn.eleme.io/#/zh-CN/com…
- vueX狀態管理
- axios —— http封裝+攔截器的使用
- vue-router 路由使用
- webpack簡單配置
- ES6語法
- inconfont 矢量圖應用
github代碼地址:(有用記得給兄弟點個star哈哈~)前端
(1.0版本)~ https://github.com/lifuxu521/vue-element1.0.gitvue
(2.0版本)~ https://github.com/lifuxu521/vue-element2.0.gitnode
文檔結構
-
1區是項目搭建後自動生成的（其中dist文件是最後項目打包時候自動生成的）webpack
-
2區是主要代碼編輯部分 我主要編輯了axios,components(組件模板），router(路由配置）,vuex(狀態配置），config.js(公用URL抽取）ios
-
3區是我抽取的公共css和js部分供整個項目的使用。git
-
綠色劃線部分是項目的主入口根實例es6
步驟一（搭建腳手架）
哈哈很簡單github
- 裝node環境，裝npm或者cnpm
- 裝git界面（我的比較推薦）
- 本地新建一個工做區右鍵git bash here
- npm install vue
- npm install vue-cli
- vue init webpack my-project
- 一頓回車 |Y|n
- cd 你的項目名稱 npm run dev
- 仍是不會能夠參考 segmentfault.com/a/119000001…
- 若是報錯通常是node_modules沒裝好，你能夠考慮重裝
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install
複製代碼
都沒問題後瀏覽器輸入localhost:端口號若是出現web
恭喜你進入了vue的世界了
PS：（你能夠仿照個人項目文件結構改本身的，看我的喜愛隨意調整文件，可是別太嗨皮把配置文件都整沒了）
其實你也能夠直接copy個人項目來使用，去掉不用的文件從新配置路由，而後npm install直接搞定前期項目的搭建
複製代碼
步驟二
裝本身必要的插件工具（好比less,scss,axios,MD5,base64,qs,jq,echats,UI框架等）
-
npm install echarts --save
-
npm install vuex --save
-
npm install --save axios
-
npm install element-ui -S
-
npm install vuex --save
.............
步驟三：編寫組件+配置路由
這一步你能夠看本身的項目需求了，有幾級的頁面，有幾個公用的模板，組件是否要通訊。
好比個人項目是這樣登錄（三種角色登陸）==>左側導航（不一樣角色登錄左側導航顯示不一樣條目）
登錄頁：
系統子頁:
因此我就這樣架構：
第一級有一個login組件和home組件（組件：就至關於一個單個模板頁面）
- login組件配置vuex總登陸狀態,配置相應路由切換
- home組件管理狀態並分發跳轉到子組件
第二級（home下的子組件）：
- home組件主要實現左側和頭部公用部分的邏輯和樣式
- 各個子組件都從home組件嵌套經過邏輯判斷應用哪部分組件
- 一個組件至關於右側一個頁面的，從子組件裏邊書寫相應的局部邏輯編寫局部的樣式
配置路由:
參考資料：
vue-router官網講解：router.vuejs.org/zh-cn/essen…
項目中在router/index.js中我配置了我本身須要的路由，若是須要嵌套路由的話你就能夠增長childern:[]屬性，將二級路由設置到json中，通常路由會有icon圖標，你能夠在你配置的路由上增長iconCls(自定義屬性),把對應的矢量圖的類名寫好，
<template v-for="item in $router.options.routes[2].children" >
<router-link v-bind:to="item.path">
<i class="iconfont" v-bind:class="item.iconCls" v-bind:title="item.name"></i>
<span class="">{{item.name}}</span>
</router-link>
</template>
複製代碼
能夠參考上邊這段最簡單的遍歷路由的代碼書寫本身的，還能夠經過vue標記flag管理路由狀態，然後你能夠參考下邊這段代碼在main.js中書寫一些路由切換的時候的邏輯
routes.beforeEach((to, from, next) => {
//NProgress.start();
next();
if (to.path == '/login') {
}else{
};
})
複製代碼
可參考資料： blog.csdn.net/latency_che…
下期能夠參考
步驟四 vuex狀態應用
對於初學者來講這個東西好像摸不着頭腦，其實vuex沒這麼難搞無非就是順着配置好。它主要能夠管理一些全局的狀態同localstrorage有些相似，固然若是項目容許用localstorage這種情景記錄狀況能夠考慮不用vuex, 其實主要就這幾個配置項
state
mutations
actions
getters
複製代碼
而後形式呢就這樣寫：
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
//首先聲明一個狀態 state
const state = {
}
// 而後給 actions 註冊事件處理函數，當這個函數被觸發時，將狀態提交到 mutaions中處理
const actions = {
// 提交到mutations中處理
loginin:({commit})=>commit('LOGININ'),//首次登陸
refreshToken:({commit})=>commit('REToken'),//五分鐘刷新token
loginout:({commit})=>commit('LOGINOUT'),//登出
gettoken:({commit})=>commit('GETTOKEN')//首次刷新token
}
// 更新狀態
const mutations = {
LOGININ (state,odata) {
// 登陸狀態變爲登陸
//state.loginInfo.logined = true
},
// 登出
LOGINOUT (state) {
},
GETTOKEN(state,odata){
},
/***刷新token**/
REToken(state){
}
}
// 獲取狀態信息
const getters = {
// gettoken(state){
// return state.loginInfo.access_token;
// }
}
// 下面這個至關關鍵了，全部模塊，記住是全部，註冊才能使用
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
複製代碼
同傳統的vue實例同樣，有一個相似data的狀態state,而後開始註冊並更新調用更新數據。最後咱們在任何頁面直接引用文件而後調用 相似這樣 store.dispatch("refreshToken")就能夠了。簡單麼~
參考文章
步驟五 axios應用
這個是官網的APi www.kancloud.cn/yunye/axios…
其實axios就至關於jq裏邊的$.ajax(),主要使用了它的攔截器可以在發送http請求以前配置一些設置。好比咱們公司須要每次請求驗證token值，因此就須要這個來操做。
例子：
axios.js對應設置
import axios from 'axios';
import config from '@/config'//配置動態IP和Port
let base1 = 'http://172.16.0.13:31427';
//刷新token
export const getRefreshToken = params => { return instanceBase1.post(`/mtccp/oauth/refresh `, params).then(res => res.data); };
//登陸
export const requestLogin = params => { return instanceBase1.post(`/mtccp/oauth/login `, params).then(res => res.data); };
/***************************建立axios實例***************************************/
const instanceBase1 = axios.create({
// baseURL: config.BASE1_URL,(本公司上線代碼須要換動態IP和Port前期準備)
baseURL: base1,
// headers: {
// 'Access-Control-Allow-Origin':'*',
// 'Content-Type': 'application/json',
// 'Access-Control-Allow-Headers':'Authorization,Origin, X-Requested-With, Content-Type, Accept',
// }
// transformRequest: [function (data) {
// data = QS.stringify(data);
// return data;
// }]
// withCredentials:true //設置跨域(並沒什麼卵用)！
});
/***************************配置攔截器***************************************/
instanceBase1.interceptors.request.use(
// //在發送請求以前作些什麼
config => {
// if (request.getMethod().equals("OPTIONS")) {
// HttpUtil.setResponse(response, HttpStatus.OK.value(), null);
// return;
// }
config.headers.Authorization = store.state.loginInfo.access_token;//vuex管理token
//如下代碼2.0版本會有機會參考應用
// var xtoken = getXtoken()
// if(xtoken != null){
// config.headers['X-Token'] = xtoken
// }
// if(config.method=='post'){
// config.data = {
// ...config.data,
// _t: Date.parse(new Date())/1000,
// }
// }else if(config.method=='get'){
// config.params = {
// _t: Date.parse(new Date())/1000,
// ...config.params
// }
// }
return config;
},function(error){
store.dispatch("loginout");//登出刪除狀態
return Promise.reject(error)
});
複製代碼
以上就是一個完整的axios實例建立 在任何組件想調用後臺接口的時就能夠先這樣作
- import {requestLogin} from '../../axios/axios';
- 在vue實例中掛載函數methods:
getList(){
let _this = this;
let params ={
};
console.log(params)
requestLogin(params).then((res) => {
console.log(res)
if(res.code=="200000"){
};
//NProgress.done();
});
},
複製代碼
到此一個帶有攔截器的http請求完成
特別注意：
當你配置的時候會有跨域問題，不論是本地，仍是推送線上均可能會出現跨域問題。axios不支持jsonp格式跨域，首先你要肯定後臺大哥是否是給你設置了支持不支持跨域(header的相關配置)可參考以下
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Content-Type");
複製代碼
若是確實設置以後，而後就是前端這邊的問題了，首先模塊化開發模式會有一個問題，會有代理訪問服務存在，就是說不是直接訪問接口，會在代理服務中轉下。因此咱們前端須要配置下具體訪問路徑而後就能夠實現跨域了 項目中在config文件夾的index.js如圖
參考資料：
www.kancloud.cn/yunye/axios…(官網)
步驟六 簡單配置webpack+打包上線
項目開發到必定週期就要打包上線，簡單的就是運行以前講的npm run build 而後把生成的dist文件夾提交到服務器上，而後作好引導就行了，可是事實上須要注意如下幾點：
-
build以前要設置好webpack文件：
-
此步驟若項目不存在動態設置IP和port可忽略
3)最後一步npm run build 提交代碼搞定！
之後但願能和大神討論下webpack相關應用，小弟深感榮幸！
參考文檔：
www.webpackjs.com/ webpack官網
關於ES6語法和iconfont相關知識
-
iconfont:www.iconfont.cn/
無需多言
總結
首先很感謝身邊的大神們對個人幫助，但願個人心血能確實幫助到你們，送給你們一句話：你走過的路、見過的人、看過的書、 學過的東西，最終都會回饋到你的身上~
歡迎各位交流
QQ：2996713250
wx:1050049640
- 1. vue入門 | 使用vue.js2.0 + ElementUI開發後臺管理系統詳細教程
- 2. vue入門 | 使用vue.js2.0 + ElementUI開發後臺管理系統詳細教程（一）
- 3. 基於vue模塊化開發後臺系統——準備工做
- 4. vue 搭建後臺系統模塊化開發
- 5. 基於vue模塊化開發後臺系統——權限控制
- 6. 基於vue模塊化開發後臺系統——構建項目
- 7. node後臺開發入門——http模塊
- 8. vue後臺管理系統開發完整開源代碼基於elementUI
- 9. 使用Vue-cli搭建後臺簡單管理系統vue.js2.0
- 10. 全棧開發入門實戰：後臺管理系統
- 更多相關文章...
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • 操作系統（OS）平臺 統計 - 瀏覽器信息
- • PHP開發工具
- • Java Agent入門實戰（三）-JVM Attach原理與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。