Vue CLI 3.x 入門
簡介
儘管沒有任何大公司的支持，但 Vue.js 在 GitHub 的星數中超過了 React.js 之後正飆升到意想不到的高度，而且他們新的命令行界面 (CLI) 工具的發布很可能會讓他們更高！
搭建 Vue 的腳手架 從頭開始項目可能是一件令人生畏的事情，尤其是如果您對 Vue.js 不是特別滿意 .
這就是為什麼 Vue CLI 是您的武器庫中的必備工具，以確保您的項目從一開始就正確設置，讓您從少數模板中進行選擇，讓 CLI 完成所有艱苦的樣板代碼給你。
令人興奮的是，去年夏天為我們帶來了 Vue CLI 3.0 ，引入了一系列很酷的新功能，例如 Vue 圖形用戶界面 ，使創建項目和管理依賴項比以往任何時候都更容易！
CLI 服務
CLI 服務是建立在 Webpack 之上的開發依賴項，它是 JavaScript 應用程序的靜態模塊捆綁器 - 與 react-scripts 非常相似 對於 React.js .
它負責加載插件，確保優化 webpack 配置，並使我們能夠擁有管理應用程序的基本命令（服務、構建、lint 等）。
先決條件
要使 Vue CLI 正常工作，您需要在計算機上安裝 Node.js（8.9+ 版），以確保您能夠使用 NPM（節點包管理器）或 Yarn，具體取決於您的首選管理器。
安裝
下載 Node 後，安裝 Vue CLI 就像在命令行中運行一個簡單的命令一樣簡單：
$ npm install -g @vue/cli
或者，對於紗線：
$ yarn global add @vue/cli
你的第一個 Vue.js 項目
全局安裝 Vue CLI 後，您將能夠訪問 vue 從您計算機中的任何位置發出命令，您將需要它來創建樣板項目。
有多種方法可以創建一個只運行命令的項目：
$ vue create <project name>
這是 bash 做事的方式。輸入命令時，系統會多次提示您輸入一些配置信息以創建項目。
首先它會詢問你是否要使用預設：
Vue CLI v3.2.1
? Please pick a preset:
> default (babel, eslint)
Manually select features
在本教程中，我們將選擇 手動選擇功能 滾動瀏覽將提示您的所有不同頁面：
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
您可以在此處選擇您希望項目具有哪些功能：
- 通天塔 用於將您的代碼轉換為每個瀏覽器都能理解的 ES5 Javascript。
- 打字稿 如果您想在您的 Javascript 代碼中使用強類型並訪問更現代的功能。
- 漸進式網絡應用 (PWA) 支持 如果你想使用 PWA 驅動功能，例如服務人員和離線支持。
- 路由器 這將添加 Vue-router 包，它是您的單頁應用程序（SPA）的一個很棒的路由工具。如果您選擇此選項，系統將提示您選擇是否要擁有歷史記錄 為路由器啟用模式，刪除
#從所有端點簽名。 - Vuex 為您的狀態集中存儲並管理應用程序的全局數據，以及管理組件中的數據如何更改以及從 Vue Devtools 中的何處更改。 （參見 Vue 開發工具）。
- CSS 預處理器 選擇您選擇的 CSS 預處理器，如果您選擇此選項，系統會提示您在 Sass/Less 之間進行選擇 , 少 , 或 手寫筆 .
- Linter / 格式化程序 這將為您的項目添加 linting，以確保您的代碼符合代碼標準。如果你選擇了這個選項並且你選擇了 Typescript 系統會提示您選擇一個 linter / formatter，如果您沒有選擇 typescript，則不會提示您輸入 TSLint .
? Pick a linter / formatter config: (Use arrow keys)
> TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
此外，您可以選擇是否要添加 gitHooks 到你的配置。這些將在保存或提交到您的 git 存儲庫時運行您的 linting/格式化腳本。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
- 單元測試 將讓您選擇您選擇的單元測試框架。
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
- E2E 測試 就像單元測試一樣，會提示您選擇 E2E 測試環境。
? Pick a E2E testing solution: (Use arrow keys)
Cypress (Chrome only)
Nightwatch (Selenium-based)
在所有這些選項之後，您需要決定是要將所有配置放在單獨的文件中還是簡單地添加為 package.json 中的對象 文件。
此外，系統會詢問您是否要將此配置保存為預設以及是否要選擇 npm 或 紗線 作為你想要的包管理器。
CLI 插件
可以使用命令添加一些內置插件，例如 Vuetify，Vue.js 的 Material Design Framework：
$ vue add <plugin name>
一個 Vue CLI 插件，因為它們的名稱以 @vue/cli-plugin- 開頭 或 vue-cli-plugin- - 取決於它們是內置插件還是第三方插件。
當你運行 vue-cli-service ，它會自動加載 package.json 中列出的所有 CLI 插件 文件。
恭喜，你剛剛創建了你的第一個 Vue CLI 項目！
Vue 圖形用戶界面
如果您不想經歷命令行的麻煩，或者您只是不喜歡帶有白線的深色背景，您可以隨時使用 Vue GUI 可通過此命令訪問：
$ vue ui
運行此命令時，服務器將在 http://localhost:8000 上啟動。
在這裡，您可以使用與使用命令行相同的方式創建項目，但用戶界面很好。
另外，您可以管理您的依賴項，而無需從 package.json 管理它們 ，每個包都附帶了所需的版本：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
可以設置進一步的配置和小部件，並且可以從 Vue UI 自動運行一些任務 - 例如對可能存在安全問題的依賴項運行漏洞檢查，設置一個可以殺死以關閉應用程序的端口，並啟用新聞提要以獲取來自 Vue 團隊的最新更新！
$ vue-init < template > < project name >
每當您想使用 Vue CLI 2.x 舊版模板時，都需要安裝 vue-init 服務：
$ npm install -g @vue/cli-init
然後：
$ vue init webpack my-project
然後，您將能夠像設置常規項目一樣設置您的項目。
文件夾結構
每個創建的項目都帶有幾個文件夾，這些文件夾設置為便於使用：
- /node_modules 這是安裝所有打包依賴項的地方，默認情況下，每當您創建項目時都會安裝它們。
- /公開 這裡是
index.html生活以及所有公共資產、清單和服務人員應該被創建的地方。 - /src 將添加您工作的主要麵包和肉類的位置，其他文件夾中的大多數其他文件都是預先配置的，但這是您添加所有自定義代碼和組件的位置。
- /src/assets 您在其中添加圖像、圖標、字體，稍後將添加到
/dist文件夾。 - /src/components 這是您添加組件的地方，特別是不代表整個頁面的單個組件。
- /src/views 在這裡你有你的佈局組件。
- /測試 您的單元/e2e 測試所在的位置。
另外，一個 /plugins 只要您使用了 vue add 就會添加文件夾 命令，你所有的插件都將安裝在這裡。
此外，main.js , router.js , store.js , 和 App.vue 將根據您在創建過程中選擇的配置以及一些樣板示例自動生成。
package.json 文件
這是最重要的文件之一，它包含您的大部分項目配置，例如 name , 版本 、可以通過 NPM 使用的自動化腳本和依賴項，這些是可以在項目中使用的第三方包：
{
"name": "vue-cli-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.0",
"@vue/cli-plugin-unit-jest": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"@vue/eslint-config-prettier": "^4.0.0",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/prettier"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
scripts 標籤揭示了管理應用程序的主要句柄。
運行以下命令將通過熱重載啟動您的開發服務器：
$ npm run serve
這意味著它會注意到文件更改，因此您不必在每次更新代碼或資源時重新啟動服務器。
現在，創建一個 /dist 將打包所有應用程序的文件夾，沒有 webpack 或任何需要的額外配置，我們將使用：
$ npm run build
它將提供 index.html ，自動注入所有 JavaScript 文件，以及 js , css , 和 img 這些命名資產的文件夾。
此外，如果您希望查看所有文件並使用您的 eslint 或更漂亮的配置處理它們，您可以使用：
$ npm run lint
因此，單元測試，位於 /tests 文件夾可以使用以下命令運行：
$ npm run test:unit
另外，package.json 可以保存用於 linting、格式化、預提交鉤子等的特定配置！
部署
/dist 可以處理文件夾以將您捆綁的應用程序上傳到 Github Pages、Heroku、Amazon S3、BitBucket Pages 和許多其他服務。
根據您選擇的主機服務，您需要設置 /dist 文件夾以滿足您的服務器需求，這可以通過 vue.config.js 輕鬆完成 文件（或通過 Vue UI 配置選項卡），必須在項目的根文件夾中創建：
module.exports = {}
您可以在此處添加服務器部署所需的配置，例如 baseUrl .
如果您的服務器正在等待您的應用程序託管在特定端點中，例如：http://www.testsite.com/test - 你需要設置你的 baseUrl 適應那個端點：
module.exports = {
baseUrl: '/test'
}
另一方面，如果您的服務器正在等待您的靜態文件位於特定文件夾中，您也可以指定它，或者如果您想要 /dist 文件夾名稱不同，您可以選擇 outputDir ：
module.exports = {
baseUrl: '/test',
assetsDir: 'static',
outputDir: 'app'
}
這些只是您可以添加到項目中的許多配置的示例。
您可以在 package.json 中添加所有這些 vue 內 屬性，但請注意，您只能使用與 JSON 兼容的值。
結論
Vue.js 在其他主要的 Javascript 框架中變得越來越強大。它非常平易近人，直截了當，而且非常有彈性。
儘管它易於使用，但新手在正確設置他們的項目時可能會遇到相當困難的情況，尤其是如果您對命令行不是很熱衷的話。
幸運的是，Vue 的創建者 Evan You 總是超前思考，並且一直在為他的開發者夥伴們加緊努力，讓配置和設置新應用變得像 1、2、3 一樣簡單！
有關更多信息，您可以訪問 Vue CLI 的官方頁面。
