Vue Rollup Boilerplate

Overview

Vue Rollup Boilerplate is a simple setup that combines Rollup, vue-loader, and esbuild for quick prototyping. It provides support for Vue 2 and offers an alternative option for Vue 3 with Vite. The boilerplate also includes additional features such as using unplugin-vue2-script-setup to bring <script setup> to Vue 2, Rollup Plugin Visualizer to visualize and analyze the bundle, and various components using the atomic design pattern.

Features

• Rollup: A bundler that packages JavaScript modules into a single file.
• PostCSS: A plugin for processing CSS with JavaScript.
• ESBuild: A fast JavaScript bundler and minifier.
• Prettier: An opinionated code formatter for JavaScript.
• Components: Atomic design components including atoms, molecules, organisms, templates, and pages.
• Makefile and PNPM: Tools for automating tasks and managing packages with PNPM as package manager.

Prerequisites

• Make sure you have Node.js installed on your system.

Steps

1. Clone the repository:

git clone <repository_url>

2. Change into the project directory:

cd <project_directory>

3. Install the dependencies using PNPM:

pnpm install

Summary

Vue Rollup Boilerplate is a convenient setup for Vue.js development that combines Rollup, vue-loader, and esbuild. It offers support for Vue 2 and provides additional features such as the ability to bring <script setup> to Vue 2 using unplugin-vue2-script-setup and visualizing the bundle with Rollup Plugin Visualizer. The boilerplate also includes a variety of atomic design components and utilizes Makefile and PNPM for task automation and package management. Overall, Vue Rollup Boilerplate is a useful starting point for quick prototyping in Vue.js.