Vue3實戰(05)-教你快速搭建Vue3工程化項目

除了Vue 3這個庫，還需Vue 3 最新全家桶。 1 環境準備之前語法演示直接使用script引入Vue 3，從而在瀏覽器里實現所有調試功能。但實際項目中，使用專門調試工具。在項目上線之前，代碼也需打包壓縮，並考慮到研發效率和代碼可維護性，所以在下麵，需建立一個工程化項目實現這些功能。工具 V ...

除了Vue 3這個庫，還需Vue 3 最新全家桶。

1 環境準備

之前語法演示直接使用script引入Vue 3，從而在瀏覽器里實現所有調試功能。但實際項目中，使用專門調試工具。在項目上線之前，代碼也需打包壓縮，並考慮到研發效率和代碼可維護性，所以在下麵，需建立一個工程化項目實現這些功能。

工具

VS Code寫Vue 3的代碼
直接在Chrome瀏覽器里展示

Vue 2官方推薦Vue-cli創建項目
Vue 3建議使用Vite創建項目，因為vite能夠提供更好更快的調試體驗。使用Vite前，先安裝Node.js

推薦使用VS Code的官方擴展插件Volar，這個插件給Vue 3提供了全面的開發支持。我們訪問Volar的地址，直接點擊Install，就會啟動VS Code並且安裝。然後使用Chrome訪問 Vue 3調試插件的地址，可以幫助我們在瀏覽器里高效的調試頁面。

命令行視窗對vuejs目錄執行下麵的命令，創建一個Vite的初始化項目。

npm init @vitejs/app

之後，在Project name這一行，我們輸入項目的名字，例如geek-admin；接著，在Select a framework這一行輸入框架的名字，這裡我們選擇vue；再之後，在select a variant 這一行，因為在項目里，我們沒有選擇TS，所以這裡我們依然選擇vue即可。

看geek-admin下麵的文件目錄，這個目錄就是我們項目啟動的骨架了。目錄中的index.html是項目的入口；package.json是管理項目依賴和配置的文件；public目錄放置靜態資源，比如logo等圖片；vite.config.js就是和Vite相關所有工程化的配置；src就是工作的重點，我們大部分的代碼都會在src目錄下管理和書寫，後面我們也會在src目錄下細化項目規範。

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               資源文件
│   └── favicon.ico
├── src                  源碼
│   ├── App.vue          單文件組件
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

2 Vue2.x V.S Vue3.x

2.1 main.js

通過按需導入的 createApp 方法構建 vue 實例
通過 vue實例.use 掛載插件（router 、 wuex）
沒有了 wue 構造方法，也就無法再掛載原型

2.2 App.vue

組件內部結構無變化

依然是：

tempalte
script
style

template標簽

支持多個根標簽。

2.3 store/index.js

通過按需導入的createStore 萬江來來構建store 實例
無需再通過 Vue.use(vuex) 形式掛載

2.4 route/index.js

通過按需導入的createRouter 萬法來構建router
通過按需導入的 createWebHashHistory 方法來創建
無需再通過 Vue.use(VueRouter) 形式掛載
routes 路由表的定義無差別

2.5 小結

vue3 的初始化項目中，與 vue2 對比的最大差異其實就是：

vue3 使用按需導入的形式進行初始化操作
template標簽中支持多個根標簽

之後，在geek-admin文件夾內執行npm install 命令，來進行依賴的安裝，然後執行npm run dev 命令來啟動項目，看到如下信息就算是啟動成功了。

打開 http://localhost:3000/：

完成項目初始化後，細化src目錄，搭建源碼骨架。我們去VS Code里打開項目，修改一下src目錄下的App.vue 文件。例如，我們改動一下文件中的HelloWorld組件，把msg改成“你好，javaedge”，之後你會發現瀏覽器不需要我們去刷新，首頁大標題就自動更新了，這種熱更新的開發體驗會伴隨我們整個項目開發，極大提高我們的開發效率。

現在項目架構如下，擁有工程初步。從下往上看這個架構：

所有工程化體系都是基於Node.js生態
VS Code+Volar編輯器+語法提示工具作為上層開發工具
使用Vite作為工程化工具
使用Chrome進行調試

都是Vue 3工程化體系的必備工具。

開發項目是多頁面，所以vue-router和Vuex也成為必選：

Vue負責核心
Vuex負責管理數據
vue-router負責管理路由

geek-admin目錄中使用下麵這段代碼安裝Vuex和vue-router。

npm install vue-router@next vuex@next

框架搭建完畢後，我們如何在項目的src目錄下麵組織我們的路由和其他代碼呢？我們需要制定一些基本的規範，最常見的規範就是使用文件夾來做區分。對於如何做分區，下麵的規範這一部分就會介紹到。

3 規範

無規矩不成方圓，團隊項目中的規範尤其重要。我們先對幾個文件夾的分層進行規定，便於管理，下麵是src目錄的組織結構。

├── src
│   ├── api            數據請求
│   ├── assets         靜態資源
│   ├── components     組件
│   ├── pages          頁面
│   ├── router         路由配置
│   ├── store          vuex數據
│   └── utils          工具函數

我們的頁面需要引入路由系統，我們進入到router文件夾中，新建index.js，寫入下麵的代碼：

import {
    createRouter,
    createWebHashHistory,
  } from 'vue-router'
  import Home from '../pages/home.vue'
  import About from '../pages/about.vue'

  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]

  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })

  export default router

上面的代碼中，我們首先引入了createRouter和createWebHashHistory兩個函數。createRouter用來新建路由實例，createWebHashHistory用來配置我們內部使用hash模式的路由，也就是url上會通過 # 來區分。

之後在上面的代碼里，我們引入兩個組件about和home，根據不同的訪問地址 / 和 /home 去渲染不同的組件，最後返回router即可。

現在頁面就會報錯，提示我們找不到about和home這兩個組件，然後我們去pages下麵新建兩個文件，分別輸入如下內容：

<template>
    <h1>這是關於頁面</h1>
</template>

<template>
    <h1>這是首頁</h1>
</template>

註意，這兩個文件是以 .vue 作為尾碼的，這是Vue中單文件組件的寫法，我們可以在一個文件中通過template、script和style來維護Vue組件的HTML、JavaScript和CSS。然後我們在main.js中，載入router的配置：

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'
createApp(App)
    .use(router)
    .mount('#app')

然後去App.vue中，我們刪掉template之前的代碼，加入如下內容：

<template>
  <div>
    <router-link to="/">首頁</router-link> |
    <router-link to="/about">關於</router-link>
  </div>
  <router-view></router-view>
</template>

代碼中的router-link和router-view就是由vue-router註冊的全局組件，router-link負責跳轉不同的頁面，相當於Vue世界中的超鏈接a標簽； router-view負責渲染路由匹配的組件，我們可以通過把router-view放在不同的地方，實現複雜項目的頁面佈局。

我們在瀏覽器中打開 http://localhost:3000/，就會看到下圖的頁面，點擊“關於”和“首頁”都會有頁面切換的效果。

我們打開Chrome的調試窗，這也是我們以後常用的調試頁面，在Vue這個標簽頁中，能很清晰地看到組件的層級關係。

至此，一個多頁面的Vue開發項目雛形就完成了，頁面架構變成：

還不夠，實際項目開發中還有各種工具集成，如：

寫CSS代碼時，要預處理工具stylus或sass
組件庫開發中，我們需要Element3作為組件庫
網路請求後端數據的時候，要Axios

對於團隊維護的項目，工具集成完畢後，還要有嚴格的代碼規範。我們需要Eslint和Prettier來規範代碼的格式，Eslint和Prettier可以規範項目中JavaScript代碼的可讀性和一致性。

代碼的管理還需要使用Git，我們預設使用GitHub來托管我們的代碼。此外，我們還會使用commitizen來規範Git的日誌信息。

對於我們項目的基礎組件，我們還會提供單元測試來確保代碼質量和可維護性，最後我們還會配置GitHub Action來實現自動化的部署。

最後項目架構：

項目雛形搭建完畢後，後面用到哪一塊就會把哪一塊加上，也就是用一個循序漸進的方式學習。 比如我們下一講完成一個獨立功能的時候，才會把Git規範加上。至此，項目搭建完畢，在下一講中，我們開啟下一步，也就是頁面的主體代碼編寫。

4 總結

環境準備階段，我們基於Vite 2和Vue 3搭建了我們項目的初始化框架，包含文件規範、工程化、路由和開發的基礎配置，後面我們所有的代碼都會在這個架構基礎之上進行添加。你可以理解環境準備階段是給Vue 3提供裝備的過程，vue-router提供路由的管理、Vuex管理數據流、VS Code+Chrome+Vite則提供了極致的開發調試體驗。

制定了代碼和文件夾規範。後續新增組件就要去src/components目錄，新增數據請求就去src/api目錄。並且main.js在項目入口對路由數據進行了註冊，這樣我們就能夠通過執行 npm run dev 啟動這個項目。之後，我們就能看到首頁和關於頁面，這樣項目的雛形我們就搭建完畢。

最後展示了一下整個項目架構的全景圖，你能看到，從環境的準備到項目的初始化，再到搭建完成項目雛形，整個項目架構的全景圖也在項目開發過程中逐漸完善。

本文由博客一文多發平臺 OpenWrite 發佈！