uni-app 脚手架工具开发

章节介绍

脚手架工具是现代前端开发的重要工具之一，它可以帮助开发者快速初始化项目、生成代码模板、管理配置等，大大提高开发效率。在 uni-app 开发中，构建一个符合项目需求的脚手架工具尤为重要，因为它可以标准化项目结构、统一开发规范、加速项目启动。本章节将详细介绍 uni-app 脚手架工具开发的完整流程，从设计到实现，帮助开发者掌握脚手架工具开发的系统方法。

核心知识点

1. 命令行工具

命令行工具是脚手架的核心，它负责接收用户输入的命令和参数，并执行相应的操作。在开发命令行工具时，需要考虑以下几个方面：

1.1 命令行参数解析

命令行参数解析是命令行工具的基础，它需要：

支持不同的命令和子命令
处理命令行参数和选项
提供帮助信息和使用说明
支持命令行自动补全

1.2 命令行交互

命令行交互可以提升用户体验，它包括：

交互式问答
选择菜单
进度显示
彩色输出

1.3 命令行工具框架

选择合适的命令行工具框架可以提高开发效率，常用的框架包括：

Commander.js：轻量级命令行工具框架
Inquirer.js：交互式命令行工具
Chalk：命令行彩色输出
Ora：命令行加载动画

2. 模板生成

模板生成是脚手架工具的核心功能之一，它负责根据模板生成项目代码。在实现模板生成功能时，需要考虑以下几个方面：

2.1 模板系统

模板系统是模板生成的基础，它需要：

支持模板变量替换
支持条件判断和循环
支持模板继承和包含
支持不同的模板格式

2.2 模板管理

模板管理包括：

内置模板管理
远程模板拉取
模板版本控制
模板自定义

2.3 代码生成

代码生成是模板系统的最终目标，它需要：

根据模板生成代码文件
保持代码格式和缩进
处理文件路径和命名
支持批量生成

3. 配置管理

配置管理是脚手架工具的重要组成部分，它负责管理项目配置和脚手架配置。在实现配置管理功能时，需要考虑以下几个方面：

3.1 配置文件

配置文件是配置管理的基础，它需要：

支持不同的配置格式（JSON、YAML、JS）
提供默认配置
支持配置覆盖和合并
支持环境特定配置

3.2 配置加载

配置加载包括：

从不同位置加载配置
配置优先级管理
配置验证和默认值
配置热重载

3.3 配置存储

配置存储包括：

本地配置存储
全局配置和项目配置
配置加密和安全
配置同步和共享

4. 项目管理

项目管理是脚手架工具的高级功能，它负责管理项目的生命周期。在实现项目管理功能时，需要考虑以下几个方面：

4.1 项目初始化

项目初始化是脚手架工具的核心功能，它需要：

创建项目目录结构
生成项目配置文件
初始化版本控制
安装依赖

4.2 项目结构

项目结构是项目管理的基础，它需要：

符合 uni-app 项目结构规范
支持不同类型的项目模板
提供可扩展的目录结构
支持自定义项目结构

4.3 依赖管理

依赖管理包括：

自动安装依赖
依赖版本管理
依赖冲突解决
依赖分析和优化

实用案例：开发项目脚手架工具

1. 项目初始化

首先，我们需要初始化一个脚手架工具项目。这里我们使用 npm 来创建项目：

# 创建脚手架项目目录
mkdir uni-cli
cd uni-cli

# 初始化 npm 项目
npm init -y

# 安装必要的依赖
npm install commander inquirer chalk ora fs-extra handlebars download-git-repo

# 安装开发依赖
npm install --save-dev @types/node typescript ts-node

2. 项目结构

创建合理的项目结构，便于代码的组织和管理：

├── bin/                       # 可执行文件目录
│   └── uni-cli.js             # 命令行入口文件
├── src/                       # 源代码目录
│   ├── commands/              # 命令实现
│   │   ├── init.js            # 初始化命令
│   │   ├── create.js          # 创建命令
│   │   └── config.js          # 配置命令
│   ├── templates/             # 内置模板
│   │   ├── default/           # 默认模板
│   │   └── empty/             # 空模板
│   ├── utils/                 # 工具函数
│   │   ├── template.js        # 模板处理
│   │   ├── config.js          # 配置处理
│   │   └── logger.js          # 日志处理
│   └── index.js               # 主入口文件
├── package.json               # 项目配置
├── tsconfig.json              # TypeScript 配置
└── README.md                  # 项目说明

3. 命令行入口

创建命令行入口文件，定义命令行工具的基本结构：

bin/uni-cli.js


const { program } = require('commander');
const { version } = require('../package.json');
const initCommand = require('../src/commands/init');
const createCommand = require('../src/commands/create');
const configCommand = require('../src/commands/config');

// 定义版本
program.version(version, '-v, --version', '输出版本号');

// 定义初始化命令
program
  .command('init <name>')
  .description('初始化一个 uni-app 项目')
  .option('-t, --template <template>', '指定模板名称', 'default')
  .option('-f, --force', '强制覆盖已有目录', false)
  .action(initCommand);

// 定义创建命令
program
  .command('create <name>')
  .description('创建一个 uni-app 页面或组件')
  .option('-t, --type <type>', '创建类型：page 或 component', 'page')
  .option('-p, --path <path>', '创建路径', '')
  .action(createCommand);

// 定义配置命令
program
  .command('config [key] [value]')
  .description('配置脚手架工具')
  .option('-g, --global', '设置全局配置', false)
  .option('-l, --list', '列出配置', false)
  .option('-d, --delete', '删除配置', false)
  .action(configCommand);

// 解析命令行参数
program.parse(process.argv);

// 处理默认行为
if (!program.args.length) {
  program.outputHelp();
}

4. 命令实现

4.1 初始化命令

实现初始化命令，用于创建新的 uni-app 项目：

src/commands/init.js

const fs = require('fs-extra');
const path = require('path');
const inquirer = require('inquirer');
const chalk = require('chalk');
const ora = require('ora');
const { downloadTemplate } = require('../utils/template');
const { getConfig } = require('../utils/config');

module.exports = async (name, options) => {
  const { template, force } = options;
  const projectPath = path.resolve(process.cwd(), name);
  
  // 检查目录是否存在
  if (fs.existsSync(projectPath) && !force) {
    console.log(chalk.red(`目录 ${name} 已存在，请使用 --force 选项强制覆盖`));
    return;
  }
  
  // 如果目录存在且使用了 --force 选项，删除目录
  if (fs.existsSync(projectPath) && force) {
    console.log(chalk.yellow(`正在删除目录 ${name}...`));
    fs.removeSync(projectPath);
  }
  
  // 创建目录
  console.log(chalk.green(`正在创建目录 ${name}...`));
  fs.mkdirSync(projectPath, { recursive: true });
  
  // 下载模板
  const spinner = ora(`正在下载模板 ${template}...`).start();
  try {
    await downloadTemplate(template, projectPath);
    spinner.succeed(`模板 ${template} 下载成功`);
  } catch (error) {
    spinner.fail(`模板 ${template} 下载失败`);
    console.log(chalk.red(error.message));
    fs.removeSync(projectPath);
    return;
  }
  
  // 交互式配置
  const answers = await inquirer.prompt([
    {
      type: 'input',
      name: 'description',
      message: '项目描述:',
      default: ''
    },
    {
      type: 'input',
      name: 'author',
      message: '作者:',
      default: ''
    },
    {
      type: 'list',
      name: 'uniVersion',
      message: 'uni-app 版本:',
      choices: ['latest', '2.0', '1.0'],
      default: 'latest'
    },
    {
      type: 'confirm',
      name: 'installDeps',
      message: '是否自动安装依赖?',
      default: true
    }
  ]);
  
  // 更新 package.json
  const packageJsonPath = path.join(projectPath, 'package.json');
  if (fs.existsSync(packageJsonPath)) {
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
    packageJson.name = name;
    packageJson.description = answers.description;
    packageJson.author = answers.author;
    
    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
    console.log(chalk.green('package.json 更新成功'));
  }
  
  // 安装依赖
  if (answers.installDeps) {
    const installSpinner = ora('正在安装依赖...').start();
    try {
      const { execSync } = require('child_process');
      execSync('npm install', { cwd: projectPath, stdio: 'ignore' });
      installSpinner.succeed('依赖安装成功');
    } catch (error) {
      installSpinner.fail('依赖安装失败');
      console.log(chalk.red(error.message));
    }
  }
  
  // 输出完成信息
  console.log(chalk.green('\n项目初始化完成!'));
  console.log(chalk.green(`\n进入项目目录:`));
  console.log(chalk.cyan(`  cd ${name}`));
  if (!answers.installDeps) {
    console.log(chalk.green(`\n安装依赖:`));
    console.log(chalk.cyan(`  npm install`));
  }
  console.log(chalk.green(`\n启动开发服务器:`));
  console.log(chalk.cyan(`  npm run dev`));
};

4.2 创建命令

实现创建命令，用于生成页面或组件模板：

src/commands/create.js

const fs = require('fs-extra');
const path = require('path');
const inquirer = require('inquirer');
const chalk = require('chalk');
const { generateTemplate } = require('../utils/template');

module.exports = async (name, options) => {
  const { type, path: customPath } = options;
  const projectRoot = process.cwd();
  
  // 验证是否在 uni-app 项目中
  if (!fs.existsSync(path.join(projectRoot, 'package.json'))) {
    console.log(chalk.red('错误: 请在 uni-app 项目目录中执行此命令'));
    return;
  }
  
  // 确定创建路径
  let targetPath;
  if (customPath) {
    targetPath = path.resolve(projectRoot, customPath, name);
  } else {
    if (type === 'page') {
      targetPath = path.resolve(projectRoot, 'pages', name);
    } else if (type === 'component') {
      targetPath = path.resolve(projectRoot, 'components', name);
    } else {
      console.log(chalk.red('错误: 无效的创建类型，只支持 page 或 component'));
      return;
    }
  }
  
  // 检查路径是否存在
  if (fs.existsSync(targetPath)) {
    console.log(chalk.red(`错误: 路径 ${targetPath} 已存在`));
    return;
  }
  
  // 创建目录
  fs.mkdirSync(targetPath, { recursive: true });
  
  // 生成模板
  if (type === 'page') {
    // 生成页面模板
    await generatePageTemplate(name, targetPath);
  } else if (type === 'component') {
    // 生成组件模板
    await generateComponentTemplate(name, targetPath);
  }
  
  // 输出完成信息
  console.log(chalk.green(`\n${type} 创建完成!`));
  console.log(chalk.green(`路径: ${targetPath}`));
};

// 生成页面模板
async function generatePageTemplate(name, targetPath) {
  // 生成.vue文件
  const vueContent = `
<template>
  <view class="${name.toLowerCase()}">
    <text>${name} 页面</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  onLoad() {
    console.log('${name} 页面加载');
  },
  methods: {
  }
};
</script>

<style scoped>
.${name.toLowerCase()} {
  padding: 20px;
}
</style>
  `.trim();
  
  fs.writeFileSync(path.join(targetPath, 'index.vue'), vueContent);
  
  // 生成配置文件
  const jsonContent = `{
  "navigationBarTitleText": "${name}"
}`;
  
  fs.writeFileSync(path.join(targetPath, 'main.json'), jsonContent);
  
  console.log(chalk.green(`页面 ${name} 创建成功`));
}

// 生成组件模板
async function generateComponentTemplate(name, targetPath) {
  // 生成.vue文件
  const vueContent = `
<template>
  <view class="${name.toLowerCase()}">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: '${name}',
  props: {
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style scoped>
.${name.toLowerCase()} {
}
</style>
  `.trim();
  
  fs.writeFileSync(path.join(targetPath, `${name}.vue`), vueContent);
  
  console.log(chalk.green(`组件 ${name} 创建成功`));
}

4.3 配置命令

实现配置命令，用于管理脚手架配置：

src/commands/config.js

const chalk = require('chalk');
const { getConfig, setConfig, deleteConfig, listConfig } = require('../utils/config');

module.exports = async (key, value, options) => {
  const { global, list, delete: deleteOption } = options;
  
  if (list) {
    // 列出配置
    const config = listConfig(global);
    console.log(chalk.green('配置列表:'));
    console.log(JSON.stringify(config, null, 2));
    return;
  }
  
  if (deleteOption && key) {
    // 删除配置
    deleteConfig(key, global);
    console.log(chalk.green(`配置 ${key} 删除成功`));
    return;
  }
  
  if (key && value) {
    // 设置配置
    setConfig(key, value, global);
    console.log(chalk.green(`配置 ${key} 设置为 ${value} 成功`));
    return;
  }
  
  if (key) {
    // 获取配置
    const configValue = getConfig(key, global);
    if (configValue !== undefined) {
      console.log(chalk.green(`${key}: ${configValue}`));
    } else {
      console.log(chalk.yellow(`${key} 配置不存在`));
    }
    return;
  }
  
  // 显示帮助
  console.log(chalk.yellow('用法:'));
  console.log(chalk.cyan('  uni-cli config [key] [value]'));
  console.log(chalk.cyan('  uni-cli config --list'));
  console.log(chalk.cyan('  uni-cli config --delete [key]'));
};

5. 工具函数

5.1 模板处理

实现模板处理工具，用于下载和生成模板：

src/utils/template.js

const fs = require('fs-extra');
const path = require('path');
const download = require('download-git-repo');
const handlebars = require('handlebars');

// 下载模板
async function downloadTemplate(template, targetPath) {
  return new Promise((resolve, reject) => {
    // 内置模板
    const builtInTemplates = {
      default: path.join(__dirname, '../templates/default'),
      empty: path.join(__dirname, '../templates/empty')
    };
    
    // 检查是否是内置模板
    if (builtInTemplates[template]) {
      // 复制内置模板
      try {
        fs.copySync(builtInTemplates[template], targetPath);
        resolve();
      } catch (error) {
        reject(error);
      }
    } else {
      // 下载远程模板
      download(template, targetPath, { clone: false }, (error) => {
        if (error) {
          reject(error);
        } else {
          resolve();
        }
      });
    }
  });
}

// 生成模板
function generateTemplate(templatePath, targetPath, data = {}) {
  // 读取模板文件
  const templateContent = fs.readFileSync(templatePath, 'utf8');
  
  // 编译模板
  const compiledTemplate = handlebars.compile(templateContent);
  
  // 渲染模板
  const renderedContent = compiledTemplate(data);
  
  // 写入目标文件
  fs.writeFileSync(targetPath, renderedContent);
}

module.exports = {
  downloadTemplate,
  generateTemplate
};

5.2 配置处理

实现配置处理工具，用于管理脚手架配置：

src/utils/config.js

const fs = require('fs-extra');
const path = require('path');

// 配置文件路径
const getConfigPath = (global = false) => {
  if (global) {
    // 全局配置路径
    return path.join(process.env.HOME || process.env.USERPROFILE, '.uni-cli', 'config.json');
  } else {
    // 项目配置路径
    return path.join(process.cwd(), '.uni-cli.json');
  }
};

// 读取配置
const readConfig = (global = false) => {
  const configPath = getConfigPath(global);
  if (fs.existsSync(configPath)) {
    try {
      return JSON.parse(fs.readFileSync(configPath, 'utf8'));
    } catch (error) {
      return {};
    }
  }
  return {};
};

// 写入配置
const writeConfig = (config, global = false) => {
  const configPath = getConfigPath(global);
  const configDir = path.dirname(configPath);
  
  // 确保目录存在
  if (!fs.existsSync(configDir)) {
    fs.mkdirSync(configDir, { recursive: true });
  }
  
  // 写入配置
  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
};

// 获取配置
const getConfig = (key, global = false) => {
  const config = readConfig(global);
  return config[key];
};

// 设置配置
const setConfig = (key, value, global = false) => {
  const config = readConfig(global);
  config[key] = value;
  writeConfig(config, global);
};

// 删除配置
const deleteConfig = (key, global = false) => {
  const config = readConfig(global);
  delete config[key];
  writeConfig(config, global);
};

// 列出配置
const listConfig = (global = false) => {
  return readConfig(global);
};

module.exports = {
  getConfig,
  setConfig,
  deleteConfig,
  listConfig
};

5.3 日志处理

实现日志处理工具，用于统一日志输出：

src/utils/logger.js

const chalk = require('chalk');

// 日志级别
const LOG_LEVELS = {
  info: 'info',
  success: 'success',
  warning: 'warning',
  error: 'error'
};

// 日志颜色
const LOG_COLORS = {
  info: chalk.blue,
  success: chalk.green,
  warning: chalk.yellow,
  error: chalk.red
};

// 基础日志方法
function log(level, message) {
  const color = LOG_COLORS[level] || chalk.white;
  console.log(color(`[${level.toUpperCase()}] ${message}`));
}

// 导出日志方法
module.exports = {
  info: (message) => log(LOG_LEVELS.info, message),
  success: (message) => log(LOG_LEVELS.success, message),
  warning: (message) => log(LOG_LEVELS.warning, message),
  error: (message) => log(LOG_LEVELS.error, message)
};

6. 内置模板

创建默认模板，用于初始化项目：

src/templates/default/package.json

{
  "name": "{{name}}",
  "version": "1.0.0",
  "description": "{{description}}",
  "main": "main.js",
  "scripts": {
    "dev": "uni-app dev",
    "build:mp-weixin": "uni-app build --platform mp-weixin",
    "build:mp-alipay": "uni-app build --platform mp-alipay",
    "build:mp-baidu": "uni-app build --platform mp-baidu",
    "build:mp-toutiao": "uni-app build --platform mp-toutiao",
    "build:h5": "uni-app build --platform h5",
    "build:app-plus": "uni-app build --platform app-plus"
  },
  "dependencies": {
    "@dcloudio/uni-app": "^2.0.0",
    "@dcloudio/uni-ui": "^1.0.0"
  },
  "devDependencies": {
    "@dcloudio/types": "^2.0.0",
    "@dcloudio/uni-automator": "^2.0.0",
    "@dcloudio/uni-cli-shared": "^2.0.0",
    "@dcloudio/uni-compiler": "^2.0.0",
    "@dcloudio/uni-migration": "^2.0.0",
    "@dcloudio/uni-template-compiler": "^2.0.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "author": "{{author}}",
  "license": "MIT"
}

src/templates/default/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

src/templates/default/App.vue

<template>
  <view class="app">
    <uni-nav-bar title="{{title}}" left-text="返回" left-icon="left" @click-left="onClickLeft"></uni-nav-bar>
    <view class="content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app'
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
/* 全局样式 */
* {
  box-sizing: border-box;
}

.app {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20px;
}
</style>

src/templates/default/pages/index/index.vue

<template>
  <view class="index">
    <view class="logo">
      <image src="/static/logo.png" mode="aspectFit"></image>
    </view>
    <view class="text-area">
      <text class="title">Hello uni-app</text>
    </view>
    <view class="button-area">
      <uni-button type="primary" @click="navigateToAbout">关于</uni-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  onLoad() {
    console.log('首页加载')
  },
  methods: {
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    }
  }
}
</script>

<style scoped>
.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.logo image {
  width: 100%;
  height: 100%;
}

.text-area {
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.button-area {
  width: 100%;
  max-width: 400rpx;
}
</style>

src/templates/default/pages/index/main.json

{
  "navigationBarTitleText": "首页"
}

src/templates/default/pages/about/about.vue

<template>
  <view class="about">
    <view class="content">
      <text class="title">关于我们</text>
      <text class="desc">这是一个使用 uni-app 脚手架创建的项目</text>
      <text class="version">版本: 1.0.0</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  onLoad() {
    console.log('关于页面加载')
  }
}
</script>

<style scoped>
.about {
  min-height: 100vh;
  padding: 20px;
}

.content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
  display: block;
}

.version {
  font-size: 24rpx;
  color: #999;
  display: block;
}
</style>

src/templates/default/pages/about/main.json

{
  "navigationBarTitleText": "关于"
}

src/templates/default/manifest.json

{
  "name": "{{name}}",
  "appid": "",
  "description": "{{description}}",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": true,
  "uniStatistics": {
    "enable": false
  },
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3,
    "splashscreen": {
      "alwaysShowBeforeRender": true,
      "waiting": true,
      "autoclose": true,
      "delay": 0
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },
  "mp-alipay": {
    "usingComponents": true
  },
  "mp-baidu": {
    "usingComponents": true
  },
  "mp-toutiao": {
    "usingComponents": true
  },
  "mp-qq": {
    "usingComponents": true
  },
  "mp-360": {
    "usingComponents": true
  },
  "web": {
    "title": "{{name}}",
    "uniStatistics": {
      "enable": false
    },
    "usingComponents": true
  },
  "h5": {
    "title": "{{name}}",
    "usingComponents": true
  }
}

src/templates/default/pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "{{name}}",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  }
}

7. 配置 package.json

更新 package.json 文件，添加 bin 字段，使其成为可执行命令：

package.json

{
  "name": "uni-cli",
  "version": "1.0.0",
  "description": "uni-app 脚手架工具",
  "main": "src/index.js",
  "bin": {
    "uni-cli": "bin/uni-cli.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "uni-app",
    "cli",
    "scaffold"
  ],
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "chalk": "^4.1.2",
    "commander": "^8.3.0",
    "download-git-repo": "^3.0.2",
    "fs-extra": "^10.0.0",
    "handlebars": "^4.7.7",
    "inquirer": "^8.2.0",
    "ora": "^5.4.1"
  },
  "devDependencies": {
    "@types/node": "^16.11.10",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.2"
  }
}

8. 测试脚手架工具

8.1 本地链接

在脚手架项目目录中执行以下命令，将脚手架链接到全局：

npm link

8.2 测试初始化命令

# 初始化一个新项目
uni-cli init my-project

# 使用指定模板初始化项目
uni-cli init my-project --template default

# 强制覆盖已有目录
uni-cli init my-project --force

8.3 测试创建命令

在 uni-app 项目目录中执行以下命令：

# 创建页面
uni-cli create MyPage --type page

# 创建组件
uni-cli create MyComponent --type component

# 指定创建路径
uni-cli create MyPage --type page --path custom/path

8.4 测试配置命令

# 设置配置
uni-cli config template default

# 获取配置
uni-cli config template

# 删除配置
uni-cli config --delete template

# 列出配置
uni-cli config --list

# 设置全局配置
uni-cli config --global template default

实现效果

通过以上代码实现，我们可以获得以下效果：

完整的脚手架工具：创建了一个包含初始化、创建、配置等功能的完整脚手架工具。
命令行交互：支持交互式问答、选择菜单、进度显示等命令行交互功能。
模板系统：实现了内置模板和远程模板的支持，可以根据不同需求生成项目结构。
配置管理：支持全局配置和项目配置的管理，方便用户自定义脚手架行为。
项目初始化：可以快速初始化 uni-app 项目，自动创建目录结构、生成配置文件、安装依赖等。
代码生成：可以根据模板生成页面和组件代码，提高开发效率。

代码优化建议

1. 性能优化

模板缓存：对于频繁使用的模板，可以添加缓存机制，减少重复下载和编译的时间。
并行处理：对于可以并行执行的任务，如文件复制、依赖安装等，可以使用并行处理提高速度。
懒加载：对于不常用的功能模块，可以使用懒加载减少初始加载时间。
错误处理：添加完善的错误处理机制，避免因错误导致整个脚手架崩溃。

2. 可维护性优化

模块化：将代码分解为更小的模块，提高代码的可维护性和可测试性。
文档：为代码添加详细的注释和文档，便于后续维护和扩展。
测试：添加单元测试和集成测试，确保代码的质量和稳定性。
规范：使用一致的代码规范和命名约定，提高代码的可读性。

3. 功能扩展

插件系统：添加插件系统，允许用户扩展脚手架的功能。
多模板支持：支持更多类型的模板，如不同行业、不同功能的项目模板。
国际化：添加国际化支持，适应不同语言的用户。
更新检查：添加版本更新检查，提醒用户及时更新脚手架工具。

4. 用户体验优化

命令行提示：提供更详细的命令行提示和帮助信息。
进度显示：为耗时操作添加进度显示，提高用户体验。
彩色输出：使用彩色输出区分不同类型的信息，提高可读性。
错误提示：提供更友好、更详细的错误提示，帮助用户快速定位问题。

常见问题与解决方案

1. 模板下载失败

问题：模板下载失败，可能是网络问题或模板地址错误。

解决方案：

检查网络连接是否正常。
验证模板地址是否正确。
添加模板下载失败的重试机制。
提供离线模板选项，当网络不可用时使用本地模板。

2. 依赖安装失败

问题：依赖安装失败，可能是网络问题或依赖版本冲突。

解决方案：

检查网络连接是否正常。
提供手动安装依赖的选项。
添加依赖版本锁定，避免版本冲突。
支持使用不同的包管理器，如 npm、yarn、pnpm 等。

3. 命令行参数解析错误

问题：命令行参数解析错误，可能是参数格式不正确或命令不存在。

解决方案：

提供更详细的命令行帮助信息。
添加命令行参数验证，提前发现并提示错误。
支持命令行自动补全，减少输入错误。
对常见错误提供明确的错误提示和解决方案。

4. 配置文件读写失败

问题：配置文件读写失败，可能是权限问题或文件系统错误。

解决方案：

检查文件系统权限是否正确。
添加配置文件读写失败的错误处理和降级方案。
提供默认配置，当配置文件不存在时使用默认值。
支持配置文件的自动修复和备份。

总结

本章节详细介绍了 uni-app 脚手架工具开发的完整流程，包括命令行工具设计、模板生成系统、配置管理等核心知识点，并通过开发项目脚手架工具的实用案例，帮助开发者掌握脚手架工具开发的系统方法。

脚手架工具开发是一个系统工程，需要综合考虑多方面因素，包括命令行交互、模板系统、配置管理、项目管理等。通过本章节的学习，开发者应该能够：

理解脚手架工具的基本原理和开发流程
掌握命令行工具的设计和实现方法
实现模板生成和配置管理功能
开发符合项目需求的脚手架工具
解决脚手架工具开发过程中可能遇到的常见问题

在实际开发中，开发者可以根据项目的具体需求和特点，选择合适的技术栈和开发方法，构建功能强大、用户友好的脚手架工具，提高开发效率，标准化项目结构，统一开发规范，为团队开发和项目管理提供有力支持。