从零搭建Vite2+Vue+Antd项目

Vite是什么

Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的前端构建工具。你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。

Vite2.0 的发布带来了对低版本浏览器的构建支持，使其可以正式投入项目生产。
初始化项目

npm 6.x

npm init @vitejs/app my-vue-app --template vue-ts

npm 7+, 需要额外的双横线：

npm init @vitejs/app my-vue-app – --template vue-ts
复制代码
本人选择了 Vue3 + TypeScript 的模板初始化（更多模板），模板载入完成后，按提示进入项目目录、载入依赖并尝试运行项目。

less-CSS预处理器
npm i less -D
复制代码
vue-router

载入vue-router4.x

npm i vue-router@4
复制代码

在 src 目录下新建 router/index.ts ，写入路由配置。

import {createRouter, createWebHashHistory, RouteRecordRaw} from ‘vue-router’;
import Home from ‘…/views/Home.vue’;

const routes: Array = [ // 加入类型声明可以约束配置项，提升书写体验
{
path: ‘/’,
name: ‘Home’,
component: Home,
}
];

const router = createRouter({
history: createWebHashHistory(),
routes,
});

export default router;
复制代码

在 main.ts 中引入路由配置

import {createApp} from ‘vue’;
import router from ‘./router’; // <—
import App from ‘./App.vue’;

createApp(App)
.use(router) // <—
.mount(‘#app’);
复制代码

在 src 目录下新建 views/Home.vue ，写入首页想要呈现的内容。

Home: Hello Vue 3 + TypeScript + Vite

复制代码

App.vue 此时可以作为 reouter-view 的载体，例如修改为以下内容。

Home

复制代码

运行项目，Home 页已经呈现出来。

vuex

载入vuex4.x

npm i vuex@4
复制代码

在 src 目录下新建 store/index.ts ，写入状态管理器配置。

import {InjectionKey} from ‘vue’;
import {createStore, Store} from ‘vuex’;
import user, {State as UserState} from ‘./user’;

// 将各模块的State类型汇总
export interface