vue3代码生成器,Vue3源码

有哪些生成前端代码的神器呢？

在前端开发的过程中，很多相同的代码会写很多遍。如：开始新项目的时候，要写和旧项目类似脚手架代码；新建一个组件的时候，要按约定写组件结构。如果这些重复代码能用工具来生成，能提升前端的开发效率。

生成代码的工具分为两类：基于命令的和基于图像界面的。

基于命令的工具的优点是，可配置高，效率快。缺点是，可发现性差。适合配置项目很多，配置可以组合的情况。

基于图像界面的优点是，可发现性强，操作简单。缺点是如果配置项很多，容易变得很难用。

罗嗦了一堆，下面开始介绍正题。

项目脚手架代码生成工具

项目脚手架主要做的项目的构建流程，环境的配置等。做到开箱即用。

基于命令的

yo?曾经流行过的一个脚手架生成工具。支持定义脚手架内容。基于 yo 的第三方脚手架也很多。

vue-cli?。 Vue 项目脚手架。支持自定义脚手架内容，感兴趣的可以读读?从vue-cli源码学习如何写模板。

create react app?React 脚手架。比较轻量级，只是整合 webpack 和 react-router。

react boilerplate?React 脚手架。比较重量级，整合了webpack 和 react router, redux, redux suga, reselect 等。

基于图形界面的

定制 Bootstrap 3

组件代码生成工具

基于命令的

react boilerplate?的?nam run generate?可生成组件的脚手架代码。

页面代码生成工具

基于命令的

代码编辑器的代码片段(Code Snippent)功能。主流的代码编辑器(Sublime,Atom,VS Code，Web Strom等) 都支持代码片段。也有写好的代码片段的编辑器插件。主流的框架基本都有对应的代码片段工具。

Emmet?提供 HTML，CSS，JS 的自动补全功能。

Bootstrap 3 Snippets

Vuejs Snippets

基于图形界面的

H5营销页面生成工具。有一大堆。

Maka

初夜

兔展

GrapesJS?强大的网页生成器。开源。

LayoutIt?托拽 Bootstrap 组件，生成页面。

代码中怎么看出使用了vue框架

前端代码生成器，简单的说：

第一步，通过接口文档获取接口的入参＼出参，并将这入参\出参格式化成特定JSON

第二步，根据自己的项目，结合表格、表单组件，抽离出代码模板

第三步，通过第一二步的JSON、代码模板，生成vue、JS以及路由文件

简介

本项目采用puppeteer对接口文档网页读取，获得接口链接、入参、出参等，并记录半生成特定格式的json．

因本项目是为了配合公司的接口文档，生成公司的后台管理网站，定制化较高，所以此项目对于其他朋友来说，可做参考．如其他交流，可以联系我．

技术方案

获接口文档中接口的入参＼出参，我采用爬虫框架puppeteer来获取，根据获得的入参\出参，结合代码模板，生成实际放入工程的增删改查文件，做到增删改查基本不用再码代码．同时支持审核等表格操作。

通过fs.writeFile来生成文件

说明

目前项目中只给了根据接口生成vue2+element的代码．因为代码是根据特定组件生成的．

表格、表单组件见项目中组件目录，这个需要全局引入．见components目录

另有生成vue3+typescript+ant的代码，暂未公布．

配置说明

scale的配置

```js

// 适用于scale的配置

export const config = {

href: '',

serverName: 'AdminStoreContractService',

pages: [{

filePath: 'promotionNew', // 列表＼新＼修页面所在路径

chunkName: 'base', // chunkName 用于路由中 require.ensure 打包参数

list: { // 列表

fileName: 'pn-list', // 列表文件名字

name: '列表', // 菜单名

apiName: 'listStoreContract', // 列表接口名

exportFile: { // 导出 [非必填]

apiUrl: '',

downFileName: ''

}

},

GitHub 近两万 Star，无需编码，可一键生成前后端代码，开源项目

JeecgBoot 是一款基于代码生成器的 低代码 开发平台！前后端分离架构 SpringBoot2.x，SpringCloud，Ant DesignVue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发!

JeecgBoot 提供了一系列 低代码模块 ，实现在线开发 真正的零代码 ：Online表单开发、Online报表、报表配置能力、在线图表设计、大屏设计、移动配置能力、表单设计器、在线设计流程、流程自动化配置、插件能力（可插拔）等等！

JEECG宗旨是: 简单功能由OnlineCoding配置实现，做到 零代码开发 ；复杂功能由代码生成器生成进行手工Merge 实现 低代码开发 ，既保证了 智能 又兼顾 灵活 ；实现了低代码开发的同时又支持灵活编码，解决了当前低代码产品普遍不灵活的弊端！

JEECG业务流程: 采用工作流来实现、扩展出任务接口，供开发编写业务逻辑，表单提供多种解决方案：表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计（松耦合）、并支持任务节点灵活配置，既保证了公司流程的保密性，又减少了开发人员的工作量。

Jeecg-Boot低代码开发平台，可以应用在任何J2EE项目的开发中，尤其适合SAAS项目、企业信息管理系统（MIS）、内部办公系统（OA）、企业资源计划系统（ERP）、客户关系管理系统（CRM）等，其半智能手工Merge的开发方式，可以显著提高开发效率70%以上，极大降低开发成本。

1、服务注册和发现 Nacos

2、统一配置中心 Nacos

3、路由网关 gateway(三种加载方式)

4、分布式 http feign

5、熔断和降级 Sentinel

6、分布式文件 Minio、阿里OSS

7、统一权限控制 JWT + Shiro

8、服务监控 SpringBootAdmin

9、链路跟踪 Skywarking

10、消息中间件 RabbitMQ

11、分布式任务 xxl-job

12、分布式事务 Seata

13、分布式日志 elk + kafa

14、支持 docker-compose、k8s、jenkins

15、CAS 单点登录

16、路由限流

微服务架构图

输入图片说明

输出结果：

先看第一个打印语句，在Java中==这个符号是比较运算符，它可以基本数据类型和引用数据类型是否相等，如果是基本数据类型，==比较的是值是否相等，如果是引用数据类型，==比较的是两个对象的内存地址是否相等。字符串不属于8中基本数据类型，字符串对象属于引用数据类型，在上面把“abc”同时赋值给了st1和st2两个字符串对象，指向的都是同一个地址，所以第一个打印语句中的==比较输出结果是 true

然后我们看第二个打印语句中的equals的比较，我们知道，equals是Object这个父类的方法，在String类中重写了这个equals方法，在JDK API 1.6文档中找到String类下的equals方法，点击进去可以看大这么一句话 将此字符串与指定的对象比较。当且仅当该参数不为null，并且是与此对象表示相同字符序列的 String 对象时，结果才为 true。

注意这个相同字符序列，在后面介绍的比较两个数组，列表，字典是否相等，都是这个逻辑去写代码实现。由于st1和st2的值都是“abc”，两者指向同一个对象，当前字符序列相同，所以第二行打印结果也为true。

下面我们来画一个内存图来表示上面的代码，看起来更加有说服力。

内存过程大致如下：

答案是：在内存中创建两个对象，一个在堆内存，一个在常量池，堆内存对象是常量池对象的一个拷贝副本。

我们下面直接来一个内存图。

当我们看到了new这个关键字，就要想到，new出来的对象都是存储在堆内存。然后我们来解释堆中对象为什么是常量池的对象的拷贝副本。“abc”属于字符串，字符串属于常量，所以应该在常量池中创建，所以第一个创建的对象就是在常量池里的“abc”。

第二个对象在堆内存为啥是一个拷贝的副本呢，这个就需要在JDK API 1.6找到String(String original)这个构造方法的注释：初始化一个新创建的 String 对象，使其表示一个与参数相同的字符序列；换句话说，新创建的字符串是该参数字符串的副本。所以，答案就出来了，两个对象。

答案：false 和 true

由于有前面两道提内存分析的经验和理论，所以，我能快速得出上面的答案。==比较的st1和st2对象的内存地址，由于st1指向的是堆内存的地址，st2看到“abc”已经在常量池存在，就不会再新建，所以st2指向了常量池的内存地址，所以==判断结果输出false，两者不相等。第二个equals比较，比较是两个字符串序列是否相等，由于就一个“abc”，所以完全相等。内存图如下

答案是：true 和 true

分析：

答案：false 和 true

上面的答案第一个是false，第二个是true，第二个是true我们很好理解，因为比较一个是“abc”，另外一个是拼接得到的“abc”，所以equals比较，这个是输出true，我们很好理解。那么第一个判断为什么是false，我们很疑惑。同样，下面我们用API的注释说明和内存图来解释这个为什么不相等。

首先，打开JDK API 1.6中String的介绍，找到下面图片这句话。

关键点就在红圈这句话，我们知道任何数据和字符串进行加号（+）运算，最终得到是一个拼接的新的字符串。上面注释说明了这个拼接的原理是由StringBuilder或者StringBuffer类和里面的append方法实现拼接，然后调用toString（）把拼接的对象转换成字符串对象，最后把得到字符串对象的地址赋值给变量。结合这个理解，我们下面画一个内存图来分析。

大致内存过程

所以，st3和st2进行==判断结果是不相等，因为两个对象内存地址不同。

这篇的面试题，完全就是要求掌握JDK API中一些注解和原理，以及内存图分析，才能得到正确的结果，我承认是画内存图让我理解了答案为什么是这样。画完内存图之后，得到答案，你确实会发现很有趣，最后才会有原来如此的感叹。

VuePress-Vue驱动的静态网站生成器入门教程

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby

1、创建并进入一个新目录

2、使用你喜欢的包管理器进行初始化

3、将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

4、创建你的第一篇文档

5、在 package.json 中添加一些 scripts

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

6、在本地启动服务器

VuePress 会在 (opens new window)启动一个热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的 目录结构 和 VuePress 中的 基本配置。

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

对于上述的配置，如果你运行起 dev server，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。

你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件。

一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage） 等，

由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧

JeeCGBoot低代码开发平台，强大的代码生成器前后端一起生成

今日推荐：JeeCGBoot低代码开发平台

推荐理由：

1、前后端实现分离架构，通过API调用，实现架构解耦

2、项目集成SpringBoot、SpringCloud的Spring全家桶

3、在线实现开发，表单开发设计、报表配置、在线图表设计、在线设计流程、流程自动化、插件能力等

4、系统集成了工作流，实现扩展任务接口。

5、解决java项目的70%的重复工作

6、最重要的是技术售后的完善，有完善的开发文档，常见问题，交流群

适用场景

1、内部办公系统OA

2、企业资源计划系统ERP

3、客户关系管理系统CRM

4、企业信息管理系统

5、电商SAAS系统

功能特色：

1、支持微服务SpringCloudAlibab全家桶

2、前后端高效代码生成器，单表，一对多模型，CRUD等功能一键生成

3、低代码图表功能，在线设计图表无需编码，实现曲线图，柱状图，数据报表等自定义排版布局

4、封装各种工具类，如定时任务，短信接口邮件发送，excel导入，文件上传下载等

5、支持查询过滤器，动态拼装SQL追加查询条件

6、实现数据权限，控制到行级，列表级，表单字段级，实现不同人看不同数据

7、支持SAAS服务模式，提供多租户的架构方案

8、数据库兼容主流Mysql、PostgreSql、Oracle、SQLServer、MariaDB等主流数据库，一套代码兼容主流

9、集成了Activiti工作流

10、支持单点登录CAS集成方案

11、接口统一采用restful接口方式，集成了Swagger-ui在线接口文档

技术架构：

后台环境：

Java8+Maven+Mysql+Redis

后台开发技术

springBoot2+SpringCloudAlibaba+MybatisPlus+Jimurport+ApacheShir

前端：

Vue2.6+Axios

微服务架构图：

后台操作图：

支持手机端

Jeecgboot-Vue3 v1.0.0 版本正式发布，基于代码生成器的企业级低代码平台

Jeecgboot-Vue3 采用 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。 是在 Vben-Admin 基础上研发的，适合于JeecgBoot的新版前端VUE3框架。

当前版本 ：v1.0.0 | 2021-03-21

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。 建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

本地开发 推荐使用 Chrome 最新版 浏览器， 不支持 Chrome 80 以下版本。

生产环境 支持现代浏览器，不支持 IE。