最近一段時間在開發新專案很高興領導信任我，能把如此重要的任務交給我。以下是我的個人總結，方便以後能夠快速回憶具體細節，同時也方便大家。有欠妥之處望大神糾正，一起進步~
技術選型：
- 基於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.git
(2.0版本)~ https://github.com/lifuxu521/vue-element2.0.git
文件結構
-
1區是專案搭建後自動生成的（其中dist檔案是最後專案打包時候自動生成的）
-
2區是主要程式碼編輯部分 我主要編輯了axios,components(元件模板），router(路由配置）,vuex(狀態配置），config.js(公用URL抽取）
-
3區是我抽取的公共css和js部分供整個專案的使用。
-
綠色劃線部分是專案的主入口根例項
步驟一（搭建腳手架）
哈哈很簡單
- 裝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:埠號如果出現
恭喜你進入了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