首先要将全局安装yeoman
npm i yo -g
mac可能是sudo npm i yo -g
之后我们要安装要用的generator，例如generator-node当然也是全局的
npm i generator-<name> -g //同样mac可能需要sudo
例：npm i generator-node -g
之后就是使用安装的generator，使用方式如下
mkdir my-generator //创建一个文件夹
cd my-generator
yo <name>//这里就是安装的generator的名字，使用的时候只需要使用名字就行
例：yo node
之后会出现一些询问
就按照自己习惯填就好了
网上提供了挺多的generator可以找到通过yeoman使用
你也可以自己写一个generator来实现模版文件的写入
首先创建一个文件夹
mkdir generator-my-cli //这里的文件夹也要遵循yo使用generator的规范，所以文件夹名称是generator-<name>
//进入项目文件
cd generator-my-cli
//生成package.json
npm init
//安装yeoman-generator到本地
npm i yeoman-generator
我的文件目录如下
进入generators/app/index.js
之后开始写代码
//引入yeoman-generator
const Generator = require("yeoman-generator");
module.exports = class extends Generator{
writing(){这个是文件写入的方法
// // 用Generator的fs模块的write方法来写入文件 第一个参数为路径，第二个参数为写入内容
this.fs.write(
this.destinationPath("foo.txt"),
Math.random().toString()
)
}
}
之后在命令行运行npm link ,将这个文件link到全局
然后
cd ../
mkdir test
cd test
yo my-cli
打开test文件夹会有一个foo.txt文件并且内容是一个随机数字符串
接下来使用templates文件夹下的模板，之后可以在test文件下生成相应的模板文件
templates文件下的index.html就是一个普通的基础html模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= title %></title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<%= info %>
</div>
</body>
</html>
改造app/index.js下的代码
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
writing () {
const teml = this.templatePath('index.html')
const context = {title:'my-project',info:'这是一个模板'}
const root = this.destinationPath('index.html')
this.fs.copyTpl(teml,root,context)
}
}
之后在test文件里使用yo my-cli
会发现test下会有个index.html文件内容跟模板一样，并且title被替换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>my-project</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
这是一个模板
</div>
</body>
</html>
接下来设置一些命令行的用户询问信息，并且生成一个完整的项目文件，这里使用的是vue-cli生成的文件
看一下我的templates文件内容
templates文件夹里我放的是vue-cli生成的项目文件，当作一个模板来使用
接下来继续修改app/index.js的代码，如下
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
prompting(){
return this.prompt([
{
type:'input',
name:'name',
message:'Your project name',
default:this.appname
}
])
.then(answers=>{
this.answers = answers;
})
}
writing (){
const templates = [
'tsconfig.json',
'README.md',
'package.json',
'package-lock.json',
'babel.config.js',
'.gitignore',
'.eslintrc.js',
'.browserslistrc',
'src/App.vue',
'src/main.ts',
'src/shims-vue.d.ts',
'src/views/About.vue',
'src/views/Home.vue',
'src/store/index.ts',
'src/router/index.ts',
'src/components/HelloWorld.vue',
'src/assets/logo.png',
'public/favicon.ico',
'public/index.html'
]
templates.forEach(item=>{
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answers
)
})
}
}
首先是使用prompting设置询问，我们在输入命令行时会进行一些询问，就像是你在生成vue-cli项目时会在命令行出现一些询问，比如your project name,如下
this. prompt的回调函数返回的answers包含了你对于询问信息的回复，可以在之后使用。然后定义一个templates数组，包含了所有的模板文件的路径，遍历数组调用this.fs.copyTpl进行模板生成。
npm link //link到全局
cd ../
mkdir test-vue-cli
cd test-vue-cli
yo my-cli
就会生成一个vue的项目
说个小问题，因为我使用的是vue-cli生成的项目，所以下图箭头指示的地方会出现问题，可以通过双%号解决，这样会原样的输出。例如
BASE_URL，title的name就是在做询问时你输入的项目名称，是在copyTpl时传入的this. answers参数中存在了的。做个对比
最后可以通过
npm publish发布到npm官网，具体的方式这里就不介绍了，可自行百度ok，到这差不多就结束了，更多可以到generator官网了解_
