平时开发vue项目我最喜欢的组合是: vue + vuex + axios + element + lodash
但是每次初始化项目时都得:
这些步骤还是挺重复的。
再者, 如果是公司团队开发就更需要统一的规范(如eslint规范),和统一的结构了(如统一挂载axios,登陆拦截等)
那么,用yeoman刚好帮你处理这些问题!团队leader处理好脚手架之后,团队成员一键安装即可
yo your-project
简单介绍下 Yeoman,它是一个脚手架生成工具,比如在之前写 ASP.NET MVC 的时候,Visual Studio 会给你选模板,然后生成一个项目的基本结构(脚手架),这对提升开发体验是很有帮助的,节省了重复劳动。然而前端没有什么 IDE(WebStorm?或许吧),没有一个固定的开发模式,可能你喜欢 jshint,我想用 eslint,你觉得 angular 顺手,我觉得 vue 更合适,这时就可以使用 Yeoman 这个工具,生成一个 适合自己技术栈 的脚手架,需要的一些文件都预先生成好,给自己省点事。
安装基本的工具:
全局安装yo
npm i -g yo
全局安装`generator-generator
npm install -g generator-generator
准备好自己的模板:
我这里搭建好了自己的模板,项目我取名叫vue-temp
,并且包含vue + vuex + axios + element + lodash
目录结构大概如下:
开始构建自己的脚手架:
在vue-temp
目录下运行yo generator
接下来会是一系列的咨询问题,其中generator name
必须是generator-
开头的
基础框架安装完成之后目录大概长这样:
多了一个generator-vue-temp
的文件夹,里面的文件结构长这样(只列举了部分):
├── .yo-rc.json
├── package.json
├── generators
│ ├── app
│ ├── templates
│ ├── dummyfile.txt
│ ├── index.js
其中
下面我们进行一些改造:
step1:
把generator-vue-temp
剪切到与vue-temp
同级:
step2:
把vue-temp
里面的文件(除了node_modules)拷贝到generator-vue-temp\generators\app\templates
文件夹下,并把文件夹下原有的dummyfile.txt
删除了
完成之后大概这样
step3:
修改配置文件generator-vue-temp\generators\app\index.js
文件:
到这里,你的脚手架其实已经搭建好了!
测试脚手架:
在generator-vue-temp
目录下执行npm link
命令,意思是把这个node包链接到本地
然后在generator-vue-temp
的同级目录下新建文件夹test-vue-temp
,再运行
yo vue-temp
出现以下命令就是成功了
输入y按回车,等待一下子,就会发现新生成的内容其实和我们在generator-vue-temp\generators\app\templates
下的内容是一模一样的了!
(好奇的同学可以跑起来该项目看看是不是一样的)
至此脚手架已经完成生成成功!!!
接下来你可以通过npm发布到网上,方便自己去下载使用
.eslintrc.js这类型的文件没有复制到新的项目里面去
可以改写generator-vue-temp\generators\app\index.js
文件里的writing
函数,指定把这些文件复制到新项目里面去
我想在应用脚手架时加几个问题,方便生成的项目的package.json填写
可以改写generator-vue-temp\generators\app\index.js
文件里的prompting
函数,增加几个问题,然后在writing
时对package.json
内容进行改写
module.exports = class extends Generator {
prompting() {
// Have Yeoman greet the user.
this.log(
yosay(`Welcome to the divine ${chalk.red('generator-vue-temp')} generator!`)
);
const prompts = [{
type: 'input',
name: 'name',
message: '请输入项目名?',
default: 'vue-temp'
}, {
type: 'input',
name: 'description',
message: '请输入项目描述?',
default: 'a simple description'
}, {
type: 'input',
name: 'author',
message: '请输入项目作者?',
default: ''
}
];
return this.prompt(prompts).then(props => {
// To access props later use this.props.someAnswer;
this.props = props;
});
}
writing() {
this.fs.copy(
this.templatePath('**'),
this.destinationPath('./')
);
// 下面文件默认不能直接应用在新项目里,故指定复制一份
const specFileList = ['.browserslistrc', '.eslintrc.js']
specFileList.forEach(file => {
this.fs.copy(this.templatePath(file), this.destinationPath(file));
})
// 改写package.json
this.initPackage();
}
initPackage () {
let pkg = this.fs.readJSON(this.templatePath('./package.json'), {});
const { props } = this;
Object.assign(pkg, {
name: props.name,
description: props.description,
author: props.author
});
this.fs.extendJSON(this.destinationPath('./package.json'), pkg);
}
};
总的来说,yeoman
给我的感觉就是通过一句命令,帮你把模板文件直接复制到新的项目里面去。而且支持通过prompting提问来修改一些文件。
那么其实yeoman的用法就不仅仅时局限于vue了,可以用在react,angular,甚至python,go,等等其他项目里面去了
使用Yeoman制作前端脚手架
手把手入门 Yeoman 模板开发
写一个自己的 Yeoman Generator
yeoman Generator的api文档