笔记大全

Vite创建Vue3项目及Vue3使用jsx的方法

更新时间：2023-06-27

前言

在本文中，我们将介绍如何使用 Vite 来创建 Vue 3 项目，并了解如何在 Vue 3 中使用 jsx。Vite 是一个快速、简单且基于原生 ES 模块化的构建工具，它可以很好地支持 Vue 3 的开发和构建。

创建 Vue 3 项目

要使用 Vite 来创建 Vue 3 项目，可以按照以下步骤进行：

确保你已经全局安装了最新版本的 Node.js。
打开终端，并切换到你想要创建项目的目录。
运行以下命令，使用 Vite 创建一个新的 Vue 3 项目：

npx create-vite@latest my-vue3-project --template vue

这将会在当前目录下创建一个名为 "my-vue3-project" 的文件夹，并且将会在其中初始化一个 Vue 3 项目。

配置 Vite

在创建完项目后，你可以在项目的根目录下找到一个名为 "vite.config.js" 的文件，用来配置 Vite 的行为。

你可以在该文件中进行各种配置，例如指定项目的根路径、配置开发服务器等。以下是一些常用的配置选项：

root：指定项目的根路径。
base：指定项目部署的基础路径。
hostname：指定开发服务器的主机名。
port：指定开发服务器的端口号。

import { defineConfig } from 'vite'

export default defineConfig({
  root: './src',
  base: './',
  hostname: 'localhost',
  port: 3000,
})

在 Vue 3 中使用 jsx

Vue 3 支持在组件中使用 jsx，jsx 是一种 JavaScript 的语法扩展，可以方便地描述 UI 结构。

要在 Vue 3 中使用 jsx，你需要：

安装 @vue/babel-plugin-jsx 插件：

npm install @vue/babel-plugin-jsx --save-dev

在项目的根目录下创建一个名为 "babel.config.js" 的文件，并进行以下配置：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
  plugins: [['@vue/babel-plugin-jsx', { mergeProps: false }]],
};

在你的组件中使用 jsx：

import { createVNode } from 'vue'

export default {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <p>This is a JSX component.</p>
      </div>
    )
  }
}

以上就是在 Vue 3 中使用 jsx 的基本步骤。

总结

本文中，我们介绍了如何使用 Vite 来创建 Vue 3 项目，并了解了在 Vue 3 中使用 jsx 的方法。Vite 提供了快速、简单且具有原生 ES 模块化支持的开发环境，非常适合用于 Vue 3 的开发。

同时，通过配置 Vite 和使用 @vue/babel-plugin-jsx 插件，我们可以在 Vue 3 组件中方便地使用 jsx，进一步扩展了我们开发 Vue 3 应用的能力。

c语言编程笔录