1 環(huán)境準(zhǔn)備

最近由于項(xiàng)目需要且人員不足（其實(shí)是不想求別人。。。），又希望多學(xué)點(diǎn)知識(shí)，于是動(dòng)手自己搭建一個(gè)后臺(tái)管理的項(xiàng)目。

自己不熟悉的主要是前端，因此想從零開(kāi)始試試前端，選擇了據(jù)說(shuō)較為簡(jiǎn)單的vue，當(dāng)然對(duì)于我來(lái)說(shuō)啥都不懂，因此記錄一下相應(yīng)的搭建過(guò)程以及一些比較詳細(xì)的坑。

相關(guān)包和庫(kù)的準(zhǔn)備

• node 8.11.3
• npm 5.6.0
• vue 3.9.3
• @vue/cli 3.9.3

其中的@vue/cli 使用npm指令安裝即可，如果有舊版本，請(qǐng)先使用npm uninstall卸載舊版本

npm install -g @vue/cli

創(chuàng)建一個(gè)項(xiàng)目

我們先使用vue指令創(chuàng)建一個(gè)項(xiàng)目

vue create keng(你的項(xiàng)目名)

手動(dòng)相關(guān)插件的安裝

image

然后就是項(xiàng)目中插件的選擇

image

這里選了Babel，Typescript，Router，Vuex，CSS預(yù)處理器，語(yǔ)法格式檢查工具Linter，由于選擇了CSS預(yù)處理器和Linter，接下來(lái)還要詳細(xì)的選擇標(biāo)準(zhǔn)

image

image

選擇每次保存時(shí)進(jìn)行代碼校驗(yàn)規(guī)則

image

在package.json中保存相關(guān)配置

image

沒(méi)有選項(xiàng)的一路敲回車(chē)就好了，然后等待安裝。

image

安裝成功

image

接下來(lái)我們?cè)囍\(yùn)行。

運(yùn)行項(xiàng)目

按照官方引導(dǎo)就行了：

cd keng
npm run serve

image

訪問(wèn)一下：

image

創(chuàng)建成功！整個(gè)環(huán)境準(zhǔn)備就完成啦！