一 ：技術選型
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,
'錯誤異常二')
}
})
})
}
}
