制作属于自己的脚手架（图文详解）

最新推荐文章于 2023-12-23 16:57:54 发布
最新推荐文章于 2023-12-23 16:57:54 发布
阅读量1.2k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40137639/article/details/108412726
版权

制作属于自己的脚手架（图文详解）

yo命令

官网地址：https://yeoman.io/yo

yeoman 制作脚手架命令

安装

npm install -g yo

yo 命令的作用是制作脚手架命令

yo --version 查看版本号

制作脚手架

*generater-generator 可以制作脚手架工具

npm install -g generator-generator

在这里插入图片描述

生成脚手架工具

yo gennerator-脚手架名称

在这里插入图片描述

制作中配置项目解释

在这里插入图片描述

脚手架创建成功

在这里插入图片描述

将自己的工程代码放入到脚手架中

1更改pack.json文件中version

在这里插入图片描述

2更改入口文件index.js中部分配置
在这里插入图片描述

3开始导入自己的工程代码

在这里插入图片描述

导入完成效果

在这里插入图片描述

本地测试脚手架是否

cd generator-shop-generator

npm link

在这里插入图片描述

随便新建一个文件目录（模拟使用脚手架生项目工程）

在这里插入图片描述

查看脚手架运行过程结果

在这里插入图片描述

发布脚手架

如果不会请自行百度

将 generator-shop-generator文件发布到npm上

npm login 使用命令登陆到npm

在这里插入图片描述

开始发布

npm publish

在这里插入图片描述

测试发布，并从npm 上使脚手架
  • 去npm官网搜索 generator-shop-generator

在这里插入图片描述

  • 在本地安装自己的脚手架

npm i generator-shop-generator

在这里插入图片描述

  • 使用脚手架生成项目

yo shop-generator

在这里插入图片描述

qq_40137639
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue组件开发脚手架
12-04
generator-vue-component可以快速生成自己的组件开发的脚手架，类似于vue-cli生成vue项目，这脚手架是目录结构是方便组件开发和调试 由于脚手架是由yeoman搭建，所以必须全局安装yeoman npm install yo 然后全局...
yeoman工具的使用以及自定义脚手架
MoMo@blog
12-14 526
安装yeoman 1.安装yarn sudo: yarn: command not found npm install -g yarn 2.安装yo sudo yarn global add yo 3.安装generator-node sudo yarn global add generator-node 4.新建文件夹 yeoman-test 5.yo node 注意点 yarn 报错超时 unexpected error occurred: “https://registry.yarnpkg.com/y
从零构建自己的脚手架
zjuwwj的博客
05-10 846
在线文档。
如何制作属于自己的脚手架——一看就会系列
y_programmer_ape的博客
09-04 1151
如何制作属于自己的脚手架——一看就会系列 需要一些辅助网站，网址如下： yeoman：https://yeoman.io/ 一、全局安装命令工具：yo 用于制作脚手架 cmd打开命令行： 安装命令：npm install -g yo 【检测版本号：yo --version】 同样是在cmd命令行 安装命令：npm install -g generator-generator 二、安装生成脚手架工具 新建一个文件夹，命名为 generator，在VScode中运行这个文件夹，并在终端中打开 在终端运行以
如何建立自己的一个脚手架
weixin_42373116的博客
03-30 2292
前言 这里让我来教大家如何可以从0到1做一个自己的脚手架，vite-eslint-cli为例进行实现，看看我们需要经过哪些步骤呢？？？ 关于vite-eslint-cli 1. 这个脚手架能干什么 💡 基于vite 实现了项目以及规范一体化部署 ⚡️可以从0 到 1快速部署 🛠️ 内置实现vue3/ ts/ eslint/ prettier/ commitlint/ husky/ pinia持久化/ vue-router 📦 可以快速实现从代码以及规范的搭建 2. 跟vite有什么不同呢 💡 内置
一文带你构建自己的脚手架
Mr.J的博客
11-14 1184
何为脚手架？在日常开发中，我们创建vue项目所使用的vue-cli，创建react项目的create-react-app…都是非常优秀的脚手架。那为什么要使用脚手架来创建项目呢？因为在实际开发中，使用脚手架我们可以快速的初始化一个项目，无需自己一步一步配置，可以有效的提升开发效率。既然已经有这么多优秀的脚手架工具了，为什么还要自己开发一个脚手架呢？其实在实际开发中，有可能这些脚手架不符合我们的实际应用，这时候就需要我们自己根据实际的需求自己去“造轮子”。
微信小程序webview 脚手架使用详解
10-16
主要介绍了微信小程序webview 脚手架使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
基于vue cli重构多页面脚手架过程详解
08-28
本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程，非常不错，具有参考借鉴价值，需要的朋友参考下
通过idea导入vue脚手架项目并创建快捷打包和快捷运行
lixu_boke的博客
07-24 1641
第一步没有idea的需要下载idea https://www.jetbrains.com/zh-cn/idea/download/?utm_expid=.RdPW--XiRkKf4C3iyfxVwg.0&utm_referrer=https%3A%2F%2Fwww.jetbrains.com%2Fzh-cn%2Fidea%2Fpromo%2F%3Futm_source%3Dbaidu%26utm_medium%3Dcpc%26utm_campaign%3Dcn-bai-br-intellij-ex
Springboot启动流程分析-1——脚手架工程和启动流程
_Witch__的专栏
01-10 505
Springboot启动流程分析-1——脚手架工程和启动流程 一、创建springboot脚手架工程 springboot官方提供一个web网页用于构建脚手架工程 https://start.spring.io Project选项: Java生态体系中有三大构建工具:Ant、Maven和Gradle 。这里生成脚手架工程可以选择使用maven或gradle 。这里选择使用更为简洁的gradl...
前端从零搭建自己的脚手架
最新发布
mengxiaodi的博客
12-23 2324
Webpack脚手架是一个工具，用于快速搭建基于Webpack的项目结构。它通常包括了一些预设的配置和插件，以便用户可以快速开始一个新的项目，而不必从头开始配置Webpack。这些脚手架可以帮助开发人员自动处理诸如打包、代码转译、资源管理等繁琐的任务，从而让他们更专注于项目的逻辑实现。
第3章 基础项目的搭建
六指琴魔
09-12 433
基础项目的搭建
使用yeoman 创建vue脚手架，并发送npm包，下载并实验。
qq_42683219的博客
03-30 444
一、总括 yeoman手动搭建自己的脚手架。基本步骤如下 ①:请确保你有能够正常运行的npm ②：请确保你已经了解了yeoman ③：npm install -g yo ③: npm install -g generator-generator ④：编写代码 ⑤：发布npm包 二、起步 ①:请确保你有能够正常运行的npm 这一点不用多说，是必须项 ②：请确保你已经了解了yeoman 如果没有了解yeoman 基本不需要向下面看了。点击可以学习yeoman ③：npm install -g yo
搭建自己的脚手架
alice9999999的博客
06-20 863
通过搭建自己的脚手架可以实现下载git模板，快速构建项目。
如何搭建一个自己的脚手架
qq_42257169的博客
02-19 1899
脚手架 搭建脚手架的目的就是快速的搭建项目的基本结构并提供项目规范和约定。目前日常工作中常用的脚手架有 vue-cli、create-react-app、angular-cli 等等，都是通过简单的初始化命令，完成内容的快速构建。 其实我们也可以用git clone url来新建（复制）项目，再 low 一点的方法就是复制粘贴整个文件夹，一样也能达到初始化的目的。 脚手架的本质也是从远程下载一个模板来进行一个新项目，但是脚手架可是高级版的克隆，它主要是提供了交互式的命令让我们可以动态的更改模板，然后用一句
如何创建属于自己的脚手架
Ma_lunan的博客
12-18 1103
原理 我们每次搭建项目都需要创建项目，然后进行一系列的基础配置，封装基础api ，配置webpack,浪费了很多时间和精力，用自己封装的脚手架模板就可以每次像创建vue,react那样一样简单，有能力的还可以去封装自己的框架。 参考自beleve666大神的文章 源码查看github 原理就：利用npm封装插件，拉取我们在github上托管的项目，拉取完毕后把依赖的.git .svn删除掉 并用node.js更改json参数 1. 先上插件依赖 commander:完整的 node.js 命令行解决方案 d
搭一个属于自己的脚手架
大灰狼的小绵羊哥哥的博客
06-11 540
1.什么是脚手架 脚手架用于快速生成新项目的目录模板，并集成一系列体系化工具的安装,无需自己从零开始一步步配置，减少copy操作，有效提升开发体验和效率，尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，所以我们可以定制一个属于自己的脚手架，来提升自己的开发效率。平时我们在开发React-Native的时候就会使用到raect-native-cli这个脚手架为我们创建项目 脚手架的作用 减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 可...
自制简单的脚手架-shell版（一）
iong_l的专栏
11-26 468
前言 每次新增一个项目的时候，都需克隆项目修改一堆文件。很不方便，如果有一个自动化脚本，一键搞定，可以省很多开发时间。 针对自己的项目思考了一下，项目用的YII框架，使用Git子模块实现的多项目架构，根据自己创建项目的步骤分析了一下，一共分为6步。 1、克隆项目架子 2、修改命名空间 3、修改配置文件 4、初始化Git仓库 5、提交初始版本 6、创建controller、model、service等接口文件正式开发 针对这几个步骤，可以制作一个自动化脚本。首先选择用shell命令实现。 shel
自制脚手架所需基础node工具包
Equation
01-24 787
一、commander 1、安装 npm install commander --save 2、简单demo var program = require('commander'); program .version('0.1.0') .option('-p, --peppers', 'Add peppers') .option('-P, --pineapple',
Vue 制作自己的脚手架
06-10
如果您想要自己制作 Vue 的脚手架，可以参考以下步骤： 1. 创建一个空的项目文件夹，例如 my-vue-cli。 2. 在项目文件夹中创建一个 bin 文件夹，并在 bin 文件夹中创建一个名为 my-vue 的可执行文件（注意没有扩展...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值