vue3+vite后台管理系统：vue-next admin

Vue-Next Admin 🚀

vue3 后台管理系统，整合企业级应用必备功能，持续踩坑中...

功能

• 登录&退出
• 路由权限控制
• 动态挂载路由
• 页面布局
• 全局样式配置
• 接口数据模拟

技术栈

• vue3 中文文档
• vite github，原理分析
• vuex 4.x github
• vue-router 4.x github
• ant design vue 2.x 中文文档
• mockjs && vite-plugin-mock github

vite项目创建

# npm:
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

# yarn:
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

安装依赖

# vuex，4.0版本支持vue3，目前最新是4.0.0-beta.4
yarn add vuex@4.0

# vue-router，4.0版本支持vue3，目前最新是4.0.0-rc.1
yarn add vue-router@4.0

# ant-design-vue，支持vue3，目前最新是2.0.0-beta.10
yarn add ant-design-vue@2.0

# 2.0版本图标库需要单独安装
yarn add @ant-design/icons-vue

# mockjs模拟接口数据
yarn add mockjs
yarn add vite-plugin-mock

vite.config.js

根目录新建配置文件：vite.config.js，作用类似cli项目下的vue.config.js：

const path = require('path')
const { modifyVars } = require('./src/styles/lessModifyVars')
const { createMockServer } = require('vite-plugin-mock')

const isDev = () => process.env.NODE_ENV === 'development'

module.exports = {
  // 端口号
  port: '3000',
  // 地址
  hostname: 'localhost',
  // 基本公共路径
  base: '/',
  // 打包路径
  outDir: 'dist',
  // 资源输出路径
  assetsDir: '_assets',
  // 静态资源小于该大小将会内联，默认4096kb
  assetsInlineLimit: 4096,
  // sourcemap
  sourcemap: isDev() ? true : false,
  // 自动打开浏览器
  open: true,
  // 代码压缩
  minify: isDev() ? 'esbuild' : 'terser',
  // esbuild转换目标
  esbuildTarget: 'es2020',
  // terser配置
  terserOptions: {
    compress: {
      // 是否删除console
      drop_console: isDev() ? false : true
    }
  },
  // 资源别名
  alias: {
    // !键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
  },
  // css预处理，全局样式变量
  cssPreprocessOptions: {
    less: {
      modifyVars: modifyVars,
      javascriptEnabled: true
    }
  },
  // 服务代理
  proxy: {
    // '/api': {
    //   target: 'http://targetapi.com',
    //   changeOrigin: true,
    //   rewrite: path => path.replace(/^\/api/, '')
    // }
  },
  plugins: [
    createMockServer({
      // !如果项目是js写的，务必将supportTs设置为false，否则mock不生效
      supportTs: false,
      mockPath: 'mock'
    })
  ]
}

vuex

// 创建store
import { createStore } from 'vuex'
const store = createStore({
  // store配置对象
  modules: {
    app,
    user,
    permission
  },
  getters
})
// 在main.js中，传入app，使用store
export const setupStore = (app) => {
  app.use(store)
}
export default store

vue-router

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
// 创建路由实例
const router = createRouter({
  // hash模式
  history: createWebHashHistory(),
  routes: routes
})
// 在main.js中，传入app，使用router
export const setupRouter = (app) => {
  app.use(router)
}
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.less'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { setupRouter } from './router/index'
import { setupStore } from './store/index'

const app = createApp(App)
app.use(Antd)
setupRouter(app)
setupStore(app)
app.mount('#app')

vuex、vue-router使用区别

• 在vue2中，store和router实例是挂到Vue.prototype上的，在vue组件中，通过this.$store、this.$router拿到实例
• 在vue3中，通过useStore方法获取store实例，通过useRouter获取router，通过useRoute获取route

import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    // 获取store
    const store = useStore()
    // 获取路由器
    const router = useRouter()
    // 获取当前路由
    const route = useRoute()
  }
}

完整项目

vue-next admin

预览

😜 线上预览