从头开始构建 Vue 脚手架工具

前端

2024-01-03 05:23:25

1. 初探脚手架工具

脚手架工具可以帮助前端开发者在项目构建时创建目录、编写初始配置文件等，从而提升开发效率和代码规范性。

目前主流的前端脚手架工具有以下几个：

Vue CLI
Vite
Create React App
Next.js
Nuxt.js

它们都具有以下特点：

创建新项目时，能够快速生成项目目录结构和基础文件。
提供项目构建、打包、测试等命令，方便开发人员进行项目管理。
具有热更新功能，能够在开发过程中实时更新代码，提高开发效率。
支持多种模板和插件，能够满足不同项目的需求。

2. 手写脚手架工具

掌握脚手架工具的工作原理，对于提升开发技能非常有益，我们不妨动手尝试自己创建一个脚手架工具。

首先，我们需要明确搭建 Vue 脚手架工具的目标：

支持初始化项目，生成基本的项目结构和文件。
支持安装 Vue 依赖包。
支持构建和运行项目。

然后，我们开始搭建脚手架工具。

2.1 安装 Rollup

Rollup 是一个 JavaScript 模块打包工具，我们可以用它来构建 Vue 项目。

npm install -g rollup

2.2 创建项目

创建一个新的文件夹，作为脚手架工具的项目文件夹。

mkdir vue-starter
cd vue-starter

2.3 初始化项目

在项目文件夹中，使用 Rollup 初始化一个新的项目。

rollup init

这将在项目中创建一个 rollup.config.js 文件。

2.4 安装 Vue 依赖包

使用 npm 安装 Vue 依赖包。

npm install vue

2.5 创建项目结构

创建一个 src 文件夹，作为项目源代码文件夹。

在 src 文件夹中，创建一个 main.js 文件，作为项目入口文件。

// src/main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

在 src 文件夹中，创建一个 App.vue 文件，作为项目根组件。

// src/App.vue
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

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

在 src 文件夹中，创建一个 index.html 文件，作为项目入口 HTML 文件。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

2.6 配置 Rollup

在 rollup.config.js 文件中，配置 Rollup。

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

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