介绍

本章会教你在真实项目中如何搭建 VueRouter、Vuex、pinia、axios、主题切换等，你会见证一个后台管理系统的详细搭建过程。

效果图：

功能：

后台管理系统常用模块
登录加密
多标签页
全局面包屑
国际化
异常处理
Utils工具包
可配置的菜单栏徽标
亮色 / 暗色侧边栏
浅色主题 / 暗黑主题
丰富的个性化配置
可折叠侧边栏
支持内嵌页面
重载当前页面
动态路由支持自动重载
支持多级路由嵌套及菜单栏嵌套
分离路由与菜单设置
富文本编辑器
优秀的持久化存储方案
自定义登录重定向

创建项目

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … vue-ts-vite-demo1
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No

运行项目

安装依赖

npm install
or
yarn install

启动项目

npm run dev

准备工作

Vite 配置路径别名

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

export default defineConfig({ 
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resovePath("src"),
      "@views": resovePath("src/views"),
      "@comps": resovePath("src/components"),
      "@imgs": resovePath("src/assets/img"),
      "@icons": resovePath("src/assets/icons"),
      "@utils": resovePath("src/utils"),
      "@plugins": resovePath("src/plugins"),
      "@styles": resovePath("src/assets/styles"),
    }
  },
})

function resovePath(paths) {
  return path.resolve(__dirname, paths)
}

安装Sass

yarn add sass

配置 Sass variable and mixin

export default defineConfig({ 
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@styles/variables.scss"; @import "@styles/mixin.scss";`
      }
    }
  }
}

创建 reset.scss 文件（重置HTML样式）

路径：/assets/styles/reset.scss

下载地址：https://www.qiniu.lingchen.kim/reset.scss

然后在 main.js 中导入 reset.scss 文件

import '@/styles/reset.scss'

VsCode

配置 vue3 代码片段

点击左下角设置->配置用户代码片段->新建全局代码片段->输入名称->填入代码片段

代码片段模版

{
  "Vue3快速生成模板": {
    "prefix": "v3",
    "body": [
      "<template>",
      "\t<div class=\"\">",
      "\t\t$3",
      "\t</div>",
      "</template>\n",
      "<script setup lang='ts'>",
      "import {} from 'vue'",
      "\t$2",
      "</script>\n",
      "<style lang=\"scss\" scoped>",
      "\t$4",
      "</style>"
    ],
    "description": "Vue3.2"
  }
}

最后新建一个空的vue文件，输入 v3 回车就能自动生成模版了，这里只生成了一个最简单的模版，有其他需要新增的可以自己补充。

<template><div class="">
    
  </div>
</template>

<script setup lang='ts'>
import {} from 'vue'
  
</script>

<style lang="scss" scoped>
  
</style>

安装 volar（vue3配套插件）

在 vscode 插件市场里面安装 volar 插件

删除项目不需要的文件

把 assets、components、views 下面没有用的文件删除

VueRouter（路由）

创建 home、login、user 三个页面

配置路由表

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@views/home/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/user',
      name: 'User',
      component: () => import('@views/user/index.vue')
    }, {
      path: '/login',
      name: 'Login',
      component: () => import('@views/login/index.vue')
    }
  ]
})

export default router

home.vue，其他两个页面一样

<template><div class=""><h1>Home</h1></div>
</template>

<script setup lang='ts'>
import {} from 'vue'
  
</script>

<style lang="scss" scoped>
  
</style>

创建 Navigation 组件

components/layout/Navigation/index.vue

<template><div class="navigation"><ul><li><router-link to="/">Home</router-link></li><li><router-link to="/user">User</router-link></li><li><router-link to="/login">Login</router-link></li></ul></div>
</template>

<script setup lang='ts'>
import {} from 'vue'
  
</script>

<style lang="scss" scoped>
  .navigation {
    ul {
      display: flex;

      li {
        font-size: 18px;
        margin-right: 20px;
      }
    }
  }
</style>

然后在 App.vue 中导入

<template><div class="app"><Navigation></Navigation><RouterView /></div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import Navigation from './components/layout/Navigation.vue'
</script>

<style lang="scss" scoped>
.app {
  min-height: 100vh;
}
</style>

到现在就是这样的了

Vuex（状态管理）

如何优雅的编写 Vuex

安装 vuex

yarn add vuex@next --save

使用

在 vue3.0 中使用 vuex 体验的并不是很好，下面我们会使用 pinal 这个库来帮助我们更优雅的使用 vuex

如果不使用 pinal，可参考官方文档来使用 vuex：

https://next.vuex.vuejs.org/zh/guide/

我这里选择使用 pinal：

介绍

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案

Pinia 始于2019 年 11 月左右，通过 Composition API重新设计 Vue Store 的外观。从那时起，初始原则仍然相同，但Pinia适用于Vue 2和Vue 3，不需要您使用组合API。除了安装和SSR外，API都是一样的，这些文档针对Vue 3，必要时提供有关Vue 2的注释，以便Vue 2和Vue 3用户可以阅读！

为什么使用 pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。如果您熟悉 Composition API，您可能认为您已经可以共享具有简单 export const state = reactive({}) 的全局状态。

关于 Pinia 的其他问题，我在这里不再做过多赘述，如果有其他问题，可以点击下面的链接访问官网

官网：https://pinia.esm.dev

安装 pinia

yarn add pinia

搭建

创建下面的文件

src/store/index.ts

import type { App } from 'vue'
import { createPinia } from 'pinia'
export const store = createPinia()

export function initStore(app: App<Element>) {
  app.use(store)
}

main.ts

import { initStore } from './store'
const app = createApp(App)
initStore(app)
app.mount('#app')

模块化：

store/modules/user.ts

import { defineStore } from 'pinia'
import { LanguageEnum } from '../../enums/appEnum'
import { UserInfo } from '../../types/store';
import { useSettingStore } from './setting'
import { useWorktabStore } from './worktab'

interface UserState {
  language: LanguageEnum     // 语言
  isLogin: boolean           // 是否登录
  info: Partial<UserInfo>    // 用户信息
}

export const useUserStore = defineStore({
  id: 'userStore',
  state: (): UserState => ({
    language: LanguageEnum.CN,
    isLogin: false,
    info: {}
  }),
  getters: {
    getUserInfo(): Partial<UserInfo> {
      return this.info
    },
    getSettingState() {
      return useSettingStore().$state
    },
    getWorktabState() {
      return useWorktabStore().$state
    }
  },
  actions: {
    setUserInfo(info: UserInfo) {
      this.info = info
    }
  }
})

使用：

import { useUserStore } from "../../store/modules/user"
const userStore = useUserStore()

// 获取数据
const isLogin = userStore.isLogin

const language = computed(() => userStore.language)

// 修改 state
userStore.setUserInfo(...)

// 或者使用 $patch 修改
userStore.$patch({
  language: 'CN',
  isLogin: true,
  info: {
    name: 'jack',
    age: '22'
  }
})

// getter
userStore.getUserInfo()

如何操作其他模块？

import { useSettingStore } from './setting'

getters: {
  getSettingState() {
    return useSettingStore().$state
  }
},
actions: {
  initState() {
    let setting = this.getSettingState
  }
}

通过 useSettingStore().glopThemeType 获取 setting 模块中的单个数据

通过 useSettingStore().$state 获取 setting 模块中的所有数据

通过 useSettingStore().setLanguage() 调用 setting 模块中的方法

.env 文件

根目录创建 .env、.env.development、.env.production 三个文件

.env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

.env.test 测试环境

我这边暂时不需要使用测试环境，所以 env.test 暂时不创建了

.env

# 端口号
VITE_PORT = 5137

# 网站前缀
VITE_BASE_URL = /art_design_pro/

# API
VITE_API_URL = http://127.0.0.1:8080

.env.development

# 网站前缀
VITE_BASE_URL = /any_design_pro/

# API
VITE_API_URL = http://127.0.0.1:8080

# Delete console
VITE_DROP_CONSOLE = false

.env.production

# 网站前缀
VITE_BASE_URL = /any_design_pro/

# API
VITE_API_URL = http://127.0.0.1:8080

# Delete console
VITE_DROP_CONSOLE = true

env 智能提示

根目录下 env.d.ts，在其他地方使用的时候就能智能提示出我们上面定义的变量了

/// <reference types="vite/client" />


// .env ts 智能提示
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: stringreadonly VITE_REQUEST_BASE_UR: string
}
 
interface ImportMeta {
  readonly env: ImportMetaEnv
}
 
declare module '*.vue' {
  import { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>
  export default component
}

.vue文件使用，现在我们可以看到有智能提示了

axios（网络请求）

安装

yarn add axios

封装

src/utils/http/index.ts

import axios, { type AxiosRequestConfig, type AxiosResponse, type AxiosError } from 'axios';
import { getMessage } from './msg';

// 创建 axios 实例
const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,  // 请求地址前缀部分timeout: 30000, // 请求超时时间(毫秒)headers: {get: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    post: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  },
  withCredentials: true,  // 异步请求携带cookietransformRequest: [(data) => {
    data = JSON.stringify(data)
    return data
  }],
  validateStatus() {
    return true
  },
  transformResponse: [(data) => {
    if (typeof data === 'string' && data.startsWith('{')) {
      data = JSON.parse(data)
    }
    return data
  }]
})

// request 拦截器
axiosInstance.interceptors.request.use((config) => {
  //获取token，并将其添加至请求头中let token = localStorage.getItem('token')if (token) {
    config.headers.Authorization = `${token}`
  }
  return config
}, (error) => {
  // 错误抛到业务代码
  error.data = {}
  error.data.msg = '服务器异常，请联系管理员！'return Promise.resolve(error)
})

// response 拦截器
axiosInstance.interceptors.response.use((response: AxiosResponse) => {
  let msg = ''const status = response.status

  if (status < 200 || status >= 300) {
    msg = getMessage(status)
    if (typeof response.data === 'string') {
      response.data = { msg }
    } else {
      response.data.msg = msg
    }
  }
  return response
}, (error) => {
  if (axios.isCancel(error)) {
    console.log('repeated request: ' + error.message)
  } else {
    error.data = {}
    error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'// ElMessage.error(error.data.msg)  // ElementMessage 抛出错误
  }
  return Promise.reject(error)
})

// 请求
function request<T = any>(config: AxiosRequestConfig): Promise<T> {
  return new Promise((resolve, reject) => {
    axiosInstance.request({ ...config }).then((
      res: AxiosResponse
    ) => {
      try {
        resolve(res.data);
      } catch (err) {
        reject(err || new Error('request error!'));
      }
    }).catch((e: Error | AxiosError) => {
      if (axios.isAxiosError(e)) {

      }
      reject(e);
    });
  })
}

function get<T = any>(config: AxiosRequestConfig): Promise<T> {
  return request({ ...config, method: 'GET' });
}

function post<T = any>(config: AxiosRequestConfig): Promise<T> {
  return request({ ...config, method: 'POST' });
}

function put<T = any>(config: AxiosRequestConfig): Promise<T> {
  return request({ ...config, method: 'PUT' });
}

function del<T = any>(config: AxiosRequestConfig): Promise<T> {
  return request({ ...config, method: 'DELETE' });
}

export default {
  get,
  post,
  put,
  del
}

src/utils/http/msg.ts

export const getMessage = (status: number) => {
  let msg = ''switch (status) {
    case 400:
      msg = '请求错误(400)'breakcase 401:
      msg = '未授权，请重新登录(401)'breakcase 403:
      msg = '拒绝访问(403)'breakcase 404:
      msg = '请求出错(404)'breakcase 408:
      msg = '请求超时(408)'breakcase 500:
      msg = '服务器错误(500)'breakcase 501:
      msg = '服务未实现(501)'breakcase 502:
      msg = '网络错误(502)'breakcase 503:
      msg = '服务不可用(503)'breakcase 504:
      msg = '网络超时(504)'breakcase 505:
      msg = 'HTTP版本不受支持(505)'breakdefault:
      msg = `连接出错(${status})!`
  }
  return `${msg}，请检查网络或联系管理员！`
}

api

src/types/axios.d.ts

// 接口返回最外层数据结构
export interface Result<T = any> {
  code: number;
  data: T;
  error: string,
  msg: string;
}

src/api/loginApi.ts

import request from '@/utils/http'
import type { Result } from '../types/axios'
import type { captchaType } from './model/captchaModel'

// login
export class LoginService {
  static getCaptcha() {
    return request.post<Result<captchaType>>({ 
      url: '/api/captcha' 
    })
  }
}

/src/api/model/captchaModel.ts

export interface captchaType {
  captchaId: string
  picPath: string
}

Vite 配置代理

import { defineConfig, loadEnv } from 'vite'

export default ({ mode }: { mode: string }) => {
  const root = process.cwd()
  const env = loadEnv(mode, root)
  const { VITE_PORT, VITE_API_URL } = env

  return defineConfig({
    server: {
      port: parseInt(VITE_PORT),  // 端口号
      host: true,
      proxy: {
        '/api': {
          target: VITE_API_URL,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    }
  })
}

页面调用

import { reactive } from 'vue'
import { LoginService } from "../../api/loginApi"
import { onMounted } from 'vue'

const captcha = reactive({
  picPath: '',
  captchaId: ''
})

const getCaptcha = async () => {
  const res = await LoginService.getCaptcha()
  let { picPath, captchaId } = res.data
  captcha.picPath = picPath
  captcha.captchaId = captchaId
  console.log(res.data)
}

onMounted(() => {
  getCaptcha()
})

使用 iconfont

1.下载 iconfont

https://www.iconfont.cn/

2.导入到项目中

将下载的文件导入到项目下/assets/icons/icons目录下

我这边需要多种图标所以在 icons 目录下也创建了一个icons目录，后面会有 element、system 等图标

3.main.ts导入

import "@icons/icons/iconfont.css"                  // 系统提供的图标库
import "@icons/icons/iconfont.js"                   // 彩色图标

4.使用

// 普通图标
<span class="iconfont"></span>

// 彩色图标
<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-zhaopian-copy"></use>
</svg>

ElementPlus

安装

yarn add element-plus
yarn add @element-plus/icons-vue