今天我要講一下我的第一個(gè)vue腳手架項(xiàng)目的搭建箍铲。可能很多人會(huì)想鬓椭， vue腳手架有什么可說(shuō)的呢颠猴， 一個(gè)vue init命令就完事了。話雖如此小染，可是一個(gè)完整的項(xiàng)目不應(yīng)該只有命令翘瓮。話不多說(shuō)，直接正文吧裤翩。
第一步资盅，安裝node環(huán)境
下載一個(gè)node安裝包， 然后安裝到電腦上就ok了踊赠， 如果弄得版本過(guò)低呵扛， window系統(tǒng)上就需要重新下載一個(gè)最新的node安裝包， 然后重新安裝到原安裝路徑下筐带。
第二步今穿， 安裝vue
npm install vue
第三步， 安裝vue-cli
npm install --global vue-cli
第四步伦籍， 初始化一個(gè)vue項(xiàng)目
vue list
vue init webpack project
可以再初始化之前先使用vue list命令查看一下可以使用的vue腳手架模板蓝晒，模板類(lèi)型主流的有這幾種：
browserify—全功能的Browserify + vueify，包括熱加載帖鸦，靜態(tài)檢測(cè)芝薇，單元測(cè)試
browserify-simple—一個(gè)簡(jiǎn)易的Browserify + vueify，以便于快速開(kāi)始作儿。
webpack—全功能的Webpack + vueify洛二，包括熱加載，靜態(tài)檢測(cè)，單元測(cè)試
webpack-simple—一個(gè)簡(jiǎn)易的Webpack + vueify灭红，以便于快速開(kāi)始侣滩。
pwa —漸進(jìn)式網(wǎng)頁(yè)應(yīng)用(深度了解:https://blog.csdn.net/dadadeganhuo/article/details/78195634)
我的項(xiàng)目用的模板是webpack，project是項(xiàng)目名稱(chēng)变擒，也是項(xiàng)目開(kāi)發(fā)的文件夾
是不是以為到這里就應(yīng)該執(zhí)行一下npm install就結(jié)束了君珠？ no！一個(gè)完整項(xiàng)目的搭建還要思考很多
第五步娇斑， 項(xiàng)目開(kāi)發(fā)中需要用到的組件和插件策添，以及輔助工具的準(zhǔn)備
打開(kāi)webpack.json, 在原來(lái)devDependencies的基礎(chǔ)上增加route、vuex毫缆、json-server唯竹、axios、less苦丁。 添加完以后浸颓，執(zhí)行npm install
這個(gè)時(shí)候可能會(huì)報(bào)錯(cuò)： npm ERR! code EINTEGRITY……
報(bào)錯(cuò)處理執(zhí)行下面幾步:
npm audit fix //掃描項(xiàng)目中的漏洞并自動(dòng)將任何兼容的更新安裝到易受攻擊的依賴(lài)項(xiàng)
npm audit fix -force //已a(bǔ)udit fix安裝semver，主要更新到頂層的依賴(lài)旺拉，不只是semver兼容的
npm audit fix //掃描項(xiàng)目中的漏洞并顯示詳細(xì)信息产上，而無(wú)需修復(fù)任何內(nèi)容
這個(gè)時(shí)候vue開(kāi)發(fā)環(huán)境就安裝完了。
第六步蛾狗，根據(jù)項(xiàng)目需要晋涣，重新修改項(xiàng)目架構(gòu)
1.項(xiàng)目開(kāi)發(fā)的架構(gòu)需要按照裝完的樣子去開(kāi)發(fā)嗎？ 肯定是不可以的沉桌。
從項(xiàng)目的長(zhǎng)期維護(hù)角度出發(fā)谢鹊。 http請(qǐng)求的處理和vuex數(shù)據(jù)的處理以及router的管理最好和模板分開(kāi)并且統(tǒng)一管理。于是我建了一個(gè)api文件夾留凭， 一個(gè)router文件夾佃扼，一個(gè)store文件夾。 為route組件和公用小組件也分別建文件夾分開(kāi)管理
2.試一下http請(qǐng)求是否正常冰抢， 那么就隨便寫(xiě)一個(gè)http請(qǐng)求松嘶， mock一些數(shù)據(jù)。 配置json-server文件挎扰，啟動(dòng)看一下是否正常翠订。
3.開(kāi)發(fā)環(huán)境指定http請(qǐng)求地址： 需要在config/index.js里配置proxyTable的參數(shù).
配置項(xiàng)是這樣的
proxyTable: {
????'/api': {
????????target: 'http://172.16.124.43:8088',
????????changeOrigin: true,
????????pathRewrite: {
????????????'^/api': ''
????????}
????}
}
第七步，寫(xiě)demo頁(yè)面測(cè)試
1） 隨便寫(xiě)一個(gè)demo組件
2） 創(chuàng)建一個(gè)初始化樣式的css文件（公用的靜態(tài)資源最好直接放在static文件夾中遵倦，在index.html直接引入）尽超。
3） 打包項(xiàng)目，瀏覽打包之后的項(xiàng)目看能否正常展示（主要是打包后路徑有沒(méi)有出錯(cuò)的梧躺。如果這個(gè)時(shí)候部分文件或者全部文件報(bào)錯(cuò)了似谁， 可以修改assetsPublicPath字段的值）
測(cè)試開(kāi)發(fā)和打包后頁(yè)面正常展示, 這個(gè)時(shí)候一個(gè)項(xiàng)目的搭建就結(jié)束了傲绣。
感謝你讀到這里，覺(jué)得文章還可以的話巩踏，手動(dòng)將公眾號(hào)設(shè)為星標(biāo)秃诵，這樣就能第一時(shí)間看到我們的內(nèi)容，感恩~塞琼。希望對(duì)大家的實(shí)際工作有所幫助菠净，不足之處，感謝指正彪杉。
