JavaScript >> Javascript 文檔 >  >> JavaScript

Vue CLI 入門

簡介

VueJS 是一個漸進式 JavaScript 框架,用於創建用戶界面和單頁應用程序 (SPA),而快速入門的最佳方式是使用 Vue CLI(命令行界面)創建一個 VueJS 項目。

先決條件

在我們的終端上使用 Vue CLI 需要 Node.js 版本 8.9 或更高版本(建議使用 v10+)。有了nvm,我們可以在同一台機器上管理多個版本的Node!

什麼是 Vue CLI?

Vue CLI 是一個安裝在特定設備上的 NPM 包,允許開發者/用戶訪問 vue 通過他們的終端命令。這個 CLI 可以全局安裝或安裝在我們 PC 上的特定目錄中,使我們能夠快速搭建新項目並使用單個命令構建應用程序。

它為 Vue 開發人員提供了全新的體驗,並允許他們開始開發 Vue 應用程序,而無需處理 webpack 等工具的複雜配置 .同時,可以使用插件對其進行配置和擴展,以實現更高級的用例。它由幾個部分組成,包括:

  • CLI 服務,提供多個腳本用於處理 Vue 項目,例如 serve , buildinspect 腳本。
  • CLI 插件,它們是為我們的 Vue 項目提供附加功能的 NPM 包,其中一些插件包括 typescript、PWA、VueX 等。

如果我們不想通過終端處理所有事情,Vue CLI 允許開發人員通過一個易於使用的界面執行任務,我們很快就會對此進行探索。

安裝 Vue CLI

在安裝之前檢查一個包是否已經安裝在我們的 PC 上總是一個好主意,我們可以通過查看它的版本來為 Vue CLI 執行此操作:

$ vue --version
$ vue -V

如果我們看到一個版本,則意味著我們的計算機上已經安裝了 Vue CLI;否則,錯誤表明它尚未安裝。我們可以通過運行以下命令來安裝 Vue CLI:

$ npm install -g @vue/cli
// Or
$ yarn global add @vue/cli

通常,CLI 是全局安裝的,而不是本地安裝的,因此可以在整個系統中訪問。

注意: 即使 CLI 已經安裝,也值得更新它,以防它尚未更新到最新版本。

$ npm update -g @vue/cli
// Or
$ yarn global upgrade --latest @vue/cli

在我們的 PC 上成功安裝 Vue CLI 後,我們現在應該能夠在終端中訪問 Vue 可執行文件以顯示可能的命令及其功能的列表。這可以通過運行以下命令來完成:

$ vue

其中顯示起始頁:

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve                                      alias of "npm run serve" in the current project
  build                                      alias of "npm run build" in the current project
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires
                                             @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  help [command]                             display help for command

  Run vue <command> --help for detailed usage of given command.

使用 Vue CLI 創建 Vue 項目

成功安裝 Vue CLI 後 - 讓我們創建一個 Vue 項目!使用該工具,我們可以輕鬆地構建項目並創建一個框架,包括導入所有必要的依賴項以及您可能已經知道需要的其他依賴項。 create 命令,後跟項目名稱,用於創建骨架項目:

$ vue create my-cli-project

注意: my-cli-project 是項目的名稱。厭倦空間!任何空格都會破壞名稱。

運行命令後,系統會提示您三個預設:

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

在前兩個中 - 你可以選擇 Vue 版本,以及 Babel 和 ESLint。 只有這些會被打包 .如果您想包含其他有用的依賴項,例如 Vue Router、Vuex 等,您需要選擇 “手動選擇功能” 預設。

在這裡,您可以遍歷可用依賴項列表,按 Space 選擇您要啟用的每個選項:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

它將繼續幾個配置問題,從 Vue 的版本開始:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

接下來是您選擇的可以配置的每個模塊的問題:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

最後 - CLI 會詢問您是否要將這些選項保存為 預設 !如果這樣做,下次創建新應用程序時,除了兩個默認設置之外,您還可以從這個預設中進行選擇:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) y

為預設提供名稱後,它會在調用 create 後顯示 命令:

$ vue create my-app

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> my-preset ([Vue 3] babel, pwa, router, vuex, eslint)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

也可以在創建的時候直接調用:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

$ vue create --preset my-preset my-app

注意: 如果我們在搭建項目時忘記安裝一些內置插件,我們可以使用 vue add my-plugin 輕鬆添加它們 稍後隨時命令。

創建過程完成後,我們可以直接從 CLI 使用以下命令在開發服務器中運行應用程序:

$ cd my-new-app
$ npm run serve

通過文件系統或者ls之類的命令很容易驗證項目的目錄 (dir Windows 用戶):

$ ls
README.md        jsconfig.json  package-lock.json  public/  vue.config.js
babel.config.js  node_modules/  package.json       src/

然後我們的瀏覽器會打開localhost:8080 我們將在哪裡看到應用正在運行:

現在,開發開始了!您可以使用該工具創建的目錄和文件繼續您的標准開發管道。當您完成開發或準備將更改推送到生產階段時,使用以下命令創建生產包:

$ npm run build

這會將所有內容輸出到 dist 我們項目中的文件夾,可以部署在各種託管平台上。讓我們看看另一種創建 Vue 應用程序的方法,但是使用圖形用戶界面 (GUI)!

Vue 用戶界面

使用 Vue CLI,您還可以啟動另一個項目 - 用於創建應用程序的 GUI:

$ vue ui

這將在 http://localhost:8000/ 上啟動 GUI :

我們可以通過轉到“創建”來開始一個新項目 選項卡,這將允許您選擇項目的路徑:

為項目選擇好位置後,在新頁面中,您可以輸入名稱並選擇您喜歡的包管理器:

創建骨架項目的過程大同小異,同樣的代碼在後台運行。這只是個人喜好問題 - 無論您更喜歡 CLI 還是 UI。同樣,我們會被要求選擇首選預設,但如果我們點擊“手動”,我們將被重定向到可以手動選擇首選插件的頁面,如下所示:

同樣,在為不同的依賴項設置配置後,您可以將選擇的選項保存為預設。

創建過程完成後,我們將被帶到項目儀表板,在這裡我們可以查看所有插件、添加插件、管理配置和分配任務:

這些任務包括,在我們的瀏覽器上提供我們的應用程序,為生產環境構建它等等。

結論

在這個簡短的指南中,您了解了 Vue CLI 的工作原理,以及如何使用它創建新的骨架 Vue 項目。我們已經了解了手動設置和保存預設,以及服務和構建項目。最後,我們將 UI 視為 CLI 的替代方案。


Tutorial JavaScript 教程
  1. 如何存儲 HTML 片段並稍後將其插入到文檔中?

  2. 在 Svelte 中創建帶有推送通知的 GitHub 跟踪器

  3. 7.2.0 發布:私有實例方法

  4. 為什麼要在 Node REST API 中將控制器與服務分開?

  5. Glen Maddern 介紹樣式化組件

  6. 使用 Vue.js 的流體 SVG

  7. 如何中止 fetch API 調用?

  1. JavaScript 數組 find() 方法

  2. 關於javascript中的閉包

  3. 是否有使用 javascript 生成 html 的最佳實踐

  4. JavaScript 簡介

  5. 5 個前端播客 - 這是我為了了解最新情況而收聽的內容

  6. WordPress 5.5 的新功能——深入了解(史詩)版本

  7. 使用 Lunr 將搜索添加到您的 11 個靜態站點

  1. 如何以及為什麼在 VueJS v-for 循環中使用 `:key` 屬性

  2. 帶有 JavaScript 驗證的 HTML 學生註冊表|示例代碼

  3. SWE 101:以最簡單的形式解釋編程術語

  4. 最受歡迎的技術