前言

项目中可能会频繁的新建一些移动端、pc端页面，每次通过cv大法（复制粘贴）会比较繁琐。因此实际工作中，我们可以通过发布成npm包的命令行工具来简化工作流程，每次通过几个简单的命令就能得到理想的初始项目文件，初始项目文件可以将封装好的axios、常用的UI框架、reset.css等基本配置提前搭建好。

开发环境

开发前需要先在本地环境安装node.js、git、注册npm账号。

项目结构

最基本的项目结构 在这里插入图片描述

编写代码

1、通过npm init创建package.json文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "name": "vue-tem-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "chalk": "^3.0.0",
    "commander": "^4.1.1",
    "download-git-repo": "^3.0.2",
    "handlebars": "^4.7.3",
    "inquirer": "^7.0.4",
    "log-symbols": "^3.0.0",
    "ora": "^4.0.3"
  },
  "bin": {
    "vue-cli": "./index.js"
  },
  "author": "factory011",
  "license": "ISC"
}

2、执行npm i安装项目依赖 3、index.js代码编写

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

#!/usr/bin/env node

const fs = require('fs');
const program = require('commander');
const download = require('download-git-repo');
const handlebars = require('handlebars');
const inquirer = require('inquirer');
const ora = require('ora');
const chalk = require('chalk');
const symbols = require('log-symbols');
program.version('1.0.0', '-v, --version')
	.command('init <name>')
	.action((name) => {
		if (!fs.existsSync(name)) {
			inquirer.prompt([
				{
					name: 'description',
					message: '请输入项目描述：'
				},
				{
					name: 'author',
					message: '请输入作者名称：'
				},
				{
					name: 'template',
					message: '请输入模板类型（pc/app）：'
				}
			]).then((answers) => {
				const spinner = ora('模板下载进行中...');
				spinner.start();
				const template_app = 'https://github.com:factory011/vue-app-rem-template#master';
				const template_pc = 'https://github.com:factory011/vue-pc-template#master';
				const TEMPLATE = answers.template === 'pc' ? template_pc : template_app;
				download(TEMPLATE, name, { clone: true }, (err) => {
					if (err) {
						spinner.fail();
						console.log(symbols.error, chalk.red(err));
					} else {
						spinner.succeed();
						const fileName = `${name}/package.json`;
						const meta = {
							name,
							description: answers.description,
							author: answers.author
						}
						if (fs.existsSync(fileName)) {
							const content = fs.readFileSync(fileName).toString();
							const result = handlebars.compile(content)(meta);
							fs.writeFileSync(fileName, result);
						}
						console.log(symbols.success, chalk.green('项目初始化完成'));
					}
				})
			})
		} else {
			// 错误提示项目已存在，避免覆盖原有项目
			console.log(symbols.error, chalk.red('项目已存在'));
		}
	})
program.parse(process.argv);

这是github上搭建的模板文件下载地址，可以自行替换成自己的。

1
2

const template_app = 'https://github.com:factory011/vue-app-rem-template#master';
const template_pc = 'https://github.com:factory011/vue-pc-template#master';

发布到npm

1、执行npm config get registry

1

https://registry.npm.taobao.org/

2、配置本地仓库npm config set registry=http://registry.npmjs.org 3、执行npm adduser 4、执行npm publish 5、执行成功后，在npm官网的个人资料中能查看到发布的包 6、最后记得将本地仓库还原

1

npm config set registry=https://registry.npm.taobao.org/

项目运行

全局安装npm包

1

npm i vue-rem-cli -g

创建初始项目

1

vue-cli init vue-pc-demo

命令组成： vue-cli是package.json中的配置项

1
2
3

"bin": {
    "vue-cli": "./index.js"
  },

init是通过commander配置的命令

1
2

program.version('1.0.0', '-v, --version')
	.command('init <name>')

vue-pc-demo是项目名称

最终执行结果如下： 在这里插入图片描述 在这里插入图片描述