Vite + TS + Antdv 从零开始搭建后台管理系统

Vite + TypeScript+ Ant Design Vue 从零开始搭建后台管理系统（一）

1. Vite 项目初始化配置

vite 官方中文文档：cn.vitejs.dev/guide/

• 安装 vite

$ npm init @vitejs/app

• 初始化 vite 项目模板：选择模板为 vue-ts

$ npm init @vitejs/app shanglv-vite-antdv -- --template vue

• 模板安装好后，运行环境

  • 进入安装目录：cd shanglv-vite-antdv
  • 安装依赖：npm install
  • 启动：npm run dev

• 浏览器打开查看效果：http://localhost:3000/

2. Vuex 配置

Vuex 官方文档：next.vuex.vuejs.org/

• 安装 Vuex，目前 4.x 还没有中文文档，可参考 3.x 中文文档一起阅读

$ npm install vuex@next --save

• 在 src 目录下创建 store/index.ts

import { InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import type { App } from "vue";

// InjectionKey 将store安装到Vue应用程序时提供类型，将类型传递InjectionKey给useStore方法

// 手动声明 state 类型
export interface State {
  count: number;
}

// 定义注入类型
const key: InjectionKey<Store<State>> = Symbol();

const store =
  createStore <
  State >
  {
    state() {
      return {
        count: 0,
      };
    },
    mutations: {
      increment(state: State) {
        state.count++;
      },
    },
  };

// 将类型注入useStore
// 以后项目中引用的均为自定义的这个，而不是vuex默认导出的useStore
export function useStore() {
  return baseUseStore(key);
}

export function setupStore(app: App<Element>) {
  app.use(store, key);
}

export default store;

• main.ts 修改

import { createApp } from "vue";
import { setupStore } from "./store"; // 状态管理
import App from "./App.vue";

const app = createApp(App);

setupStore(app); // 引入状态管理

app.mount("#app");

• components/HelloWorld.vue 修改

<template>
  <h1