vue cli 3 0 安裝和建立專案流程

2022-09-01 00:36:27 字數 2157 閱讀 9338

使用前我們先了解下3.0較2.0有哪些區別

注意：vue cli >= 3 和舊版使用了相同的vue命令，所以 vue cli 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的vue init功能，你可以全域性安裝乙個橋接工具：

npm install -g @vue/cli-init


//`vue init` 的執行效果將會跟 `[email protected]` 相同


vue init webpack my-project
下面進入正題，進行安裝和建立專案首先  安裝npm3.0，在安裝之前如果曾經安裝過vue-cli2的，由於vue cli 公升級到3後，package的名字從 vue-cli 改為了 @vue/cli，裝了舊版本的，建議把舊版本的解除安裝了，再安裝新版本。

//


解除安裝指令如下：


npm uninstall vue-cli -g


oryarn 


global remove vue-cli



npm install -g @vue/cli
下一步  建立專案檔案

vue create projectname    //


專案名
下一步  選擇快捷式安裝配置

前面的是你之前安裝的專案配置，第二個是預設配置，最後乙個是自行配置，建議選最後乙個
下一步  自行選擇安裝配置

這個自行選擇配置，按上下鍵切換目標選項，按空格鍵勾選和取消，按a全選，按i反選，選好後回車確定


1、babel，轉譯成瀏覽器可識別的語言，可以讓你的專案支援更新的語法，如es6\es7等


2、typescript，新增的選項卡34


、路由5


、vuex管理模式


6、css預處理語言


7、**規範


8、元件單元測試


9、端對端測試，模擬使用者真實場景
下一步  選擇css預處理語言

下一步  選擇**規範配置

、只進行報錯提醒；

2、不嚴謹模式；

3、正常模式；

4、嚴格模式；

下一步  是否儲存當前配置資訊

選擇第乙個，下次建立專案就會有本次的配置出現供你選擇
下一步  選擇babel,postcss,eslint配置檔案存放位置

第乙個方獨立資料夾裡，第二個放package.json裡，建議選第乙個
下一步  填寫專案描述

等進度條完成，專案就建立好了

最後我們開始進入專案根目錄，執行專案試試

cd  d:\test\test   //


進入你的專案根目錄，或在你專案根目錄shift+右鍵，點選在此處開啟命令視窗


npm run serve  //


執行專案
參考文件：

vue cli 3 的官方說明

本人在建立cli3專案之後，選擇的是正常的語法檢測，但是老是報語法錯誤，便關掉了語法檢測，方法為：刪除下圖注釋的那行**

Vue cli3 0專案建立

之前寫過一篇文章vue cli專案建立,主要是針對vue cli3.0版本之前的，由於現在vue cli版本更新到了3.0，而且建立專案的一些情況也發生了變化，所以本篇將在基於vue cli3.0以上版本建立專案，大家可以參考一下vue cli2.0版本 這裡的vue cli3.0版本之前統稱為2....

vue cli 3 0環境安裝

2 cmd中使用命令安裝 nvm install 12.2.0 nvm list nvm use 12.2.0 3 在此時有可能會出現node安裝完畢然而npm安裝失敗的情況，此時修改nvm安裝目錄下的settings.txt檔案，在末尾新增兩行 node mirror npm mirror 4 安...

vue cli 3 0 學習筆記

專案搭建及結構 安裝npm install g vue cli 新增專案 vue create my project 啟動 npm run server 打包 npm run build vue cli3.0 自定義腳手架模板 vue cli3.0 新出的新增外掛程式方法 npm install a...