oh-admin诞生记

创建基础项目

基于vite创建初始模板 选择vue+ts 后期再安装依赖less支持

输入以下命令 回车

yarn create vite

交互中选择 vue ts

项目初始化完成后 安装less 即可支持less

yarn add --dev less

集成必要插件

antd

过程参考官网

vue-router

过程参考官网

给一个简短参考

// src/router.ts

import { createRouter, createWebHistory } from 'vue-router';
import RouteView from '/@/components/route-view.vue';

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Layout',
      redirect: { name: 'Home' },
      component: () => import('/@/components/layout/index.vue'),
      children: [
        {
          name: 'Home',
          path: '/home',
          component: () => import('/@/views/home/index.vue')
        },
        {
          name: 'System',
          path: '/system',
          redirect: { name: 'User' },
          component: RouteView,
          children: [
            {
              name: 'User',
              path: 'user',
              component: () => import('/@/views/system/user/index.vue')
            },
            {
              name: 'Menu',
              path: 'menu',
              component: () => import('/@/views/system/menu/index.vue')
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      component: () => import('/@/views/login/index.vue')
    }
  ]
});

pinia

用于全局状态管理 vuex的替代品，参考文档

pinia-plugin-persist

pinia的持久化插件 参考官方文档

api

vue-request、axios、pont、mock

处理接口请求 和 mock

vite-plugin-vue-setup-extend

优雅的写组件名字

<script lang="ts" setup name="demo">
	xxx
</script>

form-create

用于表单生成的 这里是官网地址

yarn add @form-create/ant-design-vue@next

配置短路径

vite.config.ts 添加如下代码

...
import { resolve } from 'path';

const pathResolve = (dir: string) => {
  return resolve(process.cwd(), ".", dir);
};

export default defineConfig({
  plugins: [vue()],
  // 以下部分
  resolve: {
    alias: [
      {
        find: /\/@\//,
        replacement: pathResolve("src") + "/",
      },
    ],
  },
});

另外ts可能无法识别path这个node全局内置的环境包：找不到模块“path”或其相应的类型声明

这个时候安装对应的类型包 ts就能识别了

yarn add --dev @types/node

因为本项目是ts项目 所以如上虽然可用 但是ts会编译报错 不识别短路径/@/。因此需求做ts适配。修改ts配置文件 tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "/@/*": ["src/*"]
    }
  },
  ...
}