"jsx": "preserve"和"jsxImportSource": "vue"的作用
时间: 2023-09-06 10:13:03 浏览: 118
"jsx": "preserve"是在 TypeScript 中的一种编译选项。当设置为"preserve"时,TypeScript 编译器将保留 JSX 代码不做任何更改,不会将其转换为 JavaScript。这对于需要直接在浏览器中运行 JSX 的情况很有用。
"jsxImportSource": "vue"是在 Vue.js 中使用 JSX 时的配置选项。当设置为"vue"时,Vue.js 编译器将会将 JSX 转换为 Vue 的渲染函数调用,以实现在 Vue 组件中使用 JSX 的功能。这样你就可以在 Vue 组件中使用类似于 React 的 JSX 语法来编写模板。
需要注意的是,以上两个选项分别用于不同的场景和技术,"jsx": "preserve"适用于 TypeScript 中直接在浏览器中运行 JSX,而"jsxImportSource": "vue"适用于 Vue.js 中使用 JSX 编写模板。
相关问题
vue项目 "jsx": "preserve",
Vue是一款流行的前端JavaScript框架,用于构建用户界面。它可以帮助你更轻松地构建交互式Web应用程序。Vue有很多特性,比如组件化、响应式数据绑定、指令、路由、状态管理等等。如果你想使用Vue构建一个项目,你需要使用Vue CLI来初始化一个项目。在项目中你可以使用Vue的语法来编写组件,Vue将帮助你管理组件的状态和生命周期,并且让你的组件之间更容易通信。关于"jsx": "preserve"这个配置项,它是用来支持在Vue组件中使用JSX语法的,如果你不需要使用JSX,可以将其设置为false或者删除这个配置项。
初始化vue3和vite项目
以下是初始化Vue3和Vite项目的步骤:
1. 首先,确保你已经安装了最新版本的Node.js和npm包管理器。
2. 打开终端并输入以下命令来安装Vue CLI :
```
npm install -g @vue/cli
```
3. 创建一个新的Vue项目:
```
vue create my-project
```
4. 在创建项目时,选择手动配置并选择Vue 3作为默认的Vue版本。
5. 安装Vite:
```
npm install -g vite
```
6. 在项目根目录下创建一个vite.config.ts文件,并添加以下内容:
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})
```
7. 在项目根目录下创建一个tsconfig.json文件,并添加以下内容:
```json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["vite/client"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules", "dist"]
}
```
8. 运行以下命令来启动Vite服务器:
```
vite
```
9. 打开浏览器并访问http://localhost:3000,你应该能够看到一个Vue 3应用程序正在运行。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)