【亲测免费】 Vue.js 单文件组件(SFC)构建工具：Rollup-plugin-vue 使用指南

1. 项目介绍

Rollup-plugin-vue 是一个 Rollup.js 插件，专为 Vue.js 应用程序设计，能够无缝集成 Vue.js 的单文件组件(SFC)。它提供了编译 Vue SFC、处理样式以及输出独立可重用组件的能力。通过该插件，开发者能够在 Rollup 构建过程中轻松地管理和打包 Vue.js 项目。

2. 项目快速启动

安装依赖

首先确保已经安装了 Node.js 和 Rollup。然后，在你的项目目录中，运行以下命令安装必要的包：

npm init -y
npm install --save-dev rollup rollup-plugin-vue vue-template-compiler

Rollup 配置文件

创建 rollup.config.js 文件，并添加以下内容：

// rollup.config.js
import vue from 'rollup-plugin-vue';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    vue()
  ]
};

创建组件

在 src 目录下创建一个名为 MyComponent.vue 的文件，内容如下：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

执行构建

在命令行中运行 rollup -c，这将会生成 dist/bundle.js 文件，包含编译后的 Vue 组件。

3. 应用案例和最佳实践

• 独立样式 若要提取 Vue 组件的样式为单独的 CSS 文件，可以在 Rollup 配置中设置 css: true：

  import vue from 'rollup-plugin-vue';
  
  export default {
    ...
    plugins: [
      vue({
        css: true // 提取CSS至单独文件
      })
    ]
    ...
  };
  

• 自定义模板编译 通过提供一个回调函数，您可以自定义模板的编译方式：

  plugins: [
    vue({
      template: (options) => ({
        ...options,
        isProduction: process.env.NODE_ENV === 'production'
      })
    })
  ]
  

• 按需加载组件 使用 Rollup 的动态导入功能，可以实现按需加载组件，以减少打包体积。

• 优化生产环境 在生产环境中，考虑设置 process.env.NODE_ENV = 'production' 以便开启 Vue.js 的生产模式优化。

4. 典型生态项目

• rollup-plugin-postcss: 处理 CSS 预处理器如 SCSS 或 Less。
• rollup-plugin-node-resolve: 解析 Node.js 模块。
• rollup-plugin-babel: 使用 Babel 转换 ES2015+ 到 ES5 以兼容低版本浏览器。
• rollup-plugin-vue2-template-compiler: 对于 Vue 2.x 版本的模板编译。

遵循这些步骤，您将能够使用 Rollup-plugin-vue 构建 Vue.js 应用程序。对于更复杂的应用场景，参考官方文档以获取更详细的信息。