1工具

l  Npm （ https://nodejs.org/en/ ）

l  Yeoman （npm install -g yo）

l  generator-generator （npm install -g generator-generator）

备注说明：

  1. yo是Yeoman的命令行工具包，需要全局安装
  2. generator-generator就是generator的generator，需要全局安装
  3. 将npm的镜像调整为国内，命令如下npm config set registry=http://registry.npmjs.org
  4. 注册一个npm的账号,密码，邮箱（有可能需要翻墙，蓝灯试试）

2操作步骤

  1. 创建一个脚手架的基础版本.创建一个空的文件夹，命名为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脚手架的更多相关文章

  1. 如何创建NPM包并上传

    1 在NPM网站上注册,并验证(verify)自己的邮箱 https://www.npmjs.com 2 用命令行定位到你的库文件夹 3 在命令行里登录npm, 按提示依次输入用户名 密码 注册邮箱 ...

  2. 创建简单的npm脚手架

    前言 vue-cli, webpack-cli 等脚手架是不是用起来爱不释手?自己写了个模版每次来回复制粘贴代码是不是很难维护?如果你是对前端.Node操作有一定的了解,同时也存在以上疑问,那就请尽情 ...

  3. 从零开始制作cli工具，快速创建项目脚手架

    背景 在工作过程中,我们常常会从一个项目工程复制代码到一个新的项目,改项目配置信息.删除不必要的代码. 这样做的效率比较低,也挺繁琐,更不易于分享协作. 所以,我们可以制作一个cli工具,用来快速创建 ...

  4. 创建React脚手架

    node版本10.14.2 下载地址 如果是其版本的话会出错 css-loader 会不兼容 主要是8.x的版本不兼容 npm install -g create-react-app 全局安装 cre ...

  5. 创建vue脚手架步骤

    一.在cmd配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org 二.仅第一次执行安装,安装好后关掉cmd后再开,这个时候 ...

  6. 搭建vue.js 的npm脚手架

    1.在cmd中,找到nodeJs安装的路径下,运行 vue -V,查看当前vue版本,如下图所示,表明已经安装过了. 2.没有安装,进行安装.在cmd中,找到nodeJs安装的路径下,运命令行 npm ...

  7. 为什么我不推荐你使用vue-cli创建脚手架？

    最近在知乎看到一个问题,原问题如下: "很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于vue2.0+webpack4搭建 ...

  8. 使用yeoman搭建脚手架并发布到npm

    前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...

  9. 创建并发布npm包

    1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...

随机推荐

  1. C# -- is和as运算符

    一.is运算符用于判断一个对象是否可以转换为指定的类型,不会抛出异常,返回bool值用来表示是否转换成功: if (myObj is MyClass) { //do... } 当满足以下任意一种情况时 ...

  2. Python3 进程、线程和协程

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 进程.线程和协程的对比 1.定义对比 进程:是系统进行资源分配的基本单位,每启动一个进程,操作系统都需要为其分配运 ...

  3. JS基础研语法---函数基础总结---定义、作用、参数、返回值、arguments伪数组、作用域、预解析

    函数: 把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了 函数作用: 代码重用 函数的参数: 形参:函数定义的时候,函数名字后面的小括号里的变量 实参:函数调用的时候,函数名 ...

  4. 推荐四个phpstorm酷炫实用插件 让你写代码的时候不在孤单!

    程序员写代码很孤独,每天只能和电脑屏幕交流,想要一个程序员鼓励师妹子,老板又不给配,如何让自己写代码的时候不再孤单呢?今天给大家分享的这四个插件,既实用又好玩,还能提高开发效率,这四个插件主要用到ph ...

  5. OpenCV：图像平滑和图像模糊处理

    导包: import numpy as np import cv2 import matplotlib.pyplot as plt def show(image): plt.imshow(image) ...

  6. Flutter Text文本

    import 'package:flutter/material.dart'; void main() { runApp( App() ); } class App extends Stateless ...

  7. 微信小程序——表单验证插件WxValidate的二次封装（二）

    在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面 ...

  8. 个人项目开源之c++基于epoll实现高并发游戏盒子（服务端+客户端）源代码

    正在陆续开源自己的一些项目 此为c++实现高并发的游戏盒子,平台问题需要迁移重构,所以有一些遗留问题,客户端异常断开没有处理,会导致服务器崩溃,还有基于快写代码编程平台实现的小程序切换,线程读写缓存没 ...

  9. Windows下使用PuTTY连接Centos7、Linux系统目录结构、一些操作命令

    PuTTY可以远程管理Linux.PuTTY官网:https://www.putty.org/ 一.使用PuTTY连接Centos7 下载安装后,打开如下图: 1.输入主机名或IP地址2.端口号默认2 ...

  10. IaaS、PaaS、SaaS介绍（非原创）

    文章大纲 一.IaaS.PaaS.SaaS介绍与比较二.参考文章 一.IaaS.PaaS.SaaS介绍与比较 随着云计算.大数据.人工智能等一批新技术的涌入,企业信息化建设速度加快,基于云计算的Iaa ...