Vite创建Vue3项目及Vue3使用jsx详解

Vite创建Vue3项目及Vue3使用jsx详解

1. Vite创建Vue3项目

Vite是一个基于ES module的开发服务器和构建工具，它能够快速地搭建项目、实现热更新等功能。下面是使用Vite创建Vue3项目的详细步骤：

步骤1：安装Vite

npm install vite -g

步骤2：创建项目

vite create my-project --template vue-ts

上述命令会创建一个名为my-project的Vue3 TypeScript项目。

步骤3：启动项目

cd my-project
npm install
npm run dev

上述命令会在本机的localhost:3000启动项目，并启动热更新。

2. Vue3使用jsx详解

Vue3支持jsx语法，下面是使用jsx语法的示例代码：

<template>
  <div>
    <h1>使用jsx</h1>
    <button onClick={() => handleClick()}>点击</button>
    {
      show ? <p>显示的内容</p> : <p>隐藏的内容</p>
    }
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      show: false,
    });

    const handleClick = () => {
      state.show = !state.show;
    };

    return {
      ...state,
      handleClick,
    };
  },
});
</script>

上述代码的作用是：

• 定义一个名为show的响应式变量，默认值为false。
• 定义一个名为handleClick的函数，在函数内部修改show的值。
• 在模板中使用jsx语法，根据show的值显示不同的内容。

另外一个使用jsx的示例代码：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

const Hello = (props: { message: string }) => {
  return <div>{props.message}</div>
}

export default defineComponent({
  setup() {
    return {
      message: 'Hello world'
    }
  },
});
</script>

上述代码的作用是：

• 定义了一个名为Hello的函数组件，函数接受一个名为message的props，并返回一个包含message的div元素。
• 在模板中使用了Hello组件，并将message属性设置为"Hello world"。

以上就是Vite创建Vue3项目及Vue3使用jsx的完整攻略，希望能对您有所帮助。