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

最新推荐文章于 2024-03-20 19:37:34 发布
最新推荐文章于 2024-03-20 19:37:34 发布
阅读量1.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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
关注
【React】9、使用create-react-app（CRA）创建react项目
Coding and studying
06-01 1203
第一步，全局安装：第二步，切换到想创项目的目录，使用命令：第三步，进入项目文件夹：第四步，启动项目：你当然可以选择不全局安装你可以直接执行这样可以不安装create-react-app而直接创建你的脚手架项目你还可以执行创建一个支持TS语言的react脚手架项目。当看到这个界面在你的浏览器里自动打开的时候，你的脚手架项目就已经创建好了～ ---- 静态资源文件夹src ---- 源码文件夹App.css -------- App组件的样式App.test.js ---- 用于给App做测试index.css
基于 qiankun 的微前端最佳实践（图文并茂） - 应用部署篇
mingyuanyunlian的博客
09-24 4361
写在开头 微前端系列文章： 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇 基于 qiankun 的微前端最佳实践（图文并茂） - 应用部署篇 基于 qiankun 的微前端最佳实践（图文并茂） - 应用间通信篇 万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇 本系列其他文章计划一到两个月内完成，点个 关注 不迷路。 计划如下： 生命周期篇； IE 兼容篇； 性能优化、缓存方案篇； 引言 大家好~我们是明源云链前端团队，我们使用 q.
自制简单的脚手架-shell版（一）
iong_l的专栏
11-26 578
前言 每次新增一个项目的时候，都需克隆项目修改一堆文件。很不方便，如果有一个自动化脚本，一键搞定，可以省很多开发时间。 针对自己的项目思考了一下，项目用的YII框架，使用Git子模块实现的多项目架构，根据自己创建项目的步骤分析了一下，一共分为6步。 1、克隆项目架子 2、修改命名空间 3、修改配置文件 4、初始化Git仓库 5、提交初始版本 6、创建controller、model、service等接口文件正式开发 针对这几个步骤，可以制作一个自动化脚本。首先选择用shell命令实现。 shel
如何制作属于自己的脚手架——一看就会系列
y_programmer_ape的博客
09-04 1298
如何制作属于自己的脚手架——一看就会系列 需要一些辅助网站，网址如下： yeoman：https://yeoman.io/ 一、全局安装命令工具：yo 用于制作脚手架 cmd打开命令行： 安装命令：npm install -g yo 【检测版本号：yo --version】 同样是在cmd命令行 安装命令：npm install -g generator-generator 二、安装生成脚手架工具 新建一个文件夹，命名为 generator，在VScode中运行这个文件夹，并在终端中打开 在终端运行以
Yeoman&generator自定义脚手架
CarrreyYan_979292的博客
09-04 286
制作属于自己 的脚手架 不是cli的脚手架。如果有过兴趣。自己可以使用node.js 中, ？？？？.js 自己写 gennerator 的脚手架方式 yo命令 官网地址：https://yeoman.io/yo yeoman 制作脚手架命令 安装 npm install -g yo yo 命令的作用是制作脚手架命令 yo --version 查看版本号 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200904231954167.png?x-oss-proces
搭一个属于自己的脚手架
大灰狼的小绵羊哥哥的博客
06-11 637
1.什么是脚手架 脚手架用于快速生成新项目的目录模板，并集成一系列体系化工具的安装,无需自己从零开始一步步配置，减少copy操作，有效提升开发体验和效率，尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，所以我们可以定制一个属于自己的脚手架，来提升自己的开发效率。平时我们在开发React-Native的时候就会使用到raect-native-cli这个脚手架为我们创建项目 脚手架的作用 减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 可...
自制React脚手架
weixin_34148508的博客
06-09 290
源码地址 源码 运行效果 特点 不需要重复定义action，比如等待Action、成功Actoin、失败Action。写更少的action，完成更多的事。 export const GET_TABLE = 'GET_TABLE'; export function getTable(params) { return { type: GET_TABLE, ...
通俗讲React技术栈（整合篇）
weixin_41105030的博客
04-02 4523
React是用于构建页面的JavaScript 库(只关注于View) 构建用户界面，其实就是把数据展示出来。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 为什么要学习React 当然是为了统一宇宙…当然开玩笑...
如何建立自己的一个脚手架
weixin_42373116的博客
03-30 2516
前言 这里让我来教大家如何可以从0到1做一个自己的脚手架，vite-eslint-cli为例进行实现，看看我们需要经过哪些步骤呢？？？ 关于vite-eslint-cli 1. 这个脚手架能干什么 💡 基于vite 实现了项目以及规范一体化部署 ⚡️可以从0 到 1快速部署 🛠️ 内置实现vue3/ ts/ eslint/ prettier/ commitlint/ husky/ pinia持久化/ vue-router 📦 可以快速实现从代码以及规范的搭建 2. 跟vite有什么不同呢 💡 内置
如何搭建一个自己的脚手架
qq_42257169的博客
02-19 2037
脚手架 搭建脚手架的目的就是快速的搭建项目的基本结构并提供项目规范和约定。目前日常工作中常用的脚手架有 vue-cli、create-react-app、angular-cli 等等，都是通过简单的初始化命令，完成内容的快速构建。 其实我们也可以用git clone url来新建（复制）项目，再 low 一点的方法就是复制粘贴整个文件夹，一样也能达到初始化的目的。 脚手架的本质也是从远程下载一个模板来进行一个新项目，但是脚手架可是高级版的克隆，它主要是提供了交互式的命令让我们可以动态的更改模板，然后用一句
generator-npm-module:NPM模块的Yeoman生成器
05-19
generator-npm-module 为NPM模块设计的自强生成器 入门 $ npm install -g yo generator-npm-module 在新目录中启动生成器，并按照说明进行操作： $ yo npm-module 执照 国际学习中心
创建自己的脚手架工具（cli）
RocYuan
05-29 1069
前言 vue-cli、create-react-app、angular-cli…已经有了，为什么还要创建自己的脚手架？ 个人需求：每次使用官方自带的脚手架创建好项目后，总是要删除一大堆垃圾代码，还要重复性配置封装各种常用的库；而且不同项目得使用不同的脚手架工具（这个还可以接受，主要是前者）。 以下只是提供了简易的创建过程，为了理清思路，通俗易懂，全写在一个js文件中；一般会进行封装，模块化管理。 思路 使用cli命令行生成项目模板，模板从哪来？其实模板我们可以在github、gitee或自行搭建的
自制脚手架所需基础node工具包
Equation
01-24 857
一、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',
自制 Web Framework 脚手架
wwwmewww的专栏
07-17 280
文章目录外部依赖包commander - 命令行参数解析chalk - 文字颜色修改log-symbols - 命令行图标inquirer 命令行交互download-git-repo - Git下载ora 下载loading 外部依赖包 commander - 命令行参数解析 返回目录 chalk - 文字颜色修改 返回目录 log-symbols - 命令行图标 返回目录 inquirer 命令行交互 返回目录 download-git-repo - Git下载 返回目录 ora 下载loading .
开发属于自己的yeoman脚手架（generator-reactpackage）
weixin_38170561的博客
09-04 114
自从前后端开始分离之后，前端项目工程化也显得越来越重要了，之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程，有兴趣的可以点这里去看 但是有些项目可以使用这种方式，但有些却不太适合，或者我们就是想要去尝试新的框架。比如最近我就尝试着使用了webpack+react+es6的方式开发项目，感觉很不错，然后很多项目都用了这种方式。所以为了不需要每次开发的时候都从...
前端从零搭建自己的脚手架
mengxiaodi的博客
12-23 4862
Webpack脚手架是一个工具，用于快速搭建基于Webpack的项目结构。它通常包括了一些预设的配置和插件，以便用户可以快速开始一个新的项目，而不必从头开始配置Webpack。这些脚手架可以帮助开发人员自动处理诸如打包、代码转译、资源管理等繁琐的任务，从而让他们更专注于项目的逻辑实现。
创建自定义脚手架
千里之行，始于足下！
05-09 1203
创建自定义脚手架：每次开新项目时都需要从头搭建架构，或者就是把之前的项目直接复制粘贴过来修修改改。 当然有时稍微勤奋一点的就会弄个基础模板放在本地或者放在 github，需要的时候直接 clone 过来。 但是其便捷性和通用性极差，就开始想为什么不做一个类似 vue-cli 的命令行工具呢(刚好现在有时间～)
创建自己的简单脚手架工具
badbaby52906的博客
03-20 1337
介绍制作脚手架的简单步骤
如何创建属于自己的脚手架
Ma_lunan的博客
12-18 1200
原理 我们每次搭建项目都需要创建项目，然后进行一系列的基础配置，封装基础api ，配置webpack,浪费了很多时间和精力，用自己封装的脚手架模板就可以每次像创建vue,react那样一样简单，有能力的还可以去封装自己的框架。 参考自beleve666大神的文章 源码查看github 原理就：利用npm封装插件，拉取我们在github上托管的项目，拉取完毕后把依赖的.git .svn删除掉 并用node.js更改json参数 1. 先上插件依赖 commander:完整的 node.js 命令行解决方案 d
IDEA通义灵码AI
最新发布
02-25
### IntelliJ IDEA 中通义灵码 AI 功能介绍 IntelliJ IDEA 提供了一系列强大的工具来增强开发体验，其中包括与通义灵码 AI 相关的功能。这些功能可以帮助开发者更高效地编写代码并提高生产力。 #### 安装通义灵码插件 为了使用通义灵码的相关特性，在 IntelliJ IDEA 中需要先安装对应的插件： 1. 打开 **Settings/Preferences** 对话框 (Ctrl+Alt+S 或 Cmd+, on macOS)。 2. 导航到 `Plugins` 页面[^1]。 3. 在 Marketplace 中搜索 "通义灵码" 并点击安装按钮。 4. 完成安装后重启 IDE 使更改生效。 #### 配置通义灵码服务 成功安装插件之后，还需要配置通义灵码的服务连接信息以便正常使用其提供的各项能力： - 进入设置中的 `Tools | Qwen Coding Assistant` 菜单项[^2]。 - 填写 API Key 和其他必要的认证参数。 - 测试连接以确认配置无误。 #### 使用通义灵码辅助编程 一旦完成上述准备工作，就可以利用通义灵码来进行智能编码支持了。具体操作如下所示： ##### 自动补全代码片段 当输入部分语句时，IDE 将自动提示可能的后续逻辑，并允许一键插入完整的实现方案[^3]。 ```java // 输入 while 循环条件前半部分... while (!list.isEmpty()) { // 激活建议列表选择合适的循环体内容 } ``` ##### 解释现有代码含义 选中某段复杂的表达式或函数调用，右键菜单里会有选项可以请求通义灵码解析这段代码的作用以及优化意见。 ##### 生产测试案例 对于已有的业务逻辑模块，借助于通义灵码能够快速生成单元测试框架及初始断言集，减少手动构建的成本。 ```python def test_addition(): result = add(2, 3) assert result == 5, f"Expected 5 but got {result}" ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值