创建Npm脚手架
1工具
l Npm ( https://nodejs.org/en/ )
l Yeoman (npm install -g yo)
l generator-generator (npm install -g generator-generator)
备注说明:
- yo是Yeoman的命令行工具包,需要全局安装
- generator-generator就是generator的generator,需要全局安装
- 将npm的镜像调整为国内,命令如下npm config set registry=http://registry.npmjs.org
- 注册一个npm的账号,密码,邮箱(有可能需要翻墙,蓝灯试试)
2操作步骤
- 创建一个脚手架的基础版本.创建一个空的文件夹,命名为CLI,在此文件夹下进入命令行状态,再命令行中输入yo generator

2.输入对应的配置信息之后,代码会帮助我们自动创建一个脚手架的基础版本.生成的代码结构如下:

3.将需要生成脚手架的代码,放置到app/templetes下,并修改app/index.js文件,在write方法添加新的复制文件的路径.
4.初始化项目,加载依赖包.切换到项目下,输入命令npm install

5.将这个脚手架链接到本地,在本地测试,看看是否可行
npm link // 如果提示权限问题请使用sudo npm link
若此命令没有抱任何的错误,此时脚手架已经可以本地使用了。
在本地创建一个项目目录,进入该目录,尝试使用该脚手架,比如现在脚手架项目名称为generator-weminiapp,命令行中应该去掉脚手架项目的前缀“generator-”来运行:yo weminiapp
命令会根据设定的提示和输入信息,Yeoman会一步一步安装你的项目文件,最终生成你指定的项目结构。
效果如下:


6.发布脚手架到npm
1》 若是没有npm账号,则可以通过npm adduser来创建
2》 若是已有npm账号,则可以通过npm login来发布,命令行操作如下:

3》 输入Npm publish命令,进行上传发布,成功的提示如下:

3部署
登录npm,查看项目是否上传成功. 具体网址如下: https://www.npmjs.com

点击generator-weminiapp,进入查看项目信息.具体信息如下

4测试
新创建一个纯空的文件夹,下载代码.


创建Npm脚手架的更多相关文章
- 如何创建NPM包并上传
1 在NPM网站上注册,并验证(verify)自己的邮箱 https://www.npmjs.com 2 用命令行定位到你的库文件夹 3 在命令行里登录npm, 按提示依次输入用户名 密码 注册邮箱 ...
- 创建简单的npm脚手架
前言 vue-cli, webpack-cli 等脚手架是不是用起来爱不释手?自己写了个模版每次来回复制粘贴代码是不是很难维护?如果你是对前端.Node操作有一定的了解,同时也存在以上疑问,那就请尽情 ...
- 从零开始制作cli工具,快速创建项目脚手架
背景 在工作过程中,我们常常会从一个项目工程复制代码到一个新的项目,改项目配置信息.删除不必要的代码. 这样做的效率比较低,也挺繁琐,更不易于分享协作. 所以,我们可以制作一个cli工具,用来快速创建 ...
- 创建React脚手架
node版本10.14.2 下载地址 如果是其版本的话会出错 css-loader 会不兼容 主要是8.x的版本不兼容 npm install -g create-react-app 全局安装 cre ...
- 创建vue脚手架步骤
一.在cmd配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org 二.仅第一次执行安装,安装好后关掉cmd后再开,这个时候 ...
- 搭建vue.js 的npm脚手架
1.在cmd中,找到nodeJs安装的路径下,运行 vue -V,查看当前vue版本,如下图所示,表明已经安装过了. 2.没有安装,进行安装.在cmd中,找到nodeJs安装的路径下,运命令行 npm ...
- 为什么我不推荐你使用vue-cli创建脚手架?
最近在知乎看到一个问题,原问题如下: "很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于vue2.0+webpack4搭建 ...
- 使用yeoman搭建脚手架并发布到npm
前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...
- 创建并发布npm包
1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...
随机推荐
- 对象流,它们是一对高级流,负责即将java对象与字节之间在读写的过程中进行转换。 * java.io.ObjectOutputStream * java.io.ObjectInputStream
package seday06; import java.io.Serializable;import java.util.Arrays; /** * @author xingsir * 使用当前类来 ...
- PHP+Ajax实现文章心情投票功能实例
一个PHP+Ajax实现文章心情投票功能实例,可以学习了解实现投票的基本流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向Ajax.php发送请求,PHP验证用户coo ...
- FCC---Use the CSS Transform scale Property to Change the Size of an Element
To change the scale of an element, CSS has the transform property, along with its scale() function. ...
- QT--HTTP图片下载器
QT--HTTP图片下载器 1.http使用前提 QT += core gui network //必须加上network 2.必须头文件 #include <QNetwork ...
- RDIFramework.NET敏捷开发框架Web新增邮件中心实现便捷式的邮件收发
1.引言 邮件收发在很多业务系统中都有这样的需求,是比较正式和常用的功能.在我们的框架中提供了邮件中心功能模块,集内部邮件的收发.邮件归类.邮件星标的标记.邮件的删除与彻底删除等,邮件中心功能模块界面 ...
- Django—开发具体流程
1.创建Django项目 [root@localhost ~]# django-admin startproject 项目名 [root@localhost ~]# django-admin star ...
- LInux:网络连接的设置
主机名的配置 主机名的配置(配置文件/etc/hostname) 1.使用 hostname 命令临时设置主机名 命令格式:hostname [新主机名] 2.永久设置主机名 命令格式:hostnam ...
- 201871010112-梁丽珍《面向对象程序设计(java)》第十六周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- SpringBoot(二十一)_使用xml
springboot使用xml 虽然springboot不提倡用xml,但是我们有可能也是会用到的 代码示例 1.创建一个配置文件在resources下,如下图所示 2.设置配置类 @Configur ...
- C#开发BIMFACE系列26 服务端API之获取模型数据11:获取单个面积分区信息
系列目录 [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列25 服务端API之获取模型数据9:获取楼层对应面积分区列表>一文中介绍了如何获取单个模型中单个楼层包 ...