@vitejs/plugin-vue用法

@vitejs/plugin-vue 是一个 Vite 的插件，用于支持 Vue 单文件组件的解析和编译。使用方法如下：

1. 安装插件

在项目根目录下执行以下命令安装 @vitejs/plugin-vue：

npm install -D @vitejs/plugin-vue

2. 配置 Vite

在 vite.config.js 中添加以下配置：

// vite.config.js
const { createVuePlugin } = require('@vitejs/plugin-vue')

module.exports = {
  plugins: [
    createVuePlugin(/*options*/)
  ]
}

其中，createVuePlugin() 方法可以接收一个选项对象作为参数，用于配置插件的行为。

3. 编写 Vue 单文件组件

在你的项目中创建一个 .vue 文件，例如：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

4. 运行 Vite

在命令行中执行以下命令启动 Vite：

vite

Vite 会自动解析和编译 .vue 文件，并启动开发服务器。在浏览器中访问 http://localhost:3000 即可预览你的应用程序。