NodeJS: 从零开始搭建vue脚手架

搭建项目

创建目录

1.mkdir mycli
2.cd mycli
3.npm init
4. 使用开发工具打开目录

添加需要的js文件

5. 创建bin/cli.js 文件，在package.json内添加一个bin字段，指向脚手架文件
   

6.为创建的js文件更改写入权限：chmod 755 cli.js
7.cli.js与vue.js必须要有这样的头文件 #! /usr/bin/env node 以表示在node环境下运行

功能开发

功能一：获取git地址上的代码

安装需要的插件

npm install inquirer  //用来与用户进行交互，获取交互问题答案
npm install download-git-repo //用来获取git地址上的代码
npm install ora //用来显示执行进度

具体实现

const inquirer = require("inquirer");
const fs = require('fs'); //nodejs自带，不需要安装
const download = require('download-git-repo');
const ora = require('ora');

//接着通过命令行交互询问用户问题，并获取用户执行结果
inquirer.prompt([
    {
        type:'input',
        name:'name',
        message:"Project name?" //询问项目名称并以此名称创建文件夹
    }
]).then((answers)=>{
    if(!fs.existsSync(answers.name)){ //判断当前目录下是否有重名文件
        const spinner = ora('下载模版...');
        spinner.start();
        //调用下载方法，传入项目地址，项目名称，
        download('direct:你的git代码地址#master',answers.name, {clone: true}, (err) => {
            if (err) {
                console.log(err);
                spinner.fail();
            } else {
                console.log('下载成功');
                spinner.succeed();
            }
        })
    } else {
        console.log('项目已经存在了')
    }
})

功能二：创建vue模板并写入路由

具体实现

#!/usr/bin/env node

const fs = require('fs');
const path = require('path')
const inquirer = require("inquirer");
const destDir = process.cwd(); //获取当前命令所在的文件目录

// 获取命令后所跟的文件名称
let file = process.argv[2];
if (!file) {
    console.log('请输入组件名称')
    return;
}
// 如果用户输入了目录地址例如src/test/test,根据目录地址获取文件名
let vueName = file.slice(file.lastIndexOf('/')+1,file.length)
let fileUrl = file + '.vue';
//如果用户只输入了用户名称则将文件建在src/views文件夹下
if (fileUrl.indexOf('/') < 0) {
    fileUrl = 'src/views/'+fileUrl;
}
let fileArr = fileUrl.split('/')
//创建文件时使用，vueName可在模版文件中使用，区别为后缀名称
let fileName = vueName + '.vue';

let str = '你的模板文件'

inquirer.prompt([
    {
        type: 'input',
        name: 'isWriteRouter',
        message: "是否添加到路由? Y or N" //根据用户输入来判断是否需要写入路由
    }
]).then((answers) => {
    mkdir(fileUrl); //根据fileUrl创建文件夹
    if (!fs.existsSync(fileUrl)) {
        //创建文件，将模板文件写到文件内
        fs.writeFile(fileUrl, str, (err) => {
            if (err) throw err;
            //如果需要创建路由则调用路由方法
            if (answers.isWriteRouter.toLowerCase() === 'y') {
                writeRouter();
            }
        })
    } else {
        console.log('文件名已存在')
    }

})

function writeRouter() {
    new Promise((resolve, reject) => {//异步读取文件
        fs.readFile(destDir + '/src/router/index.js', 'utf8', (err, routerConfig) => {
        //routerConfig为读取到的路由文件的字符串
            if (err) throw err
            let [start, end] = routerConfig.split(']');
            //将要添加的字符串拼接到现有的router内
            let totalString = `${start}\t\t{
        path: '/${fileName}',
        name: '${fileName}',
        component: () => import('@${fileUrl}')
    },\n]  ${end}`
            resolve(totalString)
        })
    }).then(
        totalString => {
        //写入拼接好的字符串
            fs.writeFile(destDir + '/src/router/index.js', totalString, (err) => {
                if (err) throw err;
            })
        },
        err => {
            console.log(err)
        }
    )
}

function mkdir(filepath) {
    const arr = filepath.split('/');
    let dir = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if (!fs.existsSync(dir)) { //如果文件夹不存在创建文件夹
            fs.mkdir(dir, (err) => {
                if (err) throw err;
            })
        }
        dir = dir + '/' + arr[i];
    }
}

本地测试

模块链接

npm link //将npm模块链接到对应的运行项目中去，方便对模块进行调试和测试
npm unlink //取消链接

执行命令

my-vue-cli // 获取git代码地址
my-vue-g xxx 或者 my-vue-g src/xxx/xxx //创建新组件

npm发布

注意：每次发布时都需要将package.json内的version增加

npm adduser //无npm账号时执行
npm login //登陆npm账号
npm whoami //查看当前登陆用户
npm publish //发布

npm发布后安装

npm install my-vue //my-vue为package.json内的name字段，可自行修改

//使用命令
my-vue-cli
my-vue-g