（1）配置vue init webpack demoTest（后面的信息盐须，若不是項目需要指定蚂斤，可以直接默認(rèn)回車確認(rèn)）（可以在自己指定路徑也可以直接裝在默認(rèn)c盤）

eui_vue.png

（2）新建好后，出現(xiàn)的文件夾項目

eui_vue2.png

（3）運行項目npm run start

eui_vue3.png

（4）運行項目畔派，可能會出現(xiàn)這個報錯bug（因為是vue項目里設(shè)置elist規(guī)范(若換行定格不規(guī)范就會報錯铅碍，其實不大影響，只是規(guī)范方面報錯线椰，為了規(guī)范你寫法）胞谈，若需要去除掉這個提示規(guī)范，解決方法：

在config/index.js里配置信息useEslint設(shè)置為true

eui_vue4.png

（5）（如果需要打包項目）運行npm run build (打包后項目出現(xiàn)以下的文件夾)

eui_vue5.png

(6）項目文件放置（只是個人這樣設(shè)置憨愉，方便開發(fā)）：

eui_vue6.png

（7）項目開發(fā)--用什么配置什么

1）引入重置css文件樣式

在mainjs引入重置樣式（重置樣式文件放置在assets文件里）

eui_vue7.png

2）element.ui安裝與配置

先配置插件npm install element-ui --save-dev

eui_vue8.png

在main.js文件中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

e.png

3）less安裝與配置

npm install less less-loader --save-dev

eui_vue9.png

在webpack.base.conf.js里面配置：

eui_vue10.png

4）axios安裝與配置

eui_vue11.png

第一種方式：引入全局使用

eui_vue12.png

第二種方式：封裝axios文件后設(shè)置使用

在需要用到這請求的組件里面引入

eui_vue13.png

5）安裝與配置json-server（后臺暫時沒接口過來烦绳，可以虛擬一個本地服務(wù)器），也可以結(jié)合postman接口測試來使用

全局安裝

eui_vue14.png

cd到對應(yīng)目錄配紫，然后再局部安裝

eui_vue15.png

db.json模板（在項目里面新建的json文件）

eui_vue16.png

在package.json里面輸入script腳本命令行mock(mock這名字隨意可以改)
"mock":“json-server db.json --port 8080”

eui_vue17.png

運行npm run mock

eui_vue18.png

eui_vue19.png

安裝后配置信息和配置代理

在webpack.dev文件里

const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use('/api', apiRouter)
apiServer.listen(8081, () => {
console.log('JSON Server is running')
})

在config/index.js文件里配置

proxyTable: {
'/api':'http://localhost:8081/', //通過本地服務(wù)器將你的請求轉(zhuǎn)發(fā)到這個地址
changeOrigin:true,//設(shè)置這個參數(shù)可以避免跨域
},

結(jié)合axios使用：

eui_vue20.png

（8）基礎(chǔ)布局

1）根組件app.vue径密，路由掛載

eui_vue21.png

2)home.vue組件：

eui_vue22.png

3）head.vue頭部組件

eui_vue23.png

效果圖

eui_vue24.png

4）menu左菜單

eui_vue25.png

路由設(shè)置

eui_vue26.png

效果圖

eui_vue27.png

…基本的固定布局搭好

（9）用git，上傳代碼到分支

1)git add .
2)git commit -m ""
3)git checkout 分支名稱(切換到分支)（若查看分支 git branch）
4）git pull origin 分支名稱（如果是主干躺孝，一般git pull就可以）
5）git push origin 分支名稱（如果是主干享扔，則是master）

這是本人搭建一個demo起步底桂，然后可以在搭建好的項目基礎(chǔ)上往下開發(fā)了；記錄項目起步的準(zhǔn)備與部分流程惧眠，為了方便自己日后查看籽懦，同時分享給大家，若寫的有不好或有錯誤氛魁，請大神體諒與糾正暮顺，謝謝大家的閱讀。

demo源碼（github地址）：https://github.com/lilyping/elementUi_vue_demo

本文作者lilyping
越努力呆盖，越幸運
原文鏈接：http://www.reibang.com/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping