# vue3 + vite + ts + ant 前端后台模板

**Repository Path**: xiaole9924/v3-vite

## Basic Information

- **Project Name**: vue3 + vite + ts + ant 前端后台模板
- **Description**: 基于 vite2.x + vue3.x + antd-design-vue2.x + typescript4.x 的后台管理系统模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-12-08
- **Last Updated**: 2022-08-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3-TypeScript

## README

# vue3-antd-admin

> 即将重构整个前后端项目，完善后端权限控制细粒度，封装更多场景化组件...

基于 vite2.x + vue3.x + antd-design-vue2.x + typescript4.x 的后台管理系统模板



## vscode 配置

安装项目根目录.vscode 推荐的插件，再安装 Volar，并禁用 Vetur，重启 vscode 即可。

> 使用了 Vue3.0 全家桶、ant-design-vue2.0 和 typescript4.0，实践 vue3.0 的新特性以及玩法，不得不说 vue3.0 的 Composition API 相比于 vue2.0 的 Options API
> 灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用 hooks 的形式去代替以前 mixins 等的写法。更多 hooks 可以参考[vueuse](https://vueuse.org/functions.html)


## Project setup

-  yarn create @vitejs/app
-  yarn add ant-design-vue@next
-  yarn add vuex@next -S   
-  yarn add vue-router@next -S 


## vite.config.ts
```bash
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from "path"
// https://vitejs.dev/config/  
//yarn add vite-plugin-style-import -D
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")  //  __dirname 和 path 显示红色的波浪线需要安装插件npm i @types/node -S 
    }
  }
})
```


## router/index.ts
```bash
import { createRouter, createWebHistory } from "vue-router";
import Test from '@/views/test.vue'
import Index from '@/views/index.vue'
// 路由信息
const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
  },
  {
    path: "/test",
    name: "test",
    component: Test,
  },
];

// 导出路由
const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
```


##main.ts
```bash
import { createStore } from 'vuex'

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
createApp(App).use(router).use(store).mount('#app')
```


## store/index.ts
```bash
import { createStore } from 'vuex'

// 获取modules文件夹下所有ts文件
const files: any = import.meta.globEager("./modules/*.ts")
let modules: any = {}
Object.keys(files).forEach((key) => {
  // 将获取到结果按照 key:value 的形式存放到modules对象中
  modules[key.replace(/(\.\/|\modules\/|\.ts)/g, '')] = files[key].default
})
console.log('模块',modules)
export default createStore({
  modules
})
```