vue + element搭建後臺管理系統

一 ：技術選型 

　　npm

　　node 如何安裝node能夠訪問官網

　　webpack

　　elementUi

　　vue-cli

　　axios請求

　　vuex+vue-router+vuex +mock.js

二：項目搭建

　　vue init webpack myvueElementProjectName

　　能夠一路回車，eslint語法檢測能夠選擇關閉，對代碼規範有要求能夠開啓，也能提升本身的編碼能力， 安裝依賴的方式能夠選擇yarn或者npm，本文選擇npm。也推薦yarn，優勢是能緩存依賴和依賴版本

　　生成項目以後

　　npm install安裝依賴。假如你有淘寶鏡像也就是cnpm（如何安裝自行百度蟹蟹）。就用cnpm install 

　　安裝依賴完成後 npm run dev 或者npm start 都能啓動項目

　　啓動後就開始修改項目配置了

　　

　　assets主要放置頁面靜態資源

　　static主要放置第三方庫資源，好比咱們的icon庫，什麼的。

　　修改app.vue

　　

　　根據路由裏面時候保持活躍狀態動態給到容器，

　基本準備　個人css預編譯處理器用的是stylus。

　　安裝 stylus ,我使用的時候總是說什麼沒安裝報錯，而後我就把css-loader vue-style-loader 都安裝了一遍，記得用 --save雙杆。

　　爲了確保自動格式化時stylus的風格不發生變化，只須要對vscode進行設置，在vscode的插件選項中搜索 "stylus Supremacy」 安裝，格式化stylus文件的格式。聲明style樣式爲lang=stylus

　　而後修改settings.json文件

   　"stylusSupremacy.insertColons": false, // 是否插入冒號

　　"stylusSupremacy.insertSemicolons": false, // 是否插入分好

　　"stylusSupremacy.insertBraces": false, // 是否插入大括號

　　"stylusSupremacy.insertNewLineAroundImports": false, // import以後是否換行

　　"stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行

　　

　　引入stylus文件

　　

 

 　　.安裝elementUI

　　cnpm install  element-ui -S 安裝

　　而後在main.js里加入 這裏事全局引入。須要按需引入的話參考官網。我的認爲差異不大

　　import ElementUI from 'element-ui'

　　import 'element-ui/lib/theme-chalk/index.css'

　　Vue.use(ElementUI)

　封裝axios

　　

 

 

 　　

import axios from 'axios'

import qs from 'qs'

import {

Message

} from 'element-ui';

// 格式是這樣的： username = renping & password = 123456

var service = axios. create({

baseURL: 'https://api.apiopen.top/',

timeout: 10000,

// headers: {

// 'content-type': 'application/json',

// 'token': '14a1347f412b319b0fef270489f'

// }

// 下一步優化。建立請求攔截器 。建立開發環境下的

})

export default {

/* get請求 */

get( url, params) {

return new Promise(( cback, reject) => {

service({

method: 'get',

url,

params: qs. stringify( params)

}). then( res => {

//axios請求返回的是個promise對象

var resCode = res. status. toString();

if ( resCode. charAt( 0) == '2') { //判斷狀態值是否是2開頭的正確狀態值

cback( res) //cback在promise對象內部

Message({

showClose: true,

message: '這是一條成功消息',

type: 'success'

});

} else {

console. log( res, '成功內部異常1')

}

}). catch( err => {

if (! err. response) {

console. log( err)

Message({

showClose: true,

message: '這是一條錯誤消息',

type: 'error'

});

} else {

reject( err. response)

console. log( err. response, '錯誤異常二')

}

})

})

},

/* post請求 */

post( url, params) {

return new Promise(( cback, reject) => {

service({

method: 'post',

url,

params: qs. stringify( params)

}). then( res => {

//axios請求返回的是個promise對象

var resCode = res. status. toString();

if ( resCode. charAt( 0) == '2') { //判斷狀態值是否是2開頭的正確狀態值

cback( res) //cback在promise對象內部

} else {

console. log( res, '成功內部異常1')

}

}). catch( err => {

if (! err. response) {

console. log( '請求錯誤')

} else {

reject( err. response)

console. log( err. response, '錯誤異常二')

}

})

})

}

}