一步一步打造属于自己的脚手架

最新推荐文章于 2022-07-19 00:05:37 发布
最新推荐文章于 2022-07-19 00:05:37 发布
阅读量199 收藏
点赞数
分类专栏： node 文章标签： node.js 脚手架 一步一步实现脚手架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lydxwj/article/details/117607728
版权

预备知识

  • 本地安装卸载包

    在项目根目录下运行下面命令

    # 安装
npm link

# 卸载
npm unlink

  • 命令行命令指定运行文件

    package.json文件中bin字段指定

项目依赖包

  • chalk 打印出彩色字

  • commander 完整的 node.js 命令行解决方案

  • download-git-repo 下载仓库代码

  • handlebars 编译文件

  • inquirer 交互式命令行界面

  • ora 加载动画

  • update-notifier 更新通知

  • figlet 炫酷文字

    字体示例

支持的命令

da --help
da -version
da update
da add
da delete
da list
da create
da site add
da site delete
da site list

命令详情介绍以及项目地址点击传送门

动起来

1. 新建文件夹da-cli
2. 打开命令行工具，进入文件夹，运行初始化仓库
cd ./da-cli
npm init -y
3. 安装依赖
npm i chalk commander download-git-repo handlebars inquirer ora update-notifier figlet -S
  • handlebars 不是一定要用，可以使用node读写文件，本项目使用是多介绍一种修改文件内容方案，项目中会使用两种：原生node读写文件、使用handlebars修改文件内容。
  • figlet 不是一定要用，主要为了炫酷，装一下
  • ora 不是一定要用，为了体验优化
4. 修改package.json

  • 脚手架会有多个命令，每个命令会有对应的处理逻辑，一般是会分模块写，这样增加可读性、方便维护

  • 命令执行文件，可以由命令根据已经配置的一个文件自己匹配文件，也可以自己注册

    例如： da init和da add两个命令（da是自定义的，必须和bin中键保持一致）

    匹配文件模式：（自己编的模式）

    // package.json文件
{
    ...
    "bin": {
        "da": "./bin/da.js"
    },
    ...
}

    ./bin/da.js文件中不会写 da init和da add两个命令处理逻辑

    当运行da init时，会去bin文件夹下面找da-init.js文件(也可以在bin中增加da-init键指定执行文件)

    当运行da add时，会去bin文件夹下面找da-add.js文件

    自己注册模式：（自己编的模式）

    // package.json文件
{
    ...
    "bin": {
        "da": "./bin/index.js"
    }
    ...
}

    ./bin/index.js文件中会写 da init和da add两个命令处理逻辑

    本项目采用自己注册模式

  • package.json内容

    {
  "name": "da-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "da": "./bin/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
5. 新建文件夹da-cli/bin和da-cli/lib，新建文件da-cli/bin/index.js
6. 编写da-cli/bin/index.js，首先处理兼容问题
#!/usr/bin/env node
  • 惊叹、有病，环境是node方便记忆
7.实现da -version，编写da-cli/bin/index.js
#!/usr/bin/env node

const program = require('commander')

program.name('da').version(require('../package').version, '-v -version', 'output the current version').usage('<command> [options]')

program.parse(process.argv)

  • program.parse(process.argv)必须有这个，一直放到最后一行用于解析命令行参数

  • <>包裹的参数一般是必传的

  • .name('da')可以去除

  • 此时可以使用以下命令(执行命令前，根项目下运行npm link，这样可以全局使用)

    da -v
da -version

da -h
da -help
8. 实现da update

新建编写da-cli/lib/update/update.js

const updateNotifier = require('update-notifier')
const chalk = require('chalk')
const pkg = require('../../package.json')

const notifier = updateNotifier({
	pkg,
	updateCheckInterval: 1000,
})

function updateVer() {
	if (notifier.update) {
		console.log(`New version ${chalk.green(notifier.update.latest)} found, please update`)
		notifier.notify()
	} else {
		console.log('There is no updatable version')
	}
}

module.exports = updateVer

编写da-cli/bin/index.js

#!/usr/bin/env node

const program = require('commander')

program.name('da').version(require('../package').version, '-v -version', 'output the current version').usage('<command> [options]')

// update
program
	.command('update')
  .alias('u')
	.description('update version')
	.action(() => {
		updateVer()
	})

program.parse(process.argv)
9. 增加配置文件，方便下面命令实现

新增文件夹da-cli/config

增加da-cli/config/codebase.json

// 存放模板仓库
{
  "loading": {
    "tplOwner": "lydxwj", // 项目仓库所有者
    "tplName": "vue-loading", // 项目仓库名
    "site": "gitee" // 项目仓库地址类型
  }
}

增加da-cli/config/config.json

{
  "sites": { // 全部项目仓库地址类型，支持用户自定义扩展
    "github": {
      "name": "github",
      "value": "github",
      "short": "github",
      "url": "github:{tplOwner}/{tplName}"
    },
    "gitlab": {
      "name": "gitlab",
      "value": "gitlab",
      "short": "gitlab",
      "url": "gitlab:{tplOwner}/{tplName}"
    },
    "gitee": {
      "name": "gitee",
      "value": "gitee",
      "short": "gitee",
      "url": "direct:https://gitee.com/{tplOwner}/{tplName}"
    }
  },
  "frames": { // 创建项目框架选项，以及对应url，不支持用户自定义扩展
    "vue": {
      "url": "direct:https://gitee.com/lydxwj/vue-create"
    }
  }
}
10. 实现da add（增加模板）

新增文件夹da-cli/lib/template

增加da-cli/lib/template/add.js

const inquirer = require('inquirer')
const chalk = require('chalk')
const fs = require('fs')
// 现有模板，用于判断是否重复添加和新增后的数据拼接
const codeBase = require(`${__dirname}/../../config/codebase`)
// 用于生成模板URL地址类型选择
const sites = require(`${__dirname}/../../config/config`).sites

// 生成模板URL地址类型
const sitesChoices = [];
Object.keys(sites).forEach(item => {
  sitesChoices.push(sites[item]);
})
function add() {
  // 交互式命令
  let question = [
    {
      name: "name",
      type: 'input',
      message: "请输入模板名称(英文字母)",
      validate (val) {
        if (val === '') {
          return 'Name is required!'
        } else if (!/^[a-zA-Z]+$/.test(val)) {
          return 'It can only contain English letters!'
        } else if (codeBase[val]) {
          return 'Template has already existed!'
        } else {
          return true
        }
      }
    },
    {
      type: 'list',
      message: '请选择模板仓库地址类型:',
      name: 'site',
      choices: sitesChoices,
    },
    {
      name: "tplOwner",
      type: 'input',
      message: "请输入仓库所属",
      validate (val) {
        if (val === '') return 'The tplOwner is required!'
        return true
      }
    },
    {
      name: "tplName",
      type: 'input',
      message: "请输入仓库名",
      validate (val) {
        if (val === '') return 'The tplName is required!'
        return true
      }
    }
  ]
  
  inquirer
    .prompt(question).then(answers => {
      let { name, tplOwner, tplName, site } = answers;
      // 拼接增加新的模板
      codeBase[name] = {
        tplOwner,
        tplName,
        site
      };
      // 写文件，更新模板
      fs.writeFile(`${__dirname}/../../config/codebase.json`, JSON.stringify(codeBase, null, 2), 'utf-8', err => {
        if (err) {
          console.log(chalk.red('Error\n'))
          console.log(err)
          return
        }
        console.log('\n')
        console.log(chalk.green('Added successfully!\n'))
        console.log(chalk.grey('The latest template list is: \n'))
        // 更新成功并打印最新的模板列表
        Object.keys(codeBase).forEach(item => {
          console.log(chalk.green('   ' + item + ':  \n'));
          console.log('     仓库地址类型:' + sites[codeBase[item].site].name + ' \n');
          console.log('     仓库所属:' + codeBase[item].tplOwner + ' \n');
          console.log('     仓库名:' + codeBase[item].tplName + ' \n');
        })
        console.log('\n')
      })
    })
}
module.exports = add

编写da-cli/bin/index.js

...
const tplAdd = require('../lib/template/add')

...
// add a new template
program
  .command('add')
  .description('add a new template')
  .alias('a')
  .action(() => {
    tplAdd()
  })
...
11. 实现da delete（删除模板）

本命令的实现和上一个十分类似，只是把变量增加键值对变成删除键

增加da-cli/lib/template/delete.js

const inquirer = require('inquirer')
const chalk = require('chalk')
const fs = require('fs')
const codeBase = require(`${__dirname}/../../config/codebase`)
const sites = require(`${__dirname}/../../config/config`).sites
function tplDelete() {
  let question = [{
    name: "name",
    message: "请输入要删除的模板名称",
    validate(val) {
      if (val === '') {
        return 'Name is required!'
      } else if (!codeBase[val]) {
        return 'Template does not exist!'
      } else {
        return true
      }
    }
  }]
  
  inquirer
    .prompt(question).then(answers => {
      let {
        name
      } = answers;
      delete codeBase[name]
      fs.writeFile(`${__dirname}/../../config/codebase.json`, JSON.stringify(codeBase, null, 2), 'utf-8', err => {
        if (err) {
          console.log(chalk.red('Error\n'))
          console.log(err)
          return
        }
        console.log('\n')
        console.log(chalk.green('Deleted successfully!\n'))
        console.log(chalk.grey('The latest template list is: \n'))
        Object.keys(codeBase).forEach(item => {
          console.log(chalk.green('   ' + item + ':  \n'));
          console.log('     仓库地址类型:' + sites[codeBase[item].site].name + ' \n');
          console.log('     仓库所属:' + codeBase[item].tplOwner + ' \n');
          console.log('     仓库名:' + codeBase[item].tplName + ' \n');
        })
        console.log('\n')
      })
    })
}

module.exports = tplDelete

编写da-cli/bin/index.js

...
const tplDelete = require('../lib/template/delete')

...
// delete a template
program
  .command('delete')
  .description('delete a template')
  .alias('d')
  .action(() => {
    tplDelete()
  })
...
12. 实现da list（模板列表）

此功能在增加和删除命令中已经实现

增加da-cli/lib/template/list.js

const chalk = require('chalk')
const codeBase = require(`${__dirname}/../../config/codebase`)
const sites = require(`${__dirname}/../../config/config`).sites
function tplList() {
  Object.keys(codeBase).forEach(item => {
    console.log(chalk.green('   ' + item + ':  \n'));
    console.log('     仓库地址类型:' + sites[codeBase[item].site].name + ' \n');
    console.log('     仓库所属:' + codeBase[item].tplOwner + ' \n');
    console.log('     仓库名:' + codeBase[item].tplName + ' \n');
  })
}
module.exports = tplList

编写da-cli/bin/index.js

...
const tplList = require('../lib/template/list')

...
// list all the templates
program
  .command('list')
  .description('list all the templates')
  .alias('l')
  .action(() => {
    tplList()
  })
...
13. 实现da init（初始化项目）

有了模板，现在就是用起来

增加da-cli/lib/template/init.js

const program = require('commander')
const chalk = require('chalk')
const ora = require('ora')
const download = require('download-git-repo')
const inquirer = require('inquirer')
const path = require('path')
const fs = require('fs')
const codeBase = require(`${__dirname}/../../config/codebase`)
const sites = require(`${__dirname}/../../config/config`).sites

const promptList = [
  {
    type: 'input',
    message: '请输入项目简介',
    name: 'description',
    default: '项目简介'
  },
  {
    type: 'input',
    message: '请输入项目版本',
    name: 'version',
    default: '1.0.0'
  }
]
// 读写文件，修改package的name，description，version
function setProjectDescription(projectName, options) {
  const packagePath = `${projectName}/package.json`
  const packageJson = fs.readFileSync(packagePath, 'utf-8')
  const packageResult = JSON.stringify(Object.assign({}, JSON.parse(packageJson), options), null, 2)
  fs.writeFileSync(packagePath, packageResult)
}
function tplInit(templateName, projectName) {
  // 判断模板是否存在
  if (!codeBase[templateName]) {
    console.log(chalk.red('\n Template name does not exit! \n '))
    return;
  }
  if (!projectName) {
    console.log(chalk.red('\n Project name should not be empty! \n '))
    return program.help();
  }
  if (program.args.length < 2) return program.help()
  // 判断是否已经存在这个文件夹，存在则报错（不判断会造成仓库代码下载不成功）
  try {
    const stat = fs.statSync(path.resolve('./', projectName));
    if (stat.isDirectory()) {
      console.log(chalk.red('\n The folder already exists! Please change the project name! \n '))
      return;
    };
  } catch (err) {}
  const tplObj = codeBase[templateName];
  if (!sites[tplObj.site]) {
    console.log(chalk.red('\n Code base address type does not exist! \n '))
    return;
  }
  // 拼接仓库地址
  let url = sites[tplObj.site].url;
  url = url.replace('{tplOwner}', tplObj.tplOwner);
  url = url.replace('{tplName}', tplObj.tplName);
  const spinner = ora("Downloading...");
  inquirer.prompt(
    promptList
  ).then(answers => {
    console.log(chalk.white('\n Start generating... \n'))
    spinner.start()
    // 下载仓库代码
    download(
      url,
      projectName,
      {
        clone: url.startsWith('direct:') ? true : false,
      },
      err => {
        if (err) {
          spinner.fail()
          console.log(chalk.red(`Generation failed. ${err}`))
          return
        }
        const { description, version } = answers
        setProjectDescription(projectName, { name: projectName, description, version })
        spinner.succeed()
        console.log(chalk.cyan('\n Generation completed!'))
        console.log(chalk.cyan('\n To get started'))
        console.log(chalk.cyan(`\n    cd ${projectName}`))
        console.log(chalk.cyan(`\n    npm install \n`))
      }
    )
  });
}
module.exports = tplInit

编写da-cli/bin/index.js

...
const tplInit = require('../lib/template/init')

...
// generate a new project from a template
program
  .command('init')
  .arguments('<templateName> <projectName>')
  .description('generate a new project from a template', {
    templateName: 'existing template name',
    projectName: 'folder that does not exist'
  })
  .alias('i')
  .action((templateName, projectName) => {
    tplInit(templateName, projectName)
  })
...
14. 实现da site list（URL地址类型列表），da site add（URL地址类型增加），da site delete（URL地址类型删除）

因为上面已经实现了类似的，这里就一次搞定三个

新建文件夹da-cli/lib/site

增加da-cli/lib/site/list.js

const chalk = require('chalk')
const sites = require(`${__dirname}/../../config/config`).sites
function siteList() {
  Object.keys(sites).forEach(item => {
    console.log(chalk.green('   ' + item + ':  \n'));
    console.log('     仓库地址类型名:' + sites[item].name + ' \n');
    console.log('     仓库地址URL:' + sites[item].url + ' \n');
  })
  console.log('\n')
}
module.exports = siteList

增加da-cli/lib/site/add.js

const chalk = require('chalk')
const inquirer = require('inquirer')
const fs = require('fs')
const configJson = require(`${__dirname}/../../config/config`)
const sites = configJson.sites
function siteAdd() {
  let question = [
    {
      name: "siteName",
      type: 'input',
      message: "请输入仓库地址类型名",
      validate (val) {
        if (val === '') {
          return 'siteName is required!'
        } else {
          return true
        }
      }
    },
    {
      name: "siteKey",
      type: 'input',
      message: "请输入存储仓库地址类型的键（key）",
      validate (val) {
        if (val === '') return 'siteKey is required!'
        if (sites[val]) return 'siteKey has already existed!'
        if (!/^[a-zA-Z]+$/.test(val)) {
          return 'It can only contain English letters!'
        }
        return true
      }
    },
    {
      name: "siteUrl",
      type: 'input',
      message: "请输入仓库地址URL",
      suffix: '例如：https://my.sitecode.com',
      validate (val) {
        if (val === '') return 'The siteUrl is required!'
        if (!/(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(val)) return 'Please enter the correct URL!'
        return true
      }
    }
  ]
  inquirer.prompt(question).then(answers => {
    let { siteName, siteKey, siteUrl } = answers;
    const newSite = {
      name: siteName,
      value: siteKey,
      short: siteName,
      url: 'direct:' + siteUrl + '/{tplOwner}/{tplName}.git'
    }
    sites[siteKey] = newSite
    fs.writeFile(`${__dirname}/../../config/config.json`, JSON.stringify({ ...configJson, sites }, null, 2), 'utf-8', err => {
      if (err) {
        console.log(chalk.red('Error\n'))
        console.log(err)
        return
      }
      console.log('\n')
      console.log(chalk.green('Added successfully!\n'))
      console.log(chalk.grey('The latest sites list is: \n'))
      Object.keys(sites).forEach(item => {
        console.log(chalk.green('   ' + item + ':  \n'));
        console.log('     仓库地址类型名:' + sites[item].name + ' \n');
        console.log('     仓库地址URL:' + sites[item].url + ' \n');
      })
      console.log('\n')
    })
  })
}
module.exports = siteAdd

增加da-cli/lib/site/delete.js

const chalk = require('chalk')
const inquirer = require('inquirer')
const fs = require('fs')
const configJson = require(`${__dirname}/../../config/config`)
const sites = configJson.sites
function siteDelete() {
  let question = [
    {
      name: "siteKey",
      type: 'input',
      message: "请输入要删除的存储仓库地址类型键（key）",
      validate (val) {
        if (val === '') {
          return 'siteKey is required!'
        } else if (!sites[val]) {
          return 'siteKey does not exist!'
        } else if (val == 'github' || val == 'gitlab' || val == 'gitee') {
          return 'no permission!'
        }
        return true
      }
    },
  ]
  inquirer.prompt(question).then(answers => {
    let { siteKey } = answers;
    delete sites[siteKey]
    fs.writeFile(`${__dirname}/../../config/config.json`, JSON.stringify({ ...configJson, sites }, null, 2), 'utf-8', err => {
      if (err) {
        console.log(chalk.red('Error\n'))
        console.log(err)
        return
      }
      console.log('\n')
      console.log(chalk.green('Deleted successfully!\n'))
      console.log(chalk.grey('The latest sites list is: \n'))
      Object.keys(sites).forEach(item => {
        console.log(chalk.green('   ' + item + ':  \n'));
        console.log('     仓库地址类型名:' + sites[item].name + ' \n');
        console.log('     仓库地址URL:' + sites[item].url + ' \n');
      })
      console.log('\n')
    })
  })
}
module.exports = siteDelete

编写da-cli/bin/index.js

...
const siteList = require('../lib/site/list')
const siteAdd = require('../lib/site/add')
const siteDelete = require('../lib/site/delete')

...
// 由于是两个指令参数，所以要配合addCommand
// configure site
function makeSiteCommand() {
  const site = new program.Command('site');

  // list all the sites
  site
    .alias('s')
    .usage('<command>')
    .command('list')
    .alias('l')
    .description('list all the sites')
    .action(() => {
      siteList()
    });

  // add a new site
  site
    .command('add')
    .alias('a')
    .description('add a new site')
    .action(() => {
      siteAdd()
    });

  // delete a site
  site
    .command('delete')
    .alias('d')
    .description('delete a site')
    .action(() => {
      siteDelete()
    });
  return site;
}
program.addCommand(makeSiteCommand())
...
15. 实现da create

这是最后一个命令，是定制化的生成项目，需要自己建一个用于生成定制的项目。本项目使用的是https://gitee.com/lydxwj/vue-create，没有什么特别的只是需要修改的文件含有模板引擎的代码，所以本命令使用了模板引擎插件，并且使用了figlet 炫酷文字。

新建文件夹da-cli/lib/create

增加da-cli/lib/create/create.js

const program = require('commander')
const chalk = require('chalk')
const figlet = require('figlet')
const inquirer = require('inquirer')
const ora = require('ora')
const download = require('download-git-repo')
const handlebars = require('handlebars')
const fs = require('fs')
const path = require('path')
const frames = require(`${__dirname}/../../config/config`).frames

// 生成框架选择数组
const framesChoices = [];
Object.keys(frames).forEach(item => {
  framesChoices.push(item);
})

const questions = [
  {
    type: 'list',
    message: '请选择框架:',
    name: 'frame',
    choices: framesChoices,
  },
  {
    type: 'input',
    message: '请输入项目简介',
    name: 'description',
    default: '项目简介'
  },
  {
    type: 'input',
    message: '请输入项目版本',
    name: 'version',
    default: '1.0.0'
  }
]

// 修改文件
function renderFiles(targetPath, globalData) {
  // 需要修改的文件列表
  const fileList = [
    `${targetPath}/package.json`,
    `${targetPath}/README.md`,
  ]
  return new Promise(async (resolve, reject) => {
    for (let i = 0; i < fileList.length; i++) {
      try {
        const fileContent = await fs.readFileSync(fileList[i], 'utf8')
        // 使用模板引擎编译文件
        const fileRendered = await handlebars.compile(fileContent)(globalData)
        await fs.writeFileSync(fileList[i], fileRendered)
        resolve()
      } catch (err) {
        chalk.red('\n craete project failed. \n')
        chalk.red(`\n ${err} \n`)
        reject(err)
      }
    }

  })
}

function createPro(projectName) {
  if (!projectName) {
    console.log(chalk.red('\n Project name should not be empty! \n '))
    return program.help()
  }
  if (program.args.length < 1) return program.help()
  try {
    const stat = fs.statSync(path.resolve('./', projectName));
    if (stat.isDirectory()) {
      console.log(chalk.red('\n The folder already exists! Please change the project name! \n '))
      return;
    };
  } catch (err) {}
  // 生成炫酷文字
  const text = figlet.textSync('da cli', {
    font: 'isometric1',
    horizontalLayout: 'default',
    verticalLayout: 'default',
    width: 80,
    whitespaceBreak: true
  })
  console.log(chalk.green(text));
  const spinner = ora("Generating...");
  inquirer.prompt(questions).then(answers => {
    console.log(chalk.white('\n Start generating... \n'))
    spinner.start()
    let { frame, description, version } = answers;
    const url = frames[frame].url;

    download(
      url,
      projectName,
      {
        clone: url.startsWith('direct:') ? true : false,
      },
      err => {
        if (err) {
          spinner.fail()
          console.log(chalk.red(`Generation failed. ${err}`))
          return
        }
        renderFiles(projectName, { projectName, description, version }).then(() => {
          spinner.succeed()
          console.log(chalk.cyan('\n Generation completed!'))
          console.log(chalk.cyan('\n To get started'))
          console.log(chalk.cyan(`\n    cd ${projectName}`))
          console.log(chalk.cyan(`\n    npm install \n`))
        }).catch(() => {
          process.exit()
        })
      }
    )
  })
}
module.exports = createPro

编写da-cli/bin/index.js

...
const createPro = require('../lib/create/create')

...
// generate an official project
program
  .command('create')
  .arguments('<projectName>')
  .description('generate an official project', {
    projectName: 'folder that does not exist'
  })
  .alias('c')
  .action((projectName) => {
    createPro(projectName)
  })
...
16. 最后增加帮助附加

编写da-cli/bin/index.js

...
program.addHelpText('after', `

Example call:
  $ da --help
  $ da -version
  $ da update
  $ da add
  $ da delete
  $ da list
  $ da create
  $ da site add
  $ da site delete
  $ da site list`);
...

完结

以上是整个项目的实现步骤，代码中有少量注释，没有具体详细讲解，如果有什么不懂得欢迎关注公众号询问。

在这里插入图片描述

lydxwj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
打造企业级AWS基础架构-架构的脚手架
02-24
硅谷电视系列节目中曾经对Cloud的解释是，“thistinylittleareawhichisbecomingsuperimportantandinmanywaysisthefutureofcomputing”，中文意思是“这个小小的领域正在变得超级重要，在很多方面是计算的未来”。...
仿vue-cli搭建属于自己的脚手架的方法步骤
12-11
只要你肯花个一天半天的时间:fist:，也能写出属于你自己的脚手架。 早前脚手架这个词是从 vue-cli 这里认识的，我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能...
前端脚手架项目
lyd的博客
05-19 117
安装 npm install @lydxwj/da-cli -g 开发 git clone https://github.com/lydxwj/da-cli.git # 或者下载解压 https://github.com/lydxwj/da-cli/archive/refs/heads/master.zip cd ./da-cli npm install # 安装完依赖之后执行 npm link 命令 打开命令行工具 增加模板 da add 步骤示例：(本项目地址https://github.
记录关于自己实现的一个vue脚手架
a916521009的博客
12-13 386
两种目录结构，一个为H5多页面 ， 一个为单页面项目(后台系统) npm: npm i -g mch-vue-cli(安装命令) 使用 目录结构: （后台系统） （H5） 目的： 因为调用接口是通过vuex来调用的 而每次一个模块需要去新建一次 很麻烦，希望一个命令自动生成 所以想到用vue脚手架的形式去生成页面模块或者接口案例 简单介绍项目: H5是想到是用多个html形...
用vue 创建工程或者是创建组件注意事项
点滴
03-09 2710
背景：原来都是一直在使用react，现在换成了vue因为中途进来的项目，一直没有从头开始理清楚，今天花了一些时间梳理了一下。 @vue/cli 全局安装就不说了 这里主要说下创建vue组件和创建vue项目 刚开始的时候一直在用 vue create projectname 每次创建之后发现和自己的工程结构不一样 后来发现 Usage: vue &amp;amp;lt;command&amp;amp;gt; [options...
Vue环境安装与配置
12-02 5493
step1: 下载对应电脑的node软件并安装 step2:查看node版本 step3:安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org C:\Users\a\AppData\Roaming\npm\cnpm -> C:\Users\a\AppData\Roaming...
脚手架开发（2）-注册阶段
邓占勇的博客
01-04 1049
点击查看脚手架系列文章总览【正在更新】 个人网站：www.dengzhanyong.com 关注公众号【前端筱园】，不错过每一篇文章 在上篇文章，已经完成了第一个阶段：准备阶段，在准备阶段做了许多基础工作，目的为保证满足脚手架的运行环境。 现在开始进入第二阶段：注册阶段，主要功能是完成命令的解析，以及命令的动态加载的实现。 前期改造 首先介绍两个常用的脚手架命令行交互工具包：yargs、commander 他们给我们在开发脚手架提供了极大的方便，功能大致相同，本篇文章使用的是 commander 作为.
自己搭建脚手架cli，初始化项目
07-14
提供开发效率，通过类似vue-cli创建初始化项目架子
webpack构建vue项目
xuxu_qkz的博客
07-06 1453
webpack构建vue项目 1.脚手架vue-cli npm i vue-cli -g 1.1使用vue-cli初始化项目 Usage: vue &lt;command&gt; [options] Options: -V, --version output the version number -h, --help output usage info...
vue项目创建
秋殇阁
12-26 284
在开始之前，我们说一下怎么创建一个vue项目，现在的vue版本是2.x，不过3.0的版本估计会在明年下半年发布吧。所以我们还是用2.x的方式来说明。 最简单的方式就是使用一款IDE帮助我们创建vue项目，我用过的IDE中webstorm就可以完成这项功能，有些兴趣的可以下载使用，不过提醒大家一点，这玩意很吃内存。。。 其次，就是我们使用vue官方提供的vue-cli脚手架工具来创建一个vue项目。...
nuxt-vue-multiselect:使用vue-multiselect的Nuxt.js的单选选择插件
05-12
nuxt-vue-multiselect 利用 。 设置 将带有yarn或npm的nuxt-vue-multiselect依赖项添加到您的项目中 添加nuxt-vue-multiselect到modules的部分nuxt.config.js 配置它： { modules : [ 'nuxt-vue-multiselect' ] } 发展 克隆此存储库 使用yarn install或npm install安装依赖项 使用npm run dev启动开发服务器 执照 版权所有
Vue.js - 01 安装 Vue CLI & 新建项目
qq_29761395的博客
05-05 1410
文章目录环境安装 Vue CLIxiezaixinjianxiangmu参考 环境 Ubuntu $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04 LTS Release: 22.04 Codename: jammy Node.js $ node --version v16.15.0 $ npm --version 8.5.5 安装 Vue CLI banben
‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序
热门推荐
datouniao1的博客
01-11 1万+
从github上面下载了一个项目，在本地执行 但是一直出现这样的错误 vue-cli-service不是内部命令 > vue-cli-service serve 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] serve: `vue-cli-service serve` npm ERR! Exit status 1 n..
vue-cli的使用
weixin_30897079的博客
08-05 151
一、自配的vue项目骨架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
vue-cli安装
如是说的博客
09-24 566
近期梳理了一下win和linux下安装vue项目，总结一下，希望对于看的人有帮助，废话不多说。 Linux下安装 因为我用的是deepin,所以再此就不演示了。首先电脑上已经安装好了node和npm了，如果没有安装的，后期需要npm包管理工具，如果还没有安装的，可以自己百度进行安装。 首先查看一下node和npm的版本，两个版本不能相差太大，如果相差太大可能在后期安装vue的时候会有一些不可...
Electron 下载失败 install fail npm yarn cnpm
wuyujin1997的博客
04-27 1887
文章目录错误列表npmyarn成功案例cnpm原因分析install.js 脚本内容 昨晚在本地安装 Electron 一直失败，想着早上使用下载服务的人应该少点。 错误列表 安装之前有设置 npm 和 yarn 的镜像为淘宝 npm config set registry https://registry.npm.taobao.org/ yarn config set registry https://registry.npm.taobao.org/ npm 等待时间较长，有错误日志。 yarn su
vue-cli3.0配置别名并引用
qq_38948398的博客
03-20 2682
搭建vue- cli3.0脚手架后，在项目根目录下，也就是与package.json文件同级目录新建vue.config.js文件,在该文件中配置 const path = require('path'); function resolve(dir) { return path.join(__dirname,dir); } module.exports = { chainWebp...
VUE学习笔记详细
qq_43842093的博客
07-19 1442
理解为一般函数去掉function关键字再在参数和函数语句块中间加上=> 如果只有一个参数,可以去掉括号(注意没有参数时也要加上()占位) 如果只有一条返回语句,可以再去掉return和{ } 箭头函数在返回对象时必须在对象外层多加一个() this 与普通函数的this不同, 普通函数谁调用这个函数,this就是指向谁 箭头函数没有自己的this,它的this继承于父级, 也就是箭头函数的this指向箭头函数所处对象 1.4、数组新增的高级方法 filter() map() reduce()
Vue 制作自己的脚手架
最新发布
06-10
如果您想要自己制作 Vue 的脚手架，可以参考以下步骤： 1. 创建一个空的项目文件夹，例如 my-vue-cli。 2. 在项目文件夹中创建一个 bin 文件夹，并在 bin 文件夹中创建一个名为 my-vue 的可执行文件（注意没有扩展...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值