vite学习详解( 二 ) _vue

然后在vite..js中引入，配置到[9]中。
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({server: {port: 6666},plugins: [vue()]})
接着我们在根目录创建views文件夹，然后在里面创建一个App.vue
{{ text }}.test {cursor: pointer;color: #0e0;}
然后老规矩index.js中引入
import { createApp } from 'vue'import './index.css';import App from './views/App.vue';createApp(App).mount('#app')
然后老规矩在index.js中引入vue组件入口。
最后别忘了index.html中创建个id为app的元素。
vite study
ok，让我们在终端运行下指令npm run dev
不过这里还是遇到了问题，同时配置.port和vue插件时会找不到页面，可能刚没关好，端口还在。。换成port:7777就正常了。。。

文章插图
img-5
配置[10]
官方还是很推荐vue3 +的。
老规矩如果嫌麻烦可以直接去看线上的demo[11]，不过学习嘛，最好还是都过一遍。
有一点我们需要知道，vite仅提供.ts文件的加载识别处理，而类型判断需要IDE或者通过tsc等构建过程实现。
可能我说的不是很对。。。。所以还是贴下原文。。。如果说错了麻烦大佬评论里说下，谢谢~
img-6
其他就不多说了，直接来配置
先来安装下我们需要的东西，既然用到了那自然是得先安装它才行，而vue-tsc刚上面提到了一些，是一个包裹了tsc[12]的工具，专门用来识别处理vue[13]文件的。
npm install typescript -Dnpm install vue-tsc -D
安装完之后我们来配置下.json文件

{"compilerOptions": {"target": "ESNext","useDefineForClassFields": true,"module": "ESNext","moduleResolution": "Node","strict": true,"jsx": "preserve","resolveJsonModule": true,"isolatedModules": true,"esModuleInterop": true,"lib": ["ESNext", "DOM"],"skipLibCheck": true,"noEmit": true},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }]}

-
jsx-mode
[28][29]
这个要单独说下，这是 3.0开始支持的一个特性。
简单地说，你的项目可能有多个文件夹，这些文件夹有自己的想法，所以需要做不同的配置来构建单独的，而如果没有使用这个特性，你只能是给每个文件夹加上.json文件，并且执行多次tsc才行。
由于你可能需要不同的配置针对不同的文件夹，但是配置文件只有一个的时候并不能满足这个需求，当然你可以给每个文件夹配置一个自己的conf文件，但这依旧有一个问题就是tsc并不能帮你给所有的配置文件都处理，有些地方需要你去手动处理，watch也并不能一次性监听所有的配置文件，这也就意味着你也得手动添加才行。
针对上面的问题，3.0开始支持了，能有效的帮你拆分你的项目，分别执行对应的配置。
path：指向对应文件夹中的配置文件，如果只写了文件夹名字，比如./src,那就只会读对应的.json，而如果你的配置文件是自定义名字，请务必加上文件名。
然后我们创建.node.json文件

 {"compilerOptions": {"composite": true,"module": "ESNext","moduleResolution": "Node","allowSyntheticDefaultImports": true},"include": ["vite.config.ts"]}

然后我们修改下vite..js为vite..js 。
接着我们新建src目录，将我们的App.vue、index.css迁移到src下。然后新建main.ts文件作为入口。