前言两周没发文章了。暂时有事耽搁了。在这里向大家表示深深的歉意。今天我们使用vite2.0+vue3+ts开发一个demo工程。打我们，打开Vite官网（https://cn.vitejs.dev/）。Vite（法语是“quick”的意思，发音为/vit/）是一款全新的前端构建工具，可显着提升前端开发体验。它主要由两部分组成：开发服务器，它提供了基于原生ES模块的丰富内置功能，例如惊人的快速热模块更新（HMR）。一组构建指令，将你的代码与Rollup捆绑在一起，它预先配置为输出优化的生产静态资源。Vite旨在提供开箱即用的配置，而其插件API和JavaScriptAPI带来了高度的可扩展性和完整的类型支持。在这里，我们将Vite与VueCLI进行比较。Vite在开发模式下可以不打包直接运行，使用ES6模块化加载规则；在VueCLI开发模式下，项目必须打包才能运行；Vite基于缓存的热更新；VueCLI基于webpack的热更新；构建项目让我们构建第一个Vite项目。这里我使用Yarn依赖管理工具来创建项目。yarncreate@vitejs/app在命令行输入上面的命令，然后你可能会稍等一下~配置项目名称，选择一个模板项目名称：vite-vue-demo选择模板：vue-ts因为，如果我们使用Vue+Ts开发这里的项目，我们选择vue-ts模板。运行一段时间后，会提示你输入以下命令，你可以一一填写。cdvite-vue-demoyarnyarndev这样我们的构建工程就完成了。项目文件夹概览我们看到以下文件及其文件夹。node_modules---依赖文件夹public---公共文件夹src---项目主文件夹。gitignore---排除git提交配置文件index.html---入口文件package.json---模块描述文件tsconfig.json---ts配置文件vite.config.ts---vite配置文件开发前配置在开发之前，我们需要做以下工作。1、编辑ts配置文件，根据需要配置需要的配置项。CompilerOptions在编译时配置了配置项。include项是包含在配置中生效的路径，exclude正好相反，排除的路径。{"compilerOptions":{"target":"esnext","module":"esnext","strict":true,"jsx":"preserve","importHelpers":true,"moduleResolution":"node",“experimentalDecorators”：true，“skipLibCheck”：true，“esModuleInterop”：true，“allowSyntheticDefaultImports”：true，“sourceMap”：true，“baseUrl”：“.”，“types”：[“vite/client”]，"paths":{"@/*":["src/*"]},"lib":["esnext","dom","dom.iterable","scripthost"]},"include":["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude":["node_modules"]}2、配置vite配置文件。为什么我们需要配置这个文件？因为我们在开发这个demo项目的时候，需要部分引入ElementPlusUI框架。此外，让我们简单了解如何配置Vite。之前我们使用VueCLI3.x创建项目时，配置项目是在根目录下的vue.config.js文件下配置的。该文件应导出包含选项的对象。module.exports={//options...}和vite.config.ts类似。exportdefault{//Configurationoption}因为Vite本身自带Typescript类型，所以可以利用IDE和jsdoc的配合提供智能提示。此外，您可以使用defineConfig辅助函数，这样您就可以在没有jsdoc注释的情况下获得类型提示。在这里，我们这样配置vite.config.ts。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()]})你会发现这里使用了Vue作为vite内置插件介绍。刚才我们说要部分介绍ElementPlusUI框架。我们打开ElementPlusUI部分导入地址：（https://element-plus.gitee.io/#/zh-CN/component/quickstart），发现这里需要配置babel.config.js，我们使用TS，所以我们下意识的改了后缀名以为就可以成功了，结果还是被坑了。于是，采取了这种做法：在vite.config.ts文件中配置：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvitePluginImpfrom"vite-plugin-imp";//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),vitePluginImp({libList:[{libName:'element-plus',style:(name)=>{return`element-plus/lib/theme-chalk/${name}.css`}}]})],server:{port:6061},})vite-plugin-imp一个自动导入组件库样式的vite插件。主工程文件夹src概览下面是初始工程文件目录。assets---静态文件夹components---组件文件夹App.vue---页面文件main.ts---项目入口文件shims-vue.d.ts---这么多类型定义文件（描述文件）我们会文件不一一展示，主要看App.vue、main.ts、shims-vue.d.ts。App.vue
about
最后，您位于App.vue文件中。