命令行指引的尝试

news2025/7/16 12:27:15

效果

在这里插入图片描述

步骤

首先初始化一个空的项目，然后安装一些依赖

npm init -y
npm install inquirer execa chalk ora

至于这些依赖是干嘛的，如下图所示：
在这里插入图片描述

然后再 package.json 中补充一个 bin

在这里插入图片描述

然后再根目录下新建一个 index.js , 其中的内容如下

#!/usr/bin/env node
import inquirer from 'inquirer'
import chalk from 'chalk'
import ora from 'ora'
import { createProject } from './utils/create.js'

console.log(chalk.cyanBright('\n✨ Welcome to create-vueNew CLI'))

const { projectName, template } = await inquirer.prompt([
  {
    type: 'input',
    name: 'projectName',
    message: 'Project name:',
    default: 'vueNew-app'
  },
  {
    type: 'list',
    name: 'template',
    message: 'Select a template:',
    choices: ['vue', 'vue-ts']
  }
])

await createProject(projectName, template)

createProject 这个工具的内容如下

import { fileURLToPath } from 'url'
import { dirname } from 'path'
import path from 'path' // 确保引入了 path 模块
import ora from 'ora'
import ncp from 'ncp'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

export async function createProject(name, template) {
  const spinner = ora(`Copying ${template} template...`).start()

  const templatePath = path.join(__dirname, `../templates/${template}`)
  const targetPath = path.resolve(process.cwd(), name)

  try {
    // 使用 ncp 来复制模板文件夹
    ncp.ncp(templatePath, targetPath, (err) => {
      if (err) {
        spinner.fail('Failed to copy template')
        console.error(err)
        return
      }

      spinner.succeed('Project created!')
      console.log(`\nNext steps:`)
      console.log(`  cd ${name}`)
      console.log(`  npm install`)
      console.log(`  npm run dev`)
    })
  } catch (err) {
    spinner.fail('Failed to copy template')
    console.error(err)
  }
}