【手摸手】 帶你搭建一套基於 Vite 2.0 + Vue 3.0 + Element-plus 的後臺管理系統

• 在線預覽

• 代碼倉庫

• TypeScript 版本

前言（介紹 Vite）

Vite 是一個開發構建工具，開發過程當中它利用瀏覽器 native ES Module 特性導入組織代碼，生產中利用 rollup 做爲打包工具，它有以下特色：

• 光速啓動
• 熱模塊替換
• 按需編譯

詳細內容能夠點擊 Vite 官網傳送門

開始（項目搭建）

請確保你的電腦上成功安裝 Node.js，本項目使用 Vite 構建工具，須要 Node.js 版本 >= 12.0.0。

查看 Node.js 版本：

node -v
複製代碼

使用 Vite 快速初始化項目

使用 NPM:

npm init @vitejs/app
複製代碼

使用 Yarn:

yarn create @vitejs/app
複製代碼

而後按照終端提示完成如下操做：

1. 輸入項目名稱

例如：本項目名稱 vue3-element-admin

2. 選擇模板

咱們選擇 vue，會自動安裝 Vue3

你還能夠經過附加的命令行選項直接指定項目名稱和你想要使用的模板。例如，要構建一個 Vite + Vue 項目，運行:

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 須要額外的雙橫線：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue
複製代碼

支持的模板預設包括：

• vanilla
• vue
• react
• preact
• lit-element
• svelte

3. 安裝依賴

cd ./vue3-element-admin
npm install
複製代碼

4. 啓動項目

npm run dev
複製代碼

如上圖所示，表示 Vite + Vue3 簡單的項目骨架搭建完畢，下面咱們來爲這個項目集成 Vue Router、Vuex、Element Plus、Sass。

修改 Vite 配置文件

Vite 配置文件 vite.config.js 位於根目錄下，項目啓動時會自動讀取。

本項目先作一些簡單配置，例如：設置 @ 指向 src 目錄、 服務啓動端口、打包路徑、代理等。

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    base: '/', // 開發或生產環境服務的公共基礎路徑。
    plugins: [vue()],
    resolve: {
      alias: {
        '@': resolve('./src'), // 設置 `@` 指向 `src` 目錄
        '@img': resolve('./src/assets/img'),
      },
    },
    server: {
      port: 7001, // 設置服務啓動端口號
      open: false, // 設置服務啓動時是否自動打開瀏覽器
      // 設置代理，根據項目實際狀況配置
      proxy: {
        '/api': 'http://admin.xueyueob.cn/api',
      },
    },
  }
})
複製代碼

目錄結構

├── publish/
└── src/
    ├── assets/                    // 靜態資源目錄
    ├── components/                // 公共組件目錄
    ├── layout/                    // 項目佈局目錄
    ├── router/                    // 路由配置目錄
    ├── store/                     // 狀態管理目錄
    ├── styles/                    // 通用樣式目錄
    ├── utils/                     // 工具函數目錄
    ├── views/                     // 頁面組件目錄
    ├── App.vue
    ├── main.js
├── index.html
├── vite.config.js                 // Vite 配置文件
└── package.json
複製代碼

集成路由管理工具 Vue Router

1. 安裝支持 Vue3 的路由工具 vue-router@next

npm i vue-router@next
複製代碼

2. 建立 src/router/index.js 文件

在 src 下建立 router 目錄，而後在 router 目錄裏新建 index.js 文件：

└── src/
  ├── router/
    ├── index.js  // 路由配置文件
複製代碼

import { createRouter, createWebHistory } from 'vue-router'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    name: 'Login',
    meta: {
      title: '登陸',
    },
  },
  {
    path: '/',
    component: () => import('@/layout/index.vue'),
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        name: 'Dashboard',
        meta: { title: '首頁', icon: 'el-icon-s-home', affix: true },
      },
      {
        path: '/user',
        component: () => import('@/views/user/user.vue'),
        name: 'User',
        meta: { title: '用戶', icon: 'el-icon-user-solid', roles: ['admin', 'editor'] },
      },
    ],
  },
]

export const router = createRouter({
  history: createWebHistory(),
  routes: constantRoutes,
})

export default router
複製代碼

根據本項目路由配置的實際狀況，你須要在 src 下建立 views 目錄，用來存儲頁面組件。

可直接複製代碼 Demo 傳送門

3. 在 main.js 文件中掛載路由配置

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

createApp(App).use(router).mount('#app')
複製代碼

集成狀態管理工具 Vuex

1. 安裝支持 Vue3 的狀態管理工具 vuex@next

npm i vuex@next
複製代碼

2. 建立 src/store/index.js 文件

在 src 下建立 store 目錄，而後在 store 目錄裏新建 index.js 文件：

└── src/
  ├── store/
    ├── modules/
      ├── app.js
      ├── tagsView.js
    ├── index.js  // store 配置文件
複製代碼

這裏我使用 import.meta.globEager 函數導入 modules 目錄下的全部模塊：(自動化、一勞永逸)

// indes.js
import { createStore } from 'vuex'

const modulesFiles = import.meta.globEager('./modules/*.js')
const pathList = []

for (const path in modulesFiles) {
  pathList.push(path)
}

const modules = pathList.reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
  const value = modulesFiles[modulePath]
  modules[moduleName] = value.default
  return modules
}, {})

const store = createStore({
  modules,
})

export default store
複製代碼

// app.js
const state = {
  device: 'desktop',
}

const mutations = {
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  },
}

const actions = {
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}
複製代碼

使用方式

// app tagsView 就是modules目錄下的模塊
this.$store.dispatch('app/toggleDevice', 'mobile')
this.$store.dispatch('tagsView/addVisitedView', 'user')
複製代碼

3. 在 main.js 文件中掛載 Vuex 配置

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

createApp(App).use(router).use(store).mount('#app')
複製代碼

集成 UI 框架 Element Plus

1. 安裝支持 Vue3 的 UI 框架 Element Plus

npm i element-plus
複製代碼

2. 在 main.js 文件中掛載 Element Plus

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

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')
複製代碼

集成 CSS 預編譯器 Sass

1. 安裝 sass

npm i sass -D
複製代碼

2. 使用

<style lang="scss">
  ...
</style>
複製代碼

至此，一個基於 Vite + Vue3 + Vue Router + Vuex + Element Plus + Sass 的前端項目開發環境搭建完畢，項目 Demo 託管在 GitHub 倉庫，須要的同窗能夠去下載下來，參考學習。

結束（答疑解惑）

咱們標題說的是搭建一套後臺管理系統項目。沒體現啊？標題黨？穩住，我們接着往下看 ^-^

咱們先去下載一份@PanJiaChen 大佬開發維護的 67.2K Star 的 vue-element-admin 後臺管理系統模板。接着咱們複製 src 目錄替換掉咱們的 src 目錄，替換前備份一下，而後把上面文中的 router store main.js 替換回來。運行項目

你會發現一大堆報錯，這很正常。由於 vue3 相對 vue2 有一些重大更改；element-ui 跟 element-plus 也有少許更改；因此咱們解決報錯的過程就是 vue2 升級 vue3 的過程；因爲篇幅較長，就不把解決報錯的過程羅列出來了。感興趣的同窗能夠去 vue 官網查看更改 vue 官網傳送門

另外，喜歡 TypeScript 的同窗，我也寫了一套 TypeScript 版本。樓下自取 ^_^

• JavaScript 版本

• TypeScript 版本

後記（ES6 系列）

隨着現代瀏覽器對 ES6 的大力支持，咱們可使用 ES6 編寫更加簡潔優雅的代碼。下篇文章，我會列出大量使用 ES6 的最佳實踐！