Vue.js CLI：學習如何使用它

Vue是一個非常令人印象深刻的項目，除了框架的核心外，它還維護了很多實用工具，使Vue程序員的生活更輕鬆。其中之一就是Vue CLI。

• 安裝
• Vue CLI 提供了什麼？
• 如何使用CLI創建新的Vue項目
• 如何啟動新創建的Vue CLI應用程序
• Git存儲庫
• 從命令行使用預設值
• 預設值存儲位置
• 插件
• 遠程存儲預設值
• Vue CLI的另一個用途：快速原型
• Webpack

---

Vue是一個非常令人印象深刻的項目，除了框架的核心外，它還維護了很多實用工具，使Vue程序員的生活更輕鬆。

其中之一就是Vue CLI。

CLI的頭寸是命令行接口。

注意：現在正在進行一個巨大的CLI重構工作，從2.0版本升級到3.0版本。儘管還不穩定，但我將描述版本3.0，因為它比版本2.0有很大的改進，並且完全不同。

安裝

Vue CLI是一個命令行實用程序，您可以使用npm全局安裝它：

npm install -g @vue/cli

或使用Yarn：

yarn global add @vue/cli

安裝完成後，您可以調用vue命令。

Vue CLI提供了什麼？

CLI對於快速開發Vue.js非常重要。

它的主要目標是確保您所需的所有工具協同工作，以執行您需要的任務，並抽象了使用每個工具所需的全部配置細節。

它可以執行初始項目設置和脚手架。

它是一個靈活的工具：一旦使用CLI創建項目，您可以在不必“彙總”應用程序（就像您使用create-react-app那樣）的情況下進行配置調整。

當您彙總自create-react-app以後，您可以更新和調整自己想要的設置，但無法依賴create-react-app提供的很棒的功能

您可以配置任何東西並仍然能夠輕鬆升級。

在創建和配置應用程序之後，它充當基於webpack的運行時依賴工具。

與CLI的第一次接觸是在創建新的Vue項目時。

如何使用CLI創建新的Vue項目

您要使用CLI做的第一件事就是創建一個Vue應用程序：

vue create example

最酷的事情是它是一個交互式過程。您需要選擇一個預設值。默認情況下，有一個預設值提供了Babel和ESLint集成：

我要按下向下箭頭⬇️，手動選擇我想要的功能：

按空格啟用您需要的功能之一，然後按enter繼續。由於我選擇了一個lint器/格式化器， Vue CLI提示我進行配置。我選擇了ESLint + Prettier，因為那是我喜歡的設置：

接下來是選擇如何應用linting。我選擇了在保存時進行linting。

接下來是測試。我選擇了testing， Vue CLI給我提供了兩個最流行的解決方案：Mocha + Chai vs Jest。

Vue CLI問我要將所有配置放在哪裡：是否放在package.json文件中，還是放在專門的配置文件中，每個工具一個。我選擇了後者。

接下來，Vue CLI問我是否要保存這些預設值，並允許我在下次使用Vue CLI創建新應用程序時選擇它們。這是一個非常方便的功能，因為擁有一個快速設置，符合我所有喜好的應用程式，可以減輕複雜性。

然後Vue CLI問我是否更喜歡使用Yarn還是npm：

這是它問我的最後一個問題，然後它繼續下載依賴項並創建Vue應用程序：

如何啟動新創建的Vue CLI應用程序

Vue CLI已經為我們創建了應用程序，我們可以進入example文件夾並運行yarn serve以開始我們的第一個開發模式下的應用程序：

起始示例應用程序源代碼包含一些文件，包括package.json：

這是在其中定義了所有CLI命令的地方，包括我們剛剛使用的yarn serve。其他命令包括

• yarn build，開始生產構建
• yarn lint，運行lint器
• yarn test:unit，運行單元測試

我將在另一篇教程中描述由Vue CLI生成的示例應用程序。

Git存儲庫

注意VS Code左下角出現的master一詞？這是因為Vue CLI自動創建了存儲庫並進行了第一次提交，因此我們可以直接跳到更改內容並知道我們已經更改了什麼：

這很酷。多少次您深入並更改內容，然後在要提交結果時才意識到您沒有提交初始狀態？

從命令行使用預設值

您可以跳過交互面板，指示Vue CLI使用特定的預設值：

vue create -p favourite example-2

預設值存儲位置

預設值存儲在主目錄下的.vuejs文件中。這是我的示例後創建的“favorite”預設值：

{
 "useTaobaoRegistry": false,
 "packageManager": "yarn",
 "presets": {
 "favourite": {
 "useConfigFiles": true,
 "plugins": {
 "@vue/cli-plugin-babel": {},
 "@vue/cli-plugin-eslint": {
 "config": "prettier",
 "lintOn": [
 "save"
 ]
 },
 "@vue/cli-plugin-unit-jest": {}
 },
 "router": true,
 "vuex": true
 }
 }
}

插件

從配置中可以看出，預設值基本上是一個插件集合，還帶有一些可選的配置。

創建項目後，您可以使用vue add添加更多插件：

vue add @vue/cli-plugin-babel

所有這些插件都是使用最新版本。您可以通過傳遞版本屬性強制Vue CLI使用特定的版本：

"@vue/cli-plugin-eslint": {
 "version": "^3.0.0"
}

如果新版本有破壞性變化或錯誤，你需要等待一小段時間才能使用它，這很有用。

遠程存儲預設值

可以通過在包含單個預設值配置的preset.json文件的存儲庫中創建存儲庫（或其他服務）來存儲預設值。從上面提取出來的示例，在https://github.com/flaviocopes/vue-cli-preset/blob/master/preset.json中我創建了一個示例預設值，其中包含以下配置：

{
 "useConfigFiles": true,
 "plugins": {
 "@vue/cli-plugin-babel": {},
 "@vue/cli-plugin-eslint": {
 "config": "prettier",
 "lintOn": [
 "save"
 ]
 },
 "@vue/cli-plugin-unit-jest": {}
 },
 "router": true,
 "vuex": true
}

它可以用於使用以下命令創建新的應用程序：

vue create --preset flaviocopes/vue-cli-preset example3

Vue CLI的另一個用途：快速原型

到目前為止，我已經解釋了如何使用Vue CLI從頭開始創建一個包含所有必要設定的新項目。但是，對於真正快速的原型，您可以創建一個非常簡單的Vue應用程序，甚至可以僅僅是一個包含在單個.vue文件中的應用程序，並且不需要下載node_modules文件夾中的所有依賴項。

怎麼做？首先，全局安裝cli-service-global全局包：

npm install -g @vue/cli-service-global

//或

yarn global add @vue/cli-service-global

創建一個app.vue文件：

<template>
 <div>
 <h2>Hello world!</h2>
 <marquee>Heyyy</marquee>
 </div>
</template>

然後運行：

vue serve app.vue

您可以根據需要提供更有組織的項目，由JavaScript和HTML文件組成。Vue CLI默認使用main.js或index.js作為其入口點，並且可以設置package.json和任何工具配置。vue serve將會使用它。

由於這使用全局依賴項，對於除演示或快速測試以外的任何內容，這都不是最佳方法。

運行vue build將準備部署在dist/中的項目，並生成所有相應的代碼，包括供應商依賴項。

Webpack

Vue CLI內部使用webpack，但配置是抽象的，我們甚至不在我們的文件夾中看到它的配置文件。您仍然可以通過調用vue inspect來訪問它：