BALearn.cn

深色模式

后台管理系统前期搭建 ​

Vite + Vue + TypeScript + Vue Router + Pinia + Axios + Element Plus + ……

Vite 官网中文 —— https://cn.vitejs.dev/
Vue 官网中文 —— https://cn.vuejs.org/
TypeScript 官网中文 —— https://www.tslang.cn/
Vue Router 官网中文 —— https://router.vuejs.org/zh/
Pinia 官网中文 —— https://pinia.vuejs.org/zh/
Axios 官网中文 —— https://axios-http.com/zh/
Element Plus 官网中文 —— https://element-plus.org/zh-CN/

说明 ​

后台管理系统搭建一般需要考虑到后期扩展性及维护性，主要内容为技术选型、安装配置等

技术选型 ​

Vite —— 下一代的前端工具链
Vue —— 开源的前端 JavaScript 框架，用于在 Web 上生成用户界面和单页应用程序
TypeScript —— JavaScript 的超集，微软开发的一个开源的编程语言
Vue Router —— Vue.js 的官方路由
Pinia —— 符合直觉的 Vue.js 状态管理库
Axios —— 一个基于 promise 的网络请求库，可以用于浏览器和 node.js
Element Plus —— 基于 Vue 3，面向设计师和开发者的组件库

安装 ​

构建一个 Vite + Vue 项目 ​

Bash
# 创建并进入一个新目录
mkdir learn-admin && cd learn-admin
# npm 7+, extra double-dash is needed:
npm create vite@latest admin-vue-app -- --template vue-ts
cd admin-vue-app
npm install
npm run dev
Bash
# 安装 Vue Router
npm install vue-router@4
# 安装 Pinia
npm install pinia
# 安装 Axios
npm install axios
# 安装 Element Plus
npm install element-plus --save

在 Vite 中配置路径别名 ​

修改 tsconfig.json 可让 VS Code 认识 @ 符号

json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",  //[!code ++]
    "paths": {  //[!code ++]
      "@/*": ["src/*"]  //[!code ++]
    }  //[!code ++]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

安装 node 的类型声明文件

Bash
npm i @types/node -D

修改 vite.config.ts

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 这里使用 nodejs 的模块，可能会报错，需要安装 node 的类型声明文件  //[!code ++]
import path from 'path'  //[!code ++]

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],  
  resolve: {  //[!code ++]
    //设置别名  //[!code ++]
    alias: {  //[!code ++]
      '@': path.resolve(__dirname, './src')  //[!code ++]
    }  //[!code ++]
  }  //[!code ++]  
})

用户界面布局 ​

新建布局组件 ​

新建 src/layout/index.vue 布局组件

vue
<template>
    <h1>@/layout/index.vue</h1>
    <router-view />
</template>
<script lang="ts" setup></script>
<style scoped></style>

新建 src/views/index.vue 首页组件

vue
<template>
  <h1>@/views/index.vue</h1>
</template>
<script setup lang="ts"></script>
<style scoped></style>

新建 src/views/login.vue 登录组件

vue
<template>
  <h1>@/views/login.vue</h1>
</template>
<script setup lang="ts"></script>
<style scoped></style>

Vue Router 加入项目 ​

新建 src/router/routes.ts 路由映射到组件

ts
import Layout from '@/layout/index.vue'

const routes = [
    {
        path: '/',
        redirect: '/index',
        component: Layout,
        children: [
            {
                path: '/index',
                component: () => import('@/views/index.vue'),
            }
        ]
    },
    {
        path: '/login',
        component: () => import('@/views/login.vue'),
    }
]

export default routes

新建 src/router/index.ts 创建路由实例

ts
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from '@/router/routes'

// 创建路由实例并传递 `routes` 配置
export const router = createRouter({
    // Hash 模式
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

修改 src/main.ts 使路由支持整个应用

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

const app = createApp(App)
app.use(router)
app.mount('#app')

修改 src/App.vue 修改应用入口添加路由出口

vue
<template>
  <router-view />
</template>
<script setup lang="ts"></script>
<style scoped></style>

Pinia 加入项目 ​

修改 src/main.ts 创建一个 pinia 实例 (根 store) 并将其传递给应用

ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'  //[!code ++]
import App from './App.vue'
import { router } from './router' 

const pinia = createPinia()  //[!code ++]
const app = createApp(App)
app.use(pinia)  //[!code ++]
app.use(router)
app.mount('#app')

（Pinia 基础示例）新建 stores/counter.ts 先创建一个 Store

ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => ({
        count: 0,
    }),
    actions: {
        increment() {
            this.count++
        },
    },
})

（Pinia 基础示例）在 src/views/index.vue 组件中使用该 store

vue
<template>
  <h1>@/views/index.vue</h1>
  <div>Current Count: {{ counter.count }}</div>
  <button @click="counter.increment()">Randomize</button>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
counter.$patch({ count: counter.count + 1 })
counter.increment()
</script>
<style scoped></style>

Element Plus 加入项目 ​

修改 src/main.ts 完整引入 Element Plus

ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'  //[!code ++]
import 'element-plus/dist/index.css'  //[!code ++]
import App from './App.vue'
import { router } from './router' 

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
// 在引入 ElementPlus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。
// size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
app.use(ElementPlus, { size: 'small', zIndex: 3000 })  //[!code ++]
app.use(router)
app.mount('#app')

Volar 支持
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

修改 src/layout/index.vue 使用 Container 布局容器

vue
<template>
    <el-container>
        <el-header><Header /></el-header>
        <el-container>
            <el-aside><Aside /></el-aside>
            <el-main><router-view /></el-main>
        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import Header from '@/layout/Header.vue'
import Aside from '@/layout/Aside.vue'
</script>
<style scoped></style>

最后也可以直接使用 Element Plus 提供的 Vite 模板，快速搭建项目 https://github.com/element-plus/element-plus-vite-starter
预览：https://vite-starter.element-plus.org

Bash
# 
git clone https://github.com/element-plus/element-plus-vite-starter
cd element-plus-vite-starter
npm i
npm run dev