Vue 3 SFC 转换工具——unplugin-vue 使用教程

Vue 3 SFC 转换工具——unplugin-vue 使用教程

unplugin-vue ✨ Transform Vue 3 SFC to JavaScript. Supports Vite, esbuild, Rollup, Webpack and more. 项目地址: https://gitcode.com/gh_mirrors/un/unplugin-vue

1. 项目介绍

unplugin-vue 是一个用于将 Vue 3 单文件组件（Single File Component，SFC）转换为 JavaScript 的工具。它支持多种构建工具，如 Vite、Webpack、Vue CLI、Rollup 和 esbuild 等。unplugin-vue 提供了对 <script setup> 和宏命令的支持，并具备热模块替换（HMR）功能。

2. 项目快速启动

以下是一个快速启动 unplugin-vue 的指南：

首先，确保你已经安装了 Node.js。然后，在你的项目中执行以下命令：

npm install unplugin-vue vue

在 vite 项目中，你可以在 vite.config.js 文件中配置 unplugin-vue：

import { defineConfig } from 'vite'
import vue from 'unplugin-vue/vite'

export default defineConfig({
  plugins: [
    vue()
  ]
})

对于 webpack 项目，你需要在 webpack.config.js 中添加如下配置：

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

接着，在你的 Vue 组件中使用 <script setup>：

<script setup>
// 你的组件逻辑
</script>

<template>
  <div>你好，世界！</div>
</template>

最后，运行你的构建命令，如 npm run dev，即可启动项目。

3. 应用案例和最佳实践

使用 unplugin-vue 可以轻松地在 Vue 3 项目中实现 <script setup> 的语法糖。以下是一个简单的应用案例：

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

在项目中使用宏命令可以扩展 Vue 的编译时能力，例如，创建自定义的指令或组件。

4. 典型生态项目

以下是几个与 unplugin-vue 相关的典型生态项目：

• Vue Macros：探索和扩展更多宏命令和语法糖到 Vue。
• Vue DevTools：浏览器开发者工具扩展，用于调试 Vue.js 应用程序。
• Element Plus：基于 Vue 3 的前端 UI 库。
• vue-components-lib-seed：Vue 3 组件库的模板。

通过这些生态项目，可以进一步扩展和增强 unplugin-vue 的功能。

unplugin-vue ✨ Transform Vue 3 SFC to JavaScript. Supports Vite, esbuild, Rollup, Webpack and more. 项目地址: https://gitcode.com/gh_mirrors/un/unplugin-vue