vue3 + vite + ts + antdv 搭建后台管理基础框架

Posted 2023-03-19

参考技术A

最近公司官网需要一个后台管理系统，一直在看vue3，但是都没有在实际项目中使用过，正好就借此机会来踩踩坑。

点击这里查看源码

Vite中文网 (vitejs.cn)
Vite 需要 Node.js 版本 >= 12.0.0

启动项目的第一感觉就是一个字 快 ，还没反应过来就已经跑起来了

起步 | Vue Router (vuejs.org)

安装 | Vuex (vuejs.org)

起步 | Ant Design Vue (antdv.com)

ant-design-vue/index.ts 内容

【Vue3+Vite+TS】1.0 项目搭建

参考技术A 搭建vite项目的命令。

我的目前是6.14.15，升级一下：

目前是8.3.0

新建vite项目命令行：

输入y即可。
安装完毕：

用vscode打开：

运行node初始化：

安装完成：

vite项目默认端口3000，修改方式如下：

修改vite.config.ts

启动命令：

安装路由和element-plus：

安装完成：

新建src\router\index.ts

新建src\views\Home\index.ts

修改src\router\index.ts

修改main.ts

修改src\App.vue

运行项目:

引用element-ui，去官网抄：

修改src\views\Home\index.vue

因为我们要用到sass（全新版本叫scss），需要安装一下sass
：

安装完成：

修改src\App.vue

element-plus版本将图标单独打包， 需要单独引入
)：

修改src\main.ts

可以看到打印了很多对象名称。

新建src\utils\index.ts

修改src\main.ts

使用,修改src\App.vue

为了更方便使用，可以优化如下：
修改src\App.vue

这样src\views\Home\index.vue可以调整为：