使用 vue cli 3 快速建立 Vue 專案

2021-09-14 06:32:04 字數 2733 閱讀 1339

為了便於 vue 專案的管理, vue 團隊官方開發了 vue-cli 工具。

本文將帶您使用 vue-cli 快速建立乙個 vue 專案。

本地安裝 vue-cli

使用 npm 全域性安裝 vue-cli :

npm i -g @vue/[email protected]

建立專案

執行:vue create my-project

會彈出如下介面:

選擇**

此處有兩個選擇:

default (babel, eslint) 預設**,提供 babel 和 eslint 支援。

manually select features 自己去選擇需要的功能,提供更多的特性選擇。比如如果想要支援 typescript ,就應該選擇這一項。

可以使用上下方向鍵來切換選項。如果只需要 babel 和 eslint 支援,那麼選擇第一項,就完事了,靜靜等待 vue 初始化專案。

如果想要更多的支援,就選擇第二項:切換到第二項,按下 enter 鍵選中,彈出如下介面:

選擇特性支援

vue-cli 內建支援了8個功能特性,可以多選:使用方向鍵在特性選項之間切換,使用空格鍵選中當前特性,使用 a 鍵切換選擇所有,使用 i 鍵翻轉選項。

對於每一項的功能,此處做個簡單描述:

按下 enter 鍵確認選擇,進入下一步:

這裡是讓選擇在開發 vue 元件時,要不要使用 class 風格的寫法。為了更方便地使用 typescript ,此處選擇 y :

使用 class 風格的 vue 元件開發方式

按 enter 鍵,進入下一步:

這個選項的意思是要不要使用 babel 工具自動為轉換後的 typescript **注入 polyfiills 。如果實在搞不清楚具體是什麼意思,可以先不用管,直接選擇 y ,進入下一步:

選擇 css 預處理器

這裡就是說我們在專案裡面需要支援何種動態樣式語言,此處提供了三個選項:

scss/sass

less

stylus

此處選擇 less ,進入下一步:

單測工具

選擇單元測試工具,直接選擇現在比較火的 jest ,進入下一步:

配置檔案位置

這一步就是要選擇配置檔案的位置了。對於 babel 、 postcss 等,都可以有自己的配置檔案: .babelrc 、 .postcssrc 等等,同時也可以把配置資訊放在 package.json 裡面。此處出於對編輯器( visual studio code )的友好支援(編輯器一般缺省會在專案根目錄下尋找配置檔案),選擇把配置檔案放在外面,選擇 in dedicated config files ,進入下一步:

這個就是問要不要把當前的這一系列選項配置儲存起來,方便下一次建立專案時復用。對於 mac ,儲存的配置資訊會放在 ~/.vuerc 裡面。

我這裡就選擇 n 了,然後進入下一步:

這裡是選擇 npm registry ,在中國的話,就直接使用預設的**映象就行了。

選完之後, vue-cli 就根據前面選擇的內容,開始初始化專案了。

啟動專案

初始完之後,進入到專案根目錄:

cd my-project

啟動專案:

npm run serve

稍等一會兒,可以看到自動在瀏覽器中開啟了如下介面:

介面打包上線

在開發完專案之後,就應該打包上線了。 vue-cli 也提供了打包的命令,在專案根目錄下執行:

npm run build

執行完之後,可以看到在專案根目錄下多出了乙個 dist 目錄,該目錄下就是打包好的所有靜態資源,直接部署到靜態資源伺服器就好了。

實際上,在部署的時候要注意,假設靜態伺服器的網域名稱是 ,那麼對應到訪問 《專案根目錄》/dist/index.html 的 url 一定要是 /index.html ,其他的靜態資源以此類推。

單元測試

執行:npm run test

vueCli3以及vueCli4建立vue專案

1.首先解除安裝舊版本 npm npm uninstall vue cli g yarn yarn global remove vue cli2.更新node版本 需要8.9以上 3.安裝vue cli3 npm npm install g vue cli yarn yarn global add ...

使用Vue CLI 3快速建立專案

首先 vue create ant design vue pro執行命令會顯示兩個選項,1預設,2自定義 我麼選擇自定義 選擇好自定義的外掛程式回車就等待下安裝成功然後進入專案資料夾 cd ant design vue pro我們在開發過程中還會需要用到ant design vue 和操作時間的庫,...

vue cli3快速建立專案

先檢查vueb v 和 npm v 下面vuecli安裝成功後,如果vue v報錯的話需要以管理員身份開啟powershell 一 安裝 vue cli 更新到 3.x 之後,vue cli 的包名從 vue cli 改成了 vue cli 如果之前全域性安裝了舊版本的 vue cli 1.x 或 ...