vue3+vite+ts+vbenAdmin包含从ts介绍和搭建vite搭建自定义搭建到vbenAdmin

vue3+vite+ts+vbenAdmin

写在前面

本章内容比较多，分成多个模块标题学习本章之前，建议先看前面两章，本文主要是了解这几个东西到底是啥，体验过后，是真的比vue/cli快了太多了

vue指令复习： https://blog.youkuaiyun.com/qq_44501608/article/details/136557622

vue3.0入门结构语法关键字生命周期：https://blog.youkuaiyun.com/qq_44501608/article/details/136559287

TypeScript学习（必须）：https://blog.youkuaiyun.com/qq_44501608/article/details/136593139

vite（区别于vue/cli）

尤雨溪

官网：https://www.vitejs.net/

介绍：

Vue-cli 一直是 Vue 2 默认官方脚手架工具，Vue-cli 基于 Webpack 开发。Vue 3 发布后，尤大同时发布了 Vite ，那么 Vue 3 同时有两个前端打包工具 Vite 和 Vue CLI，那么他们俩应该怎么选呢？

Vue cli 在服务启动之前，要把所有代码打包成 Bundle 再启动服务。这就是为什么启动一些大型项目时，特别慢的原因。这一点上 Vite 做了大幅改善。

Vite 的特点

Vite 是 Vue 团队开发的新一代前端开发与构建工具，Vite 不是基于 Webpack 开发的，他为了解决服务启动慢的问题，Vite 通过一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

• 依赖：大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式。Vite 会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
• 源码：通常包含一些并非直接是 JavaScript 的文件，需要转换，时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

综上，这就是为什么 Vite 启动快的原因。

Vite 是基于原生 ES6 Modules，在生产环境下打包使用的是 Rollup。vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。所以两者在生产环境下都是基于源代码文件打包。但在开发环境中，两者有所不同。Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。所以 Vite 因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验及其愉快

尤大总结：

1. 在开发过程中，Vite 是一个开发服务器，根据浏览器的要求编译源文件。无需捆绑，编译后真正做到按需使用。未修改的文件会返回304，所以浏览器根本就不会要求。这就是它启动快、保持快的原因。
2. Vite 支持热模块替换，这和 "简单的重载页面 "有本质的区别，在DX方面是天壤之别。Vue组件和CSS HMR是开箱即用的支持，第三方框架可以利用HMR API。
3. Vite支持一些webpack启发的功能，比如从js中导入’.css’文件（a la css-loader），基于fs的相对路径引用资产（a la file-loader m在构建过程中只需指定’-base’就能自动处理最终的公共部署路径）。
4. Vite通过esbuild支持.(t|j)sx?文件，开箱即用，速度快得惊人，所以即使是TS转码，HMR也是字面上的即时性。
5. Vite使用Rollup进行生产构建，内部配置与开发服务器功能一致。生产构建的输出是一个传统的静态资产目录，可以部署在任何地方（并且可以被polyfilled以支持旧的borwsers）。
6. Vite的核心也是可扩展的（配置/插件格式待定）–你可以通过添加Koa中间件（用于开发）+Rollup aplugin（用于构建）来添加对自定义文件转换的支持

个人理解：

很快，新，支持ts ，用它

使用

搭建第一个Vite项目：

npm init vite@latest my-vue-app -- --template vue

选择y 继续

没有啥其他的依赖，需要手动添加

也可以使用这个ts的这个模板

推荐

npm create vite learn-vite --template vue-ts

以上推荐搭建没有包含vuex或者Pinia和vuerouter

所以我手动搭建了一个可以直接跑到，可以去体验下vite的速度

https://gitee.com/luckkiven/learn-vite.git

这个router.ts 有报错，看起来挺恶心，不影响使用

下面几个技术栈都提供了UI和成型的项目就不在一一介绍了

本git地址初学者体验，很多配置不完善，实际使用建议使用vbenAdmin有完整文档

vbenAdmin-推荐

官网：https://doc.vvbin.cn/

# 拉取代码
git clone https://github.com/vbenjs/vue-vben-admin-doc

# 安装依赖
yarn

# 运行项目
yarn dev

ant Design-vue

https://www.antdv.com/docs/vue/introduce-cn/

按上面vite推荐创建ts项目，然后

npm install ant-design-vue@4.x --save

以下了解即可

ant Design-PC

基于react

https://ant-design.antgroup.com/index-cn

ant Design-mobile

基于react

https://mobile.ant.design/zh