一文快速上手-Vue CLI腳手架

风雨后见彩虹發表於2024-09-12
Vue

安裝Vue CLI

(1) 全域性安裝Vue CLI

方式一（推薦方式）：在終端安裝指定版本

npm i @vue/cli@5.0.8 -g

注：目前5.0.8應該是最新的版本了。

方式二：在終端透過命令安裝最新版本

npm i @vue/cli -g

(2) 升級Vue CLI到最新版本（可選）

npm update @vue/cli -g

(3) 使用vue命令建立專案

vue create 專案的名稱

(4) 安裝完 Vue CLI之後，可以在終端檢視其版本號

vue --version

結果：

@vue/cli 5.0.8

Vue CLI新建專案

在VS Code工具中提前安裝Volar外掛，為vue3版本的.vue檔案提供語法高亮等支援。

第一步：使用Vue CLI的vue命令新建一個名為01_vuecli_demo的Vue3版本專案。

輸入命令：

vue create 01_vuecli_demo

出現如下Vue CLI腳手架預設提供的三個預設。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  • (1) Default ([Vue 3] babel, eslint)：新建vue3預設專案，專案整合babel,eslint外掛
  • (2) Default ([Vue 2] babel, eslint)：新建vue2預設專案，專案整合babel,eslint外掛
  • (3) Manually select features：新建專案，手動選擇專案所需的功能，如是否需要babel和eslint外掛

第二步:手動選擇所需的功能。

根據需要選擇相應的功能。

提示：“選中”和“取消選中”是按空格鍵，“上下移動”是按上下鍵，“確認”是按Enter鍵。

>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

說明：

  • babel：是否使用Babel作為JavaScript編譯器，結合外掛將ES6/7/8/9/10等語法轉換為ES5語法。
  • TypeScript：是否使用TypeScript。
  • Progressive Web App (PWA) Support：是否支援PWA。PWA是漸進式web應用-一種無需要安裝的網頁應用，具有與原生應用相同的使用者體驗優勢。
  • Router：是否預設整合路由。
  • Vuex：是否預設整合Vuex狀態管理。Vuex用於在多個元件間共享資料。
  • CSS Pre-processors：是否選用CSS前處理器，即常用的Less、Scss、Stylus前處理器。
  • Linter / Formatter：是否選擇Eslint對程式碼進行格式化限制。
  • Unit Testing：是否新增單元測試。
  • E2E Testing：是否新增E2E測試。

第三步：選擇Vue.js版本。

根據需要選擇vue版本，這兒示例選擇vue3.x版本。

 3.x
 2.x

第四步：選擇配置存放的位置。

 In dedicated config files
 In package.json

這兒選擇“In dedicated config files”,意思就是將babel、eslint等配置資訊統一放到各自獨立的配置檔案中，而不是放到package.json檔案中。

第五步：是否儲存為自定義預設。

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

輸入y，表示儲存自定義預設，也可以輸入n,即不儲存自定義預設。

如果儲存了預設，在下次新建專案時，在第一步選擇預設時，就可以看到我們儲存過的預設，比如我們把前面的預設命名為“vue3-demo”，最後按"Enter"鍵即可。

第六步：新建成功的提示。

 $ cd 01_vuecli_demo
 $ npm run serve

vue.js 3 專案目錄結構

01_vuecli_demo/  專案名稱
|-- node_modules         #存放第三方依賴包（例如，執行npm i安裝的依賴包）
|-- public/              #靜態資源目錄  
|   |-- favicon.ico      #網站圖示  
|   |-- index.html       #專案的入口檔案  
|-- src/                 #專案的原始碼目錄  
|   |-- assets/          #靜態資源目錄，如圖片、字型等  
|   |-- components/      #可複用的 Vue 元件  
|   |-- router/          #Vue Router 的路由配置  
|   |   |-- index.js     #路由的主檔案  
|   |-- store/           #Vuex 的狀態管理  
|   |   |-- index.js     #狀態管理的主檔案  
|   |-- views/           #頁面目錄  
|   |   |-- About.vue    #關於頁面  
|   |   |-- Home.vue     #首頁  
|   |-- App.vue          #根元件  
|   |-- main.js          #專案的入口檔案  
|-- .browserslistrc      #Browserslist 配置，用於 Autoprefixer 和其他工具確定目標瀏覽器和 Node.js 版本範圍  
|-- .eslintignore        #ESLint 忽略的檔案  
|-- .eslintrc.js         #ESLint 配置  
|-- .gitignore           #Git 忽略的檔案  
|-- babel.config.js      #Babel 外掛的配置檔案 
|-- package-lock.json    #npm 依賴的鎖定檔案  
|-- package.json         #專案的後設資料檔案和 npm 指令碼  
|-- README.md            #專案的說明檔案 
|-- vue.config.js        #Vue CLI 配置檔案，比如配置alias、devServer和configure Webpack等

專案的執行和打包

"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

vue.config.js檔案解析

  • 1.outputDir：用於指定打包輸出的檔名，預設是dist目錄。如果想修改目錄名稱，可以使用outputDir配置。
module.exports = {
  outputDir: 'build'
}

對於使用 Vue CLI 5.x建立的專案，vue.config.js同樣支援使用defineConfig宏函式，以獲得更好的程式碼智慧提示，示例程式碼如下：

// defineConfig 宏函式只支援 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果選擇true,那麼專案引用node_modules中的包也會用Babel來編譯,否則不會編譯
  outputDir: 'build'
})
  • 2.assetsDir：用於指定靜態資源存放目錄。該屬性是相對於outputDir路徑。
module.exports = {
  outputDir: 'build',
  assetsDir: 'static'
}

編譯後，index.html資源引用情況如下：

<script defer="defer" src="/static/js/chunk-vendors.abc53625.js"></script>
<script defer="defer" src="/static/js/app.0af7aca5.js"></script>
<link href="/static/css/app.bf008658.css" rel="stylesheet">
  • 3.publicPath：用於指定引用資源的字首。
// defineConfig 宏函式只支援 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果選擇true,那麼專案引用node_modules中的包也會用Babel來編譯,否則不會編譯
  outputDir: 'build',
  assetsDir: 'static',
  publicPath: './'
})

當進行上述相對路徑配置後，在index.html程式碼如下：

<script defer="defer" src="static/js/chunk-vendors.abc53625.js"></script>
<script defer="defer" src="static/js/app.0af7aca5.js"></script>
<link href="static/css/app.bf008658.css" rel="stylesheet">
  • 4.alias：用於配置導包路徑的別名。
    例如，當專案的目錄結構比較深的時候，配置一個路徑別名提高了程式碼的可讀性和維護性。
const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir);
}


// defineConfig 宏函式只支援 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果選擇true,那麼專案引用node_modules中的包也會用Babel來編譯,否則不會編譯
  outputDir: 'build',
  assetsDir: 'static',
  publicPath: './',
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
})

在vuejs 3專案中，可以在vue.config.js檔案中的chainWebpack屬性上配置alias。chainWebpack 是一個函式，該函式會接收一個基於webpack-chain的config例項，允許對webpack配置進行更細粒度的修改。

上述配置完成後，例如HelloWorld元件的引入方式可以調整為如下兩種方式：

import HelloWorld from 'components/HelloWorld.vue'
import HelloWorld from '@/components/HelloWorld.vue'
  • 5.devServer: 開發環境的服務配置

所有webpack-dev-server的選項都支援。注意：

  • 有些值像 host、port 和 https 可能會被命令列引數覆寫。
  • 有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發伺服器的 publicPath 同步以保障正常的工作。

示例：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    port: 8083,
    open: true,
    proxy: {},
  },
});

相關文章