【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟

【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟

Hello大家好我是⛄,之前我们已经配置了脚手架需要具备的基本功能:代码封装,团队协作规范等。但是可能我们有其他的需求,比如说我们想快速生成几个基础的组件模板我们可以使用Plop或者使用文件写入实现。比如我们不想等后端同学的接口,可以直接使用mock模拟数据生成。

  • GitHub:LonelySnowman/sv3-template
  • 官方文档:SV3-Family | Vue3
  • 前置知识:Vue全家桶,了解Vite或WebPack等构建工具,Node.js
  • 您将收获到:从零到一构建一个规范的 Vue3+TS+Vite 脚手架

配置 plop

  • 想一想平时我们是如何新建一个组件的,右键->新建文件->命名文件->编写组件代码,或者直接使用命令行生成文件,并且这些组件都会编写一些重复的内容,这些内容在新建时就具备,我们平常可能就直接ctrl+cctrl+v,还是有一点繁琐的😓。有没有一种方法能快速生成各种组件的模板呢?接下来就要用到我们的plop啦😀,它可以帮助我们快速生成开发模板,提高效率。
  • plop是一种“微型生成器框架” 。 这是因为它提供了一种快速生成代码或其他文本文件的便捷方式,同时又保持了很小的体积。我们总是在代码中创建不同的结构和模式,如路由、控制器、组件、工具类等。这些模式会随着时间的变化不断地被改变和优化,所以当你想要去创建一个新的已经存在的模版时,你很难在你的项目/代码中找到对于当前需要创建的模板的最佳实践,这时候就轮到 plop 大展身手了。使用 plop, 你能够随时在项目中更新某种特定代码模式的最佳实践,你只需要在命令行中键入 plop 就能快速地运行代码。这不仅能避免从整个代码库中寻找最佳模板然后复制的过程,而且又能正确高效地创建文件。
  • 官方文档:Learning to Plop : PLOP (plopjs.com)

安装依赖

pnpm install -D plop

编写命令行交互

  • 接下来以新建一个vue组件的模板为例
  • 在项目根目录下创建一个用于存放开发模板的文件plop-templates
  • 再新建一个component文件夹代表这里面存放开发组件的模板
  • component中新建index.hbs编写文件模板,prompt.js编写交互逻辑
|plop-templates|components|index.hbs|prompt.js

接下来我们就可以在prompt.js中编辑交互逻辑啦

我们需要在该模块导出一个配置项,主要需要配置三个内容

  • description:该模板的名称
  • prompts:该模板需要的参数
  • actions:执行后需要进行的操作

具体详情可以看下面的代码,均已加入详细注释

const fs = require('fs');
const path = require('path');
// 引入便于我们验证问价夹中是否存在重名文件的工具函数,后面有详细代码
const verifyFileExist = require('../utils');
// 引入我们需要创建该模板到达的基础路径位置
const baseFile = path.join(__dirname, '../../src/views');
​
module.exports = {// 编写对模板件的描述description: '创建组件',// 编写命令行交互逻辑,可在命名行中获取参数prompts: [{name: 'componentName', // 该参数的名称 之后可以使用 componentName 调用type: 'input', // 该参数的类型 input 代表输入message: '请输入页面名称', // 该交互的提示信息validate: (dirName) => { // 传入一函数对用户传入的参数进行校验if (!dirName || dirName.trim === '') { // 验证用户是否输入return '组件名称不能为空'; // 返回字符串报错} else if (verifyFileExist(dirName, baseFile)) { // 验证文件是否存在return '组件已经存在'; // 返回字符串报错} else {return true; // 返回 ture 则继续执行 action}},},],// 编写接收完参数后需要执行的操作actions: (data) => {const basePath = path.join(baseFile, `./${data.pageName}`);// 新建一个组件文件夹fs.mkdirSync(basePath);// 新建一个组件文件夹下的通用组件文件夹fs.mkdirSync(path.join(baseFile, `./${data.pageName}/components`));// 最后我们需要返回一个 actions// type 用于配置执行的操作类型 add 代表新增文件// path 代表新建文件的路径// templateFile 代表我们使用的模板 下文会有const actions = [{type: 'add',path: path.join(basePath, 'index.vue'),templateFile: path.join(__dirname, './index.hbs'),},];return actions;},
};

因为检测一个文件是否存在需要经常使用,我们将其封装成一个函数抽离出来,在plop-templates/utils.js中编写:

  • 就是一个简单的验证函数,大家根据自己的习惯编写即可
const fs = require('fs');
​
// 验证文件在文件夹中是否存在
function verifyFileExist(dirName, dirPath, tail = '') {const directories = fs.readdirSync(dirPath);return directories.includes(dirName + tail);
}
​
module.exports = verifyFileExist;

编写开发模板

我们在plop-templates/components/index.hbs中编写组件的模板:

每一个字符都会被写入actions中返回的path目标文件中,只有被双大括号包裹的内容会被解析成prompts传入的参数。

下面的 {{ properCase pageName }} 就是表示写入 pageName 参数 并且小写。

<template><div>{{ properCase pageName }}</div>
</template>
​
<script lang="ts" setup>
// typeScript
</script>
​
<style lang="scss" scoped>
/* scss */
</style>

调用指令

要使用我们的开发模板,我们需要在项目根目录下新建一个plopfile.js进行配置,详细内容如下:

module.exports = function (plop) {// 设置欢迎语plop.setWelcomeMessage('请选择需要创建的模板');// 设置选择的生成器模板// 第一个参数为对应名称// 第二个参数为 prompts 的地址plop.setGenerator('components', require('./plop-templates/page/prompt'));
};

然后我们在package.json中配置一条指令便于我们调用

{"scripts": {"gen": "plop"},
}

运行该指令就可以快速生成我们配置好的模板啦😄。

以上内容为一个简单的小示例,plop 还有非常多强大的功能,大家可以前往官方文档探索:Learning to Plop : PLOP (plopjs.com)

项目里已为大家配置好了各种

配置 mock

  • 想想我们平时对接接口是怎么做的,首先前后端确定好接口,让后确定好接口文档。如果已经编写好前端代码,就差与后端对接了,只能自己傻傻等待么😴。当然不是,我们可以使用 mock 工具进行数据的模拟,提前编写好数据展示的内容,最后对接的时候关闭 mock 即可。
  • mock 实现的方式有很多,我们使用的 vite 就有一个插件满足我们的需求:vite-plugin-mock

安装依赖

pnpm install -D mockjs vite-plugin-mock

返回内容配置

mock 的编写方式非常非常简单,只需要一个数组即可。

我们在项目根目录下新建一个mock文件夹,并在其中新建一个user.ts用于用户登录的数据模拟。

配置方式也是非常的简单

  • url:配置接口URL地址
  • method:配置接口的请求方式
  • response:编写一个函数,编写处理逻辑,并返回响应的内容。
import { MockMethod } from 'vite-plugin-mock';
export default [{// 前面的 /mock 为 mock 生效需要配置的根路径 后面会提到url: '/mock/api/login',method: 'post',// 使用 body 可以获取请求体response: ({ body }) => {// 简单编写一个逻辑// 用户名不等于密码就是密码错误if (body.username !== body.password) {// 返回JSON信息return {code: 1,message: '密码错误',data: {username: '',roles: [],accessToken: '',},};}// 其余的则显示登录成功if (body.username === 'admin') {return {code: 0,message: '登录成功',data: {username: 'admin',roles: ['admin'],accessToken: 'admin',},};} else {return {code: 0,message: '登录成功',data: {username: 'common',roles: ['common'],accessToken: 'common',},};}},},
] as MockMethod[];
​

启用 mock

启动 mock 需要我们配置一下 vite

// 在 plugins 数组中加入如下配置
[viteMockServe({// 如果接口为 /mock/xxx 以 mock 开头就会被拦截响应配置的内容mockPath: 'mock', // 数据模拟需要拦截的请求起始 URLlocalEnabled: true, // 本地开发是否启用prodEnabled: false, // 生产模式是否启用}),
]

然后我们所有以 mock 开头的接口都会成为我们使用 mock 模拟的返回数据

关闭 mock

  • 如果后端同学接口测试完毕,需要我们正式对接了,我们不想启用 mock 了该怎么办,可以在 vite 配置中关闭,但我喜欢使用环境变量配置mock的开关

编写.env

// 后端接口的根路径
VITE_APP_API_BASEURL = /api
// 需要模拟的请求根路径
VITE_APP_MOCK_BASEURL = /mock/api

编写.env.development

// 选择 development 模式下是否开启 mock
VITE_APP_USE_MOCK = true

编写.env.production

// 选择 production 模式下是否开启 mock
VITE_APP_USE_MOCK = true

配置 axios 全局请求路径

之前我们已经将 axios 封装在 src/utils/http/index.ts 中,我们可以在此根据环境变量配置 axios 的请求路径

const service: AxiosInstance = axios.create({// 启用 mock 就请求 mock 路径// 不启用 mock 就请求 正常后端路径baseURL: Boolean(import.meta.env.VITE_APP_USE_MOCK)? import.meta.env.VITE_APP_MOCK_BASEURL: import.meta.env.VITE_APP_API_BASEURL,timeout: 15000,
});

注意:这里我们并不需配置后端地址,统一请求 LocalHost。我们只需要开启本地代理在 vite proxy 中配置后端地址即可,这样方便一些。

这样我们就可以轻松的选择开关 mock 啦😀

结语

每个人的使用习惯不同,这里提供了我常用的方法供大家参考,如有其他使用方法欢迎大家讨论😄。

终于把第四节更新完啦,一个最基础的 Vue3+Vite+TS 前端开发脚手架就搭建完成了,日后技术栈更新会帮助大家提供更改好的方案,大家对该项目的意见也请及时指出,我会汲取大家的意见不断学习并更新。

参考学习项目

  • fast-vue3
  • vue-pure-admin

如果有任何不正确的地方请指正,我会及时更改。

更文不易,如果对你有帮助的话,请给我点个赞吧👍

关注我,后续文章不迷路⛄

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/798514.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

副业选择攻略:如何找到最适合自己的那一个?

大家好&#xff0c;我是木薯。今天有个新人伙伴来咨询客服&#xff1a;新手适不适合在水牛社上做副业&#xff1f;什么样的副业适合自己&#xff1f; 这种问题其实对我们来说已经见得太多太多了&#xff0c;归其原因是因为自己对副业没有一个清晰的自我认知&#xff0c;从而感觉…

基于LEAP模型的能源环境发展、碳排放建模预测及不确定性分析

在国家“3060”碳达峰碳中和的政策背景下&#xff0c;如何寻求经济-能源-环境的平衡有效发展是国家、省份、城市及园区等不同级别经济体的重要课题。根据国家政策、当地能源结构、能源技术发展水平以及相关碳排放指标制定合理有效的低碳能源发展规划需要以科学准确的能源环境发…

前视声呐目标识别定位(九)-声呐驱动

前视声呐目标识别定位&#xff08;一&#xff09;-基础知识 前视声呐目标识别定位&#xff08;二&#xff09;-目标识别定位模块 前视声呐目标识别定位&#xff08;三&#xff09;-部署至机器人 前视声呐目标识别定位&#xff08;四&#xff09;-代码解析之启动识别模块 …

Spring——框架介绍

每一个Java技术中都会存在一个“核心对象”&#xff0c;这个核心对象来完成主要任务为了得到核心对象&#xff0c;需要创建若干个辅助对象&#xff0c;从而导致开发步骤增加JDBC中 JDBC 核心对象——PreparedStatement 通过DriverManager得到数据库厂商提供的Driver对象DriverM…

京东云轻量云主机8核16G配置租用价格1198元1年、4688元三年

京东云轻量云主机8核16G服务器租用优惠价格1198元1年、4688元三年&#xff0c;配置为8C16G-270G SSD系统盘-5M带宽-500G月流量&#xff0c;华北-北京地域。京东云8核16G服务器活动页面 yunfuwuqiba.com/go/jd 活动链接打开如下图&#xff1a; 京东云8核16G服务器优惠价格 京东云…

MySQL数据库基础--存储引擎

MySQL体系结构 连接层 最上层是一些客户端和链接服务&#xff0c;主要完成一些类似于连接处理&#xff0c;授权认证&#xff0c;及相关的安全方案&#xff0c;服务器也会为安全接入的每个客户端验证他所具有的操作权限。 服务层 第二层架构主要完成大多数的核心服务功…

【C++入门】缺省参数、函数重载与引用

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

就业班 第二阶段(python) 2401--4.3 day2 python2

七、标准数据类型 1、为什么编程语言中要有类型 类型有以下几个重要角色&#xff1a; 对机器而言&#xff0c;类型描述了内存中的电荷是怎么解释的。 对编译器或者解释器而言&#xff0c;类型可以协助确保上面那些电荷、字节在程序的运行中始终如一地被理解。 对程序员而言…

C++算法 —— 递归

一、汉诺塔问题 1.链接 面试题 08.06. 汉诺塔问题 - 力扣&#xff08;LeetCode&#xff09; 2.描述 3.思路 4.参考代码 class Solution { public:void hanota(vector<int>& A, vector<int>& B, vector<int>& C) {dfs(A.size(),A,B,C);}void…

MySQL中的锁(二) - 行锁

一、行锁简介 MySQL中行锁是一种用于控制并发访问的锁机制&#xff0c;它可以在事务中对数据库表的行进行加锁&#xff0c;以保证数据的一致性和完整性。行锁是MySQL中最细粒度的锁&#xff0c;只锁定事务需要修改的数据行&#xff0c;而不是锁定整个表或者数据库。 MySQL行锁…

Java项目:基于Springboot+vue社区医院管理系统设计与实现(源码+数据库+毕业论文)

一、项目简介 本项目是一套基于Springbootvue社区医院管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能…

百元不入耳蓝牙耳机哪个好?必入五款高性价比产品

喜欢听歌的朋友都会遇到一个常见问题&#xff0c;长时间戴耳机容易导致耳朵不适&#xff0c;甚至疼痛难忍。这种情况下&#xff0c;要是不听音乐反而感到不舒服&#xff0c;真是让人苦恼&#xff0c;仿佛音乐与耳机无法和谐共存。但是&#xff0c;难道就没有一款既舒适又让人心…

【STL】list的底层原理及其实现

文章目录 list的介绍list的整体结构设计list的构造代码模拟实现&#xff1a; list节点类的实现list 迭代器Iterator的使用以及实现Iterator的使用Iterator的底层实现反向迭代器 list与vector的比较实现list类 list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列…

4.7学习总结

java学习 一.Stream流 (一.)概念: Stream将要处理的元素集合看作一种流&#xff0c;在流的过程中&#xff0c;借助Stream API对流中的元素进行操作&#xff0c;比如&#xff1a;筛选、排序、聚合等。Stream流是对集合&#xff08;Collection&#xff09;对象功能的增强&…

使用ShardingSphere报错

使用ShardingSphere报错 1604 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near SHOW VARIABLES LIKE sql_mode; SELECT COUNT(*) AS support_ndb FROM information_ at line 1报错…

【STL学习】(4)vector的模拟

前言 本文将模拟实现vector的常用功能&#xff0c;目的在于更深入理解vector。 一、前置知识 在模拟之前先对vector的结构和常用接口学习&#xff0c;有一个大致了解。看源码&#xff0c;本文参考的源码是SGI版本的stl3.0。 技巧&#xff1a; 看源码不要一行一行的看&#xff…

全局监听钩子实现 笔记本x键坏了用其他键代替,或者类似游戏一键连招功能实现 (附带脚本开机一键运行)

前言 问题:博主使用笔记本时擦键盘不小心 进水了导致 坏了2个键盘 更换太麻烦所以想出了几个方法 1 系统自带的模拟键盘 可是每次都要点出来太麻烦 2 使用第三方工具 结果只找到github源码 下载地址找不到 /(ㄒoㄒ)/~~ 3 使用java方法 KeyListener 使用KeyListener监听键盘事件…

【全套源码教程】基于SpringBoot+MyBatis+Vue的流浪动物救助网站的设计与实现

目录 前言 需求分析 可行性分析 技术实现 后端框架&#xff1a;Spring Boot 持久层框架&#xff1a;MyBatis 前端框架&#xff1a;Vue.js 数据库&#xff1a;MySQL 功能介绍 前台界面功能介绍 动物领养及捐赠 宠物论坛 公告信息 商品页面 寻宠服务 个人中心 购…

Qt+OpenGL入门教程(四)——VBO、VAO和EBO

前面我们已经简单绘制了一个三角形&#xff0c;但这只是个小demo是远远不够的&#xff0c;当顶点数据很多时&#xff0c;解析很麻烦时我们应该如何处理呢&#xff1f;接下来我们来介绍一下在OpenGL开发中帮助我们提升渲染性能的几种数据对象。 注意&#xff1a;所有代码都是基…

全面探究 LangChain Text Splitters

全面探究 LangChain Text Splitters 0. 引言1. 文本拆分器的类型2. 探究各个文本拆分器2-1. Split by HTML header2-2. Split by HTML section2-3. Split by character2-4. Split code2-5. MarkdownHeaderTextSplitter2-6. Recursively split JSON2-7. Recursively split by ch…