从零开始搭建脚手架，打造更快速、更精简的Vue3开发体验

2024-02-18 14:18:24

从零开始搭建Vue3脚手架

背景

随着Vue3的普及，越来越多的项目开始使用Vue3作为开发框架。在创建Vue3项目时，开发人员通常会使用Vue-cli脚手架来快速搭建项目。然而，Vue-cli生成的项目启动速度较慢，并且包含了许多开发者不常用的代码。这使得项目启动和运行效率降低，也增加了维护难度。

为了解决这些问题，本文将介绍如何从零开始搭建一个更快速、更精简的Vue3脚手架。这个脚手架将只包含必要的代码，并且可以根据需要进行自定义。

搭建步骤

1. 初始化项目

首先，我们需要创建一个新的项目文件夹。然后，在项目文件夹中运行以下命令初始化一个新的Vue3项目：

vue create my-project

2. 安装必要的依赖包

初始化项目后，我们需要安装一些必要的依赖包。这些依赖包包括：

npm install vue@3.0.0 vue-router@4.0.0 vuex@4.0.0 axios sass --save

3. 创建脚手架

接下来，我们需要创建脚手架。脚手架是一个Node.js脚本，用于生成新的Vue3项目。我们可以使用以下命令创建脚手架：

mkdir scaffold
cd scaffold
npm init -y

在scaffold目录中，我们需要创建一个package.json文件。package.json文件用于定义脚手架的名称、版本、依赖包等信息。

{
  "name": "my-scaffold",
  "version": "1.0.0",
  "description": "A simple Vue3 scaffold",
  "main": "index.js",
  "scripts": {
    "build": "vue-cli-service build",
    "serve": "vue-cli-service serve"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0",
    "axios": "^0.21.1",
    "sass": "^1.49.9"
  }
}

在package.json文件中，我们需要指定脚手架的名称、版本、、入口文件、脚本命令和依赖包。

4. 创建脚手架入口文件

接下来，我们需要创建脚手架的入口文件。入口文件是一个JavaScript文件，用于生成新的Vue3项目。我们可以使用以下命令创建入口文件：

touch index.js

在index.js文件中，我们需要编写以下代码：

const { spawn } = require('child_process');
const fs = require('fs');

const projectName = process.argv[2];

if (!projectName) {
  console.error('Please specify a project name.');
  process.exit(1);
}

const projectPath = `./${projectName}`;

if (fs.existsSync(projectPath)) {
  console.error(`Project ${projectName} already exists.`);
  process.exit(1);
}

const vueCliCommand = `vue create ${projectName} --preset vue3`;

const childProcess = spawn('npx', [vueCliCommand], {
  cwd: process.cwd(),
  stdio: 'inherit'
});

childProcess.on('exit', (code) => {
  if (code === 0) {
    console.log(`Project ${projectName} created successfully.`);
  } else {
    console.error(`Failed to create project ${projectName}.`);
  }
});