一、项目用到的组件官网地址

1.Ant Design Vue :

https://2x.antdv.com/index-cn

众所周知，Ant Design 作为一门设计语言面世，经历过多年的迭代和积累，它对 UI 的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是 React 开发者手中的神兵利器。希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。

ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，组件的 html 结构和 css 样式也保持一致，真正做到了样式 0 修改，组件 API 也尽量保持了一致。

2.vitejs

https://www.vitejs.net/

什么是vitejs: 是一种新型前端构建工具，能够显著提升前端开发体验，它主要由两部分组成：

• 一个开发服务器，它利用 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，预配置输出高度优化的静态资源用于生产。

Vite 意在提供更开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并完全支持类型化。

3.Vuex 4.x

https://next.vuex.vuejs.org/zh/index.html

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 库 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

4.Vue Router 4.x

https://next.router.vuejs.org/zh/

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

二、项目搭建

1.使用脚手架创建

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

2.代码结构

3.配置文件

#pagckage.json
{
 "scripts": {
  "dev": "vite", // 默认启动开发服务器
  "build": "vite build", // 为生产环境构建打包
  "serve": "vite preview" // 本地预览生产构建产物
  }
}

4.配置项目在启动时自动在浏览器中打开应用程序

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 server:{
  open: true
  }
})

5.运行启动项目

yarn dev

6.启动后