一、安裝vue-cli

npm i @vue/cli -g

二、創(chuàng)建項(xiàng)目

vue-cli會(huì)創(chuàng)建一個(gè)完整的項(xiàng)目文件夾,內(nèi)部包含src等,我們僅需要cd進(jìn)打算放置這個(gè)項(xiàng)目文件的文件夾內(nèi)執(zhí)行如下代碼即可;

1.生成項(xiàng)目文件;

終端輸入:

vue create projectname

2.選擇生成配置方式

此處選擇最下面一項(xiàng)進(jìn)行手動(dòng)配置
(你要是喜歡用eslint就直接選vue3那項(xiàng)就好)

3.插件選擇

選擇你需要的插件,上下箭頭移動(dòng),空格切換選取狀態(tài)

選錯(cuò)或漏選?沒事,構(gòu)建完畢后你依然可以通過Vue UI來修改插件配置(下面會(huì)說到)

我不太適應(yīng)ESLint,我這里就不逞能了…
最下的單元測(cè)試(unit Testing)和端到端測(cè)試(E to E Testing),有需求的話就開;

4.單項(xiàng)配置

選中第一項(xiàng)""Choose Vue version來進(jìn)行單項(xiàng)配置:
是否為vue-router啟用HTML5的history模式?

這個(gè)推薦啟用,會(huì)讓你的url更加整潔好看,可讀性更高;
在SPA頁面中,不少方法會(huì)依賴于HTML5的history模式;

你打算怎么存放這些babel&eslint之類的東西的配置文件?

這里我推薦第一項(xiàng)吧…生成單獨(dú)的配置文件,這樣修改的時(shí)候你只需要找到對(duì)應(yīng)的配置文件即可修改對(duì)應(yīng)的配置;

好的,你打算把這次構(gòu)建項(xiàng)目的配置沿用到今后嘛?

這個(gè)你自己決定嘍…
選擇是的話,下次在執(zhí)行第一步時(shí)就會(huì)出現(xiàn)第四個(gè)選項(xiàng),那就是你自定義的配置方法.

給你自己這套配置取個(gè)名字:projectname

5.選擇包管理工具

會(huì)讓你選擇是用npm還是yarn,我這里沒有顯示直接用了npm ,奇奇怪怪;
選自己想用的就好.

至此創(chuàng)建完成.

那我們就運(yùn)行下看看吧!

npm run serve

進(jìn)入相應(yīng)的端口,即可看到Vue的初始界面.

三.VueUI修改配置

打開cmd,輸入"vue ui"等待GUI服務(wù)啟動(dòng),就會(huì)自動(dòng)打開一個(gè)基于本地服務(wù)的UI界面

導(dǎo)入你的項(xiàng)目文件,即可在左側(cè)插件等分類下對(duì)項(xiàng)目進(jìn)行快捷運(yùn)行&插件安裝&插件卸載等等等等操作.

附-刪除已保存的配置選項(xiàng)

如果你保存了配置,那么下次用的時(shí)候會(huì)在這里多一項(xiàng)你自己的配置,太多的話可能會(huì)有點(diǎn)眼花繚亂?

這些配置會(huì)保存在C盤Administrator下的".vuerc"文件中

刪除相應(yīng)的對(duì)象即可.

總結(jié)

到此這篇關(guān)于vue-cli4.5.x快速搭建項(xiàng)目的文章就介紹到這了,更多相關(guān)vue-cli4.5.x 搭建項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論