然后在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就正常了 。。。
![vite学习详解](http://img.gansulong.com/230619/2159211056-0.jpg)
文章插图
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文件作为入口 。
- vite 学习
- package.json文件变更
- 1.常见的构建工具
- 详解:古代的盗墓贼是如何盗墓的?
- 问题一: 机器学习的基本流程
- 深度学习中偏差和方差的区别
- 「算法学习」:贪心算法找零问题
- 九 OpenCV学习笔记——图像轮廓(下)
- [人工智能-深度学习-74]:环境
- 【Spire