如何搭建+配置+基礎(chǔ)布局--基于elementui+vue的demo項目起步

(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拖云,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子应又,更是在濱河造成了極大的恐慌,老刑警劉巖乏苦,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件株扛,死亡現(xiàn)場離奇詭異,居然都是意外死亡汇荐,警方通過查閱死者的電腦和手機(jī)洞就,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來掀淘,“玉大人旬蟋,你說我怎么就攤上這事「锫Γ” “怎么了倾贰?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長拦惋。 經(jīng)常有香客問我匆浙,道長,這世上最難降的妖魔是什么厕妖? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任首尼,我火速辦了婚禮,結(jié)果婚禮上言秸,老公的妹妹穿的比我還像新娘软能。我一直安慰自己,他們只是感情好举畸,可當(dāng)我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布查排。 她就那樣靜靜地躺著,像睡著了一般俱恶。 火紅的嫁衣襯著肌膚如雪雹嗦。 梳的紋絲不亂的頭發(fā)上范舀,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天,我揣著相機(jī)與錄音了罪,去河邊找鬼锭环。 笑死,一個胖子當(dāng)著我的面吹牛泊藕,可吹牛的內(nèi)容都是我干的辅辩。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼娃圆,長吁一口氣:“原來是場噩夢啊……” “哼玫锋!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起讼呢,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤撩鹿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后悦屏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體节沦,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年础爬,在試婚紗的時候發(fā)現(xiàn)自己被綠了甫贯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡看蚜,死狀恐怖叫搁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情供炎,我是刑警寧澤渴逻,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站碱茁,受9級特大地震影響裸卫,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜纽竣,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一墓贿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蜓氨,春花似錦聋袋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至港令,卻和暖如春啥容,著一層夾襖步出監(jiān)牢的瞬間锈颗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工咪惠, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留击吱,地道東北人。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓遥昧,卻偏偏與公主長得像覆醇,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子炭臭,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容