generator-gyt-vue
v1.0.1
Published
带有一定基础代码的vuejs项目脚手架
Downloads
1
Readme
generator-vue
带有一定基础代码的vuejs项目脚手架
首先按照原始的方式去创建一个理想的项目结构(你意向的项目结构),把需要使用的基础代码全部包含在里面,然后再去封装一个全新的generator用于去生成我们这样一个理想的项目结构。
1.写好基本index.js(class和prompting方法)
2.把模板templates拿过来
有了模板过后需要把项目结构里面一些可能发生变化的地方通过模板引擎的方式去挖坑
(这里只定义了package.json的name)
3.添加writing方法,核心代码:
templates.forEach(item => {
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answer
)
})
(尤其注意:copyTpl是this.fs里的方法。其次,是传递3个参数)
4.npm link作为本地链接
(如果是yarn安装依赖就yarn link)
5.找个空白目录,执行命令yo gyt-vue
(注意:反正就是前缀generator-后面的名称就是了,例如这里的gyt-vue)
6.发布Generator
Generator实际上就是npm模块,发布Generator即发布npm模块
echo node_modules > .gitignore // 在创建项目之前呢,我们通过gitignore 去忽略一系列文件
git init // 初始化空仓库
git status // 查看本地仓库状态
git add . // 暂存文件
git commit // 创建提交
// 在github创建一个项目generator-gyt-vue
git remote add origin <复制的地址>
git push -u origin master // 把本地master分支的代码推送到远端master分支
// 发布
npm publish // 也可以用yarn publish
发布的时候会提示输入版本号和密码等信息。
如果我们使用了国内镜像源,这里的发布就会出现问题,因为大部分国内的镜像,比如淘宝镜像都是只读镜像,我们要修改本地镜像配置或者发布的时候修改--registry=官方的镜像
yarn publish --registry=https://registry-yarnpkg.com
这里将镜像发布到了npm 和 yarn, 因为yarn和npm是同步的。
有了这个模块,可以通过npm去全局安装,然后通过Yeoman去使用。
注意:如果需要这个generator在官方仓库列表中也会出现的话,可以为这个项目添加一个yeoman-generator的关键词,这个时候,Yeoman的官方就会发现这个项目。