1. 程式人生 > >vue3.x 建立一個專案

vue3.x 建立一個專案

vue create

執行以下命令來建立一個新專案:

vue create hello-world

警告

如果你在 Windows 上通過 minTTY 使用 Git Bash,互動提示符並不工作。你必須通過 winpty vue.cmd create hello-world 啟動這個命令。

你會被提示選取一個 preset。你可以選預設的包含了基本的 Babel + ESLint 設定的 preset,也可以選“手動選擇特性”來選取需要的特性。

這個預設的設定非常適合快速建立一個新專案的原型,而手動設定則提供了更多的選項,它們是面向生產的專案更加需要的。

è¿éåå¾çæè¿°

自定義細節配置
是否使用class風格的元件語法 

è¿éåå¾çæè¿°

是否使用babel做轉義 

è¿éåå¾çæè¿°

選擇CSS預處理型別 

è¿éåå¾çæè¿°

選擇語法檢測規範 

è¿éåå¾çæè¿°

選擇 儲存時檢查 / 提交時檢查 

è¿éåå¾çæè¿°

選擇配置資訊存放位置,單獨存放或者併入package.json 

è¿éåå¾çæè¿°

是否儲存當前預設,下次構建無需再次配置 

è¿éåå¾çæè¿°

如果你決定手動選擇特性,在操作提示的最後你可以選擇將已選項儲存為一個將來可複用的 preset。我們會在下一個章節討論 preset 和外掛。

~/.vuerc

被儲存的 preset 將會存在使用者的 home 目錄下一個名為 .vuerc

 的 JSON 檔案裡。如果你想要修改被儲存的 preset / 選項,可以編輯這個檔案。

在專案建立的過程中,你也會被提示選擇喜歡的包管理器或使用淘寶 npm 映象源以更快地安裝依賴。這些選擇也將會存入 ~/.vuerc

vue create 命令有一些可選項,你可以通過執行以下命令進行探索:

vue create --help
用法:create [options] <app-name>

建立一個由 `vue-cli-service` 提供支援的新專案


選項:

  -p, --preset <presetName>       忽略提示符並使用已儲存的或遠端的預設選項
  -d, --default                   忽略提示符並使用預設預設選項
  -i, --inlinePreset <json>       忽略提示符並使用內聯的 JSON 字串預設選項
  -m, --packageManager <command>  在安裝依賴時使用指定的 npm 客戶端
  -r, --registry <url>            在安裝依賴時使用指定的 npm registry (僅用於 npm 客戶端)
  -g, --git [message]             強制 / 跳過 git 初始化,並可選的指定初始化提交資訊
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠端預設選項
  -x, --proxy                     使用指定的代理建立專案
  -b, --bare                      建立專案時省略預設元件中的新手指導資訊
  -h, --help                      輸出使用幫助資訊

#使用圖形化介面

你也可以通過 vue ui 命令以圖形化介面建立和管理專案:

vue ui

上述命令會開啟一個瀏覽器視窗,並以圖形化介面將你引導至專案建立的流程。

圖形化介面預覽

#拉取 2.x 模板 (舊版本)

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