一、安裝vue-cli

npm i @vue/cli -g

二、創(chuàng)建項目

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

1.生成項目文件;

終端輸入:

vue create projectname

2.選擇生成配置方式

此處選擇最下面一項進行手動配置
(你要是喜歡用eslint就直接選vue3那項就好)

3.插件選擇

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

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

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

4.單項配置

選中第一項""Choose Vue version來進行單項配置:
是否為vue-router啟用HTML5的history模式?

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

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

這里我推薦第一項吧…生成單獨的配置文件,這樣修改的時候你只需要找到對應的配置文件即可修改對應的配置;

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

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

給你自己這套配置取個名字:projectname

5.選擇包管理工具

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

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

那我們就運行下看看吧!

npm run serve

進入相應的端口,即可看到Vue的初始界面.

三.VueUI修改配置

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

導入你的項目文件,即可在左側(cè)插件等分類下對項目進行快捷運行&插件安裝&插件卸載等等等等操作.

附-刪除已保存的配置選項

如果你保存了配置,那么下次用的時候會在這里多一項你自己的配置,太多的話可能會有點眼花繚亂?

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

刪除相應的對象即可.

總結(jié)

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

最新評論