使用Vite2TypeScript4Vue3技术栈，如何入手开发项目

　　前言
　　今天，我们使用Vite2.0+Vue3+TS来试玩一下，开发一个demo项目。
　　实战
　　我们，打开Vite官方网站(https://cn.vitejs.dev/)。
　　Vite (法语意为 ＂快速的＂，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
　　一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
　　一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。
　　Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
　　这里，我们将Vite与VueCLI做一下对比。
　　Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则；
　　VueCLI开发模式下必须对项目打包才可以运行；
　　Vite基于缓存的热更新；
　　VueCLI基于webpack的热更新；
　　搭建项目
　　我们来搭建第一个 Vite 项目，我这里使用Yarn依赖管理工具进行创建项目。
　　yarn create @vitejs/app
　　在命令行键入以上命令，然后你可能会等待一会儿~
　　依次配置Project name、Select a template
　　Project name: vite-vue-demo
　　Select a template: vue-ts
　　因为，我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。一顿操作之后，会提示你键入以下命令，依次填入即可。
　　cd vite-vue-demo
　　yarn
　　yarn dev
　　这样我们搭建项目就完成了。
　　项目文件夹一览
　　我们会看到以下文件及其文件夹。
　　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项目，需要局部引入Element Plus UI框架，另外，让我们简单了解下怎么配置Vite。在之前我们使用VueCLI3.x创建项目时配置项目是在根目录下vue.config.js文件下进行配置。这个文件应该导出一个包含了选项的对象。
　　module.exports = {
　　// 选项...
　　}
　　而vite.config.ts也与其相似。
　　export default {
　　// 配置选项
　　}
　　因为 Vite 本身附带 Typescript 类型，所以可以通过 IDE 和 jsdoc 的配合来进行智能提示，另外你可以使用defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示。这里呢，我们这样配置vite.config.ts。
　　import { defineConfig } from ＂vite＂
　　import vue from ＂@vitejs/plugin-vue＂
　　// https://vitejs.dev/config/
　　export default defineConfig({
　　plugins: [vue()]
　　})
　　你会发现，Vue在这里被当做vite的一个内置插件引入进来。刚才，我们说要局部引入Element Plus UI框架，我们打开Element Plus UI局部引入网址：(https://element-plus.gitee.io/#/zh-CN/component/quickstart)，发现这里需要配置babel.config.js，而我们使用的是TS，所以我们下意识的更改下后缀名觉得就可以成功了，不过，我反正被坑了。于是，采取了这种办法：在vite.config.ts文件中这样配置：
　　import { defineConfig } from ＂vite＂
　　import vue from ＂@vitejs/plugin-vue＂
　　import vitePluginImp from ＂vite-plugin-imp＂;
　　// https://vitejs.dev/config/
　　export default defineConfig({
　　plugins: [vue(),
　　vitePluginImp({
　　libList: [
　　{
　　libName: ＂element-plus＂,
　　style: (name) => {
　　return`element-plus/lib/theme-chalk/${name}.css`
　　}
　　}
　　]
　　})],
　　server: {
　　port: 6061
　　},
　　})
　　…
　　作者：Vam的金豆之路
　　篇幅有限更多请见扩展链接：http://www.mark-to-win.com/tutorial/50736.html