(1)配置vue init webpack demoTest(后面的信息盐须,若不是項目需要指定蚂斤,可以直接默認(rèn)回車確認(rèn))(可以在自己指定路徑也可以直接裝在默認(rèn)c盤)
(2)新建好后,出現(xiàn)的文件夾項目
(3)運行項目npm run start
(4)運行項目畔派,可能會出現(xiàn)這個報錯bug(因為是vue項目里設(shè)置elist規(guī)范(若換行定格不規(guī)范就會報錯铅碍,其實不大影響,只是規(guī)范方面報錯线椰,為了規(guī)范你寫法)胞谈,若需要去除掉這個提示規(guī)范,解決方法:
在config/index.js里配置信息useEslint設(shè)置為true
(5)(如果需要打包項目)運行npm run build (打包后項目出現(xiàn)以下的文件夾)
(6)項目文件放置(只是個人這樣設(shè)置憨愉,方便開發(fā)):
(7)項目開發(fā)--用什么配置什么
1)引入重置css文件樣式
在mainjs引入重置樣式(重置樣式文件放置在assets文件里)
2)element.ui安裝與配置
先配置插件npm install element-ui --save-dev
在main.js文件中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3)less安裝與配置
npm install less less-loader --save-dev
在webpack.base.conf.js里面配置:
4)axios安裝與配置
第一種方式:引入全局使用
第二種方式:封裝axios文件后設(shè)置使用
在需要用到這請求的組件里面引入
5)安裝與配置json-server(后臺暫時沒接口過來烦绳,可以虛擬一個本地服務(wù)器),也可以結(jié)合postman接口測試來使用
全局安裝
cd到對應(yīng)目錄配紫,然后再局部安裝
db.json模板(在項目里面新建的json文件)
在package.json里面輸入script腳本命令行mock(mock這名字隨意可以改)
"mock":“json-server db.json --port 8080”
運行npm run mock
安裝后配置信息和配置代理
在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使用:
(8)基礎(chǔ)布局
1)根組件app.vue径密,路由掛載
2)home.vue組件:
3)head.vue頭部組件
效果圖
4)menu左菜單
路由設(shè)置
效果圖
…基本的固定布局搭好
(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