Vue學習筆記(九) Vue CLI

[TOC]

一、簡介

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，它包括三個獨立的部分：

• CLI：一個全局安裝的 npm 包，提供在終端裏使用的命令
• CLI 服務：一個局部安裝在使用 @vue/cli 建立的項目中的 npm 包
• CLI 插件：CLI 插件能夠爲項目提供可選功能的 npm 包

這裏先附上 Vue CLI 的官方文檔：https://cli.vuejs.org/zh/guide/

二、安裝

在 3.x 版本以後，cli 從原來的 vue-cli 改名爲 @vue/cli

若是你以前安裝過 vue-cli，那麼須要先卸載

> npm uninstall -g vue-cli

而後才能安裝 @vue/cli

> npm install -g @vue/cli

安裝成功以後，可使用以下命令驗證安裝是否成功

> vue -V

三、單文件組件

在正式講解怎麼使用 @vue/cli 搭建項目前，咱們先來了解一下什麼是單文件組件（SFC）

不少時候，咱們可使用 Vue.component() 定義全局組件，而後使用 new Vue() 在頁面指定一個容器元素

除了這種方法以外，咱們還可使用一個拓展名爲 .vue 的文件定義組件，這種方法咱們稱爲單文件組件

每一個 .vue 文件包含三種類型的頂級語言塊，分別是 <template>、<script> 和 <style>，也支持自定義塊

• 模板 <template>

每一個 .vue 文件最多包含一個 <template> 塊，用於寫模板（HTML 及其拓展）

• 腳本 <script>

每一個 .vue 文件最多包含一個 <script> 塊，用於寫邏輯（JavaScript 及其拓展）

任何匹配 .js 文件的 webpack 規則都將會運用到這個 <script> 塊的內容中

• 樣式 <style>

一個 .vue 文件能夠包含多個 <style> 標籤，用於寫樣式（CSS 及其拓展）

任何匹配 .css 文件的 webpack 規則都將會運用到這個 <style> 塊的內容中

一個簡單的例子以下：

<!-- Hello.vue -->

<template>
    <p>{{ greeting }}</p>
</template>

<script>
export default {
    data: function () {
        return {
            greeting: 'Hello'
        }
    }
}
</script>

<style>
p {
    font-size: 10px;
    text-align: center;
}
</style>

四、快速原型開發

咱們可使用 vue serve 和 vue build 命令對單個 .vue 文件進行快速原型開發

不過在此以前，咱們須要額外安裝一個全局拓展

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

（1）vue serve

vue serve 命令用於在開發環境下零配置爲 .js 或 .vue 文件啓動一個服務器

> vue serve --help
Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config

Options:
  -o, --open  Open browser
  -c, --copy  Copy local url to clipboard
  -h, --help  output usage information

該命令的默認入口文件爲 main.js、index.js、App.vue 或 app.vue ，固然也能夠顯式指定

咱們能夠到剛纔建立的 Hello.vue 文件的文件夾下運行以下命令

> vue serve Hello.vue

DONE Compiled successfully in 5267ms

	App running at:
	- Local: http://localhost:8080
	- Network: http://172.20.10.12:8080
	
	Note that the development build is not optimized.
	To create a production build, run `npm run build`.

這時，咱們在瀏覽器中訪問 http://localhost:8080 便可看到咱們的應用

（2）vue build

vue build 命令用於在生產環境模式下零配置構建一個 .js 或 .vue 文件

> vue build --help
Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config

Options:
  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component mode (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information

五、建立項目

1. 咱們可使用 vue create project-name 命令建立一個項目

> vue create mini-project

2. 首先，選擇一個預設的模板，這裏有兩個選項（單選）：

• default (babel, eslint)：默認設置，適合建立一個簡單的項目
• Manually select features：手動配置，適合在生產環境中使用（絕大多數狀況下須要選擇這個）

咱們選擇 Manually select features

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features

3. 而後，選擇須要使用的特性，這裏有九個選項（多選）：

• Babel：JavaScript 編譯器（默認已選擇）
• TypeScript：JavaScript 超集
• Progressive Web App (PWA) Support：漸進式 Web 應用
• Router：Vue 路由
• Vuex：Vue 狀態管理
• CSS Pre-processors：CSS 預處理器
• Linter / Formatter：代碼風格檢查和代碼格式化（默認已選擇）
• Unit Testing：單元測試
• E2E Testing：端到端測試

咱們選擇 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter

? 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

4. 接着，爲 Router 選擇路由模式，這裏有兩個選項（Y/n）：

• Y：使用 history mode，URL 中不帶有 # 符號，可是須要後臺配置支持
• n：使用 hash mode，URL 中會帶有 # 符號，但 # 符號並不包含在 HTTP 請求中

咱們選擇 n

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

5. 接着，選擇 CSS Pre-processors，這裏有四個選項（單選）

• Sass/SCSS (with dart-sass)
• Sass/SCSS (with node-sass)
• Less
• Stylus

咱們選擇 Less

? Pick a CSS Pre-processors (PostCSS, Autoprefixer ans CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

6. 接着，選擇 Linter / Formatter，這裏有四個選項（單選）：

• ESLint with error prevention only
• ESLint + Airbnb config
• ESLint + Standard config
• ESLint + Prettier

咱們選擇 ESLint + Standard config

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

7. 接着，選擇在什麼時間進行檢測，這裏有兩個選項（多選）：

• Lint on save：保存時檢測
• Lint and fix on commit：提交時檢測

咱們選擇 Lint on save

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> (*) Lint on save
  ( ) Lint and fix on commit

8. 接着，選擇在什麼位置保存配置文件，這裏有兩個選項（單選）：

• In dedicated config files：獨立保存爲 config 文件
• In package.json：所有保存在 package.json 文件

咱們選擇 In dedicated config files

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow  keys)
> In dedicated config files
  In package.json

9. 最後，選擇是否保存本次配置以便於下次使用，這裏有兩個選項（y/N）：

• y：保存配置
• N：不保存配置

咱們選擇 N

? Save this as a preset for future projects? (y/N)

以後，就能夠等待 @vue/cli 爲咱們建立項目啦~

六、項目結構

在建立成功以後，咱們能夠利用命令 cd mini-project 進入目錄，利用命令 npm run serve 運行項目

這些就不細說啦，具體用法能夠參考一下 README.md 文件（在根目錄下）

下面咱們主要看看利用 @vue/cli 建立的項目的目錄結構是怎麼樣的

+ mini-project
	+ node_modules（存放第三方模塊）
	+ public（存放靜態文件）
		- favicon.ico（圖標）
		- index.html（頁面模板）
	+ src（咱們本身寫的文件通常放在這個文件夾下）
		+ assets（存放資源文件）
		+ components（存放公共組件）
		+ views（存放視圖組件）
		- App.vue（頁面入口文件）
		- main.js（程序入口文件）
		- router.js（路由管理：Router）
		- store.js（狀態管理：Vuex）
	- package.json（項目配置文件）
	- package-lock.json（項目配置文件）
	- babel.config.js（babel 配置文件）
	- postcss.config（postcss 配置文件）
	- README.md（項目說明文檔）
	- ...（其它配置文件）

注意

在 3.x 版本以後，CLI 不會自動建立配置文件，這是由於項目在初始化的時候已經配置好絕大部分配置

若是還須要手動配置，那麼咱們就要到根目錄下建立一個名爲 vue.config.js 的文件

vue.config.js 是一個可選的配置文件，若是項目的根目錄中存在這個文件，則會被 @vue/cli-service 自動加載

可是因爲篇幅問題，這裏不會做太多的介紹，詳細內容請參考官方文檔：https://cli.vuejs.org/zh/config/

【 閱讀更多 Vue 系列文章，請看 Vue學習筆記 】