基于Vite+Vue3的项目快速生成工具

漫漫，

已于 2024-02-27 15:39:21 修改

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： javascript 前端开发语言架构

于 2022-03-25 11:02:01 首次发布

本文链接：https://blog.csdn.net/qq_44375977/article/details/123730034

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

基于Vite+Vue3的项目快速生成工具 catii-vue3-front

NPM地址：create-catii-vue3-front
GitHub: create-catii-vue3-front
可快速生成项目模板
usage:
npm create catii-vue3-front
npm create catii-vue3-front projectName

已配置模块

Vite + Vue3 + VueRouter + Vuex
ElementPlus + Tdesing + Less + axios
Eslint + Prettier + eslint-config-tencent

启动命令

依赖：npm install
启动：npm run dev
构建：npm run build

项目结构

在这里插入图片描述

初始化界面

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

漫漫，

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于Vite+Vue3的项目快速生成工具

VUE3项目快速生成工具
复制链接

扫一扫

专栏目录

vue-form-generator:vue3 + ts + element-plus表单生成器

04-10

Vue形式生成器项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置请参阅。

vue3-form-wizard:Vue 3 Form Wizard是一个可配置的，完全可自定义的JSON表单生成器，可让开发人员轻松创建基于步骤的表单

05-11

Vue 3表单向导介绍 Vue 3表单向导是一个JSON可配置，完全可自定义的表单生成器，使开发人员可以轻松创建基于步骤的表单。通过指定JSON配置对象，可以轻松生成表单问题。最终结果是基于步骤的表单，它将一次显示一个问题。支持最常见的输入类型：文字输入文字区下拉菜单（可过滤）单选和多选选项列表能够创建自己的自定义输入类型特征完全可定制的风格逐步验证输入自定义验证消息能够查询API以获取列表选项每个问题后的回调目录文献资料目录贡献准则行为守则错误和功能请求版权和许可入门使用节点程序包管理器安装程序包： npm install @anivive/vue3-form-wizard 导入到您的组件中并添加到components键： import VueFormWizard from '@anivive/vue3-form-wizar

参与评论您还未登录，请先登录后发表或查看评论

Vue3可视化表单生成器

云逸的博客

01-07

5528

vains-form-designer 介绍 Vite + TypeScript + Vue3 + Element-plus制作的可视化表单生成器；预览地址项目所需依赖注意：项目中需先添加ElementPlus与ElementIcon的依赖快速开始

(vue3)基于vite+vue3+element-plus项目创建

最新发布

nyf_unknow的博客

06-19

583

第一步 (升级node.js版本到18版本以上)

vue3创建项目

qq_44158369的博客

05-25

222

创建项目前，需要先安装node、webpack、vue@next。安装完成后cd到你想要创建项目的文件夹下面创建项目 vue create 项目名称之后进行对应的选项（这里只给出需要选择的选项） //对应选项 babel,ts,（router,vuex,--不选择，这里我们选择手动集成）css pre-processors,linter/formatter 3.x N Y Less Eslint + prettier Lint on save In dedicated conf

vue3 + elememt-plus 表单生成器

灯火的博客

10-27

1562

昨天写一个表单十几个二十个字段，写起来有点麻烦，中途还出现了改动，一大串一大串看起来有点烦，就算是用循环写也差点意思，刚好今天有闲余的时间，就写了个生成器，自动生成表单。

猫头虎分享：已解决RuoYi-Vue3 项目代码生成器默认生成代码使用的Vue2模板代码问题与Vue2升级到Vue3解决方案

猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！

01-25

2009

🔍 在本篇技术博客中，猫头虎博主将深入探讨RuoYi-Vue3项目中的一个常见问题：代码生成器默认使用Vue2模板代码。我们将分析此问题的具体表现、对开发的影响，并提供详细的解决方案。本文涉及Vue2与Vue3的差异、代码修正方法和模板替换指南，旨在帮助开发者快速适应RuoYi-Vue3环境。无论您是前端初学者还是资深开发者，这篇文章都能为您提供宝贵的参考。关键词：RuoYi-Vue3, Vue2, Vue3, 前端开发, 代码生成器, 模板替换, 技术解决方案。

Vue学习之--vue3创建项目

weixin_43761212的博客

03-18

453

提示：保证 vue cli 版本在 4.5.0 以上，使用命令 vue --version / vue -V 查看版本号文章目录前言一、创建项目创建完成运行项目二、自定义配置文件：vue.config.js1.在根目录中创建 vue.config.js2.配置 vue.config.js2.读入数据总结创建项目通过vue-cli创建项目安装步骤安装完成前言如果版本低于4.5.0，请使用命令 npm install -g @vue/cli 安装或者升级提示：以下是本篇文章正文内容，下面案例可供.

若依管理系统RuoYi-Vue（三）：代码生成器原理和实战

qq_20236937的博客

06-04

924

ruoyi-vue中的ruoyi-generator模块有着完整的代码生成逻辑，但是它依托于ruoyi-admin的spring-boot框架才能运行，现在我要将ruoyi-generator模块的功能独立于spring-boot，让其作为一个普通的spring的程序，只有一个普通的main方法，实现和原来等效的功能。在这里封装的代码生成器不考虑前端页面调整功能，其实现的功能更加注重于后端代码，其作用和“系统工具-代码生成”页面中最简单的生成代码的两步（导入表和下载代码，无编辑）结果等效。

vue3+vite项目基础模板

qq_40441489的博客

10-24

727

vue3+ts项目初始化模板

js表单生成器_看vue3源码可以学到什么 : 四、代码模版生成器

weixin_39952074的博客

12-01

416

前言前面的篇章里了从readme文档中了解了vue3的目标特性，收获了git log规范，及熟悉了一款模块管理工具lerna。本章为大家分享另一项干货，代码模版生成器。内容vue3使用的简单代码模版工具学习开源的JS框架的时，为了解框架的开发构建方式，一般会查看package.json .scripts属性，上面会有对应的npm脚本命令以供开发调试。vue3 对应package.json中的命令...

我问导师，Vue3有没有对应工具来生成漂亮的文档？用 Vitepress

粉丝们务必加入微信粉丝群

04-07

3421

作者：Michael Thiessen 译者：前端小智来源：news 点赞再看，微信搜索**【大迁世界】,B站关注【前端小智】**这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。最近有人在问：小智， Vue3 有没有对应制作文档的工具。于是，我去查了一些资料，发现，Vue3和新的Vite构建工具为我们提供了另一种快速开发静态站点的方法，那就是 .

form-design-next:动态表单页面设计-自动生成页面--vue3.0版本

03-31

动态表单页面设计-Vue3.0版本 Vue3 +打字稿+ Element-Plus重构中... 自动生成H5页面，一些简单的页面无需前端参与，运营人员自己新建修改即可 QQ交流群：扫码加群：项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置请参阅

一款快速生成Vue3代码的插件：Vue VSCode Snippets

weixin_43837268的博客

11-21

1万+

Snippet Purpose vbase Single file component base with SCSS带SCSS的单文件组件库 vbase-3 Single File component Composition API with SCSS带SCSS的单文件组件组合API vbase-3-setup Single File component setup Composition API with SCSS带SCSS的单文件组件安装组合API vbase-3

vue代码生成器

热门推荐

积水成海，积土成岳

09-16

1万+

直接根据swagger api生成vue代码前要目前的代码生成器基本上是基于数据库表格来生成对应的前后台代码，好处是前后台一次性搞定．但实际开发中，很多的业务是需要连表的，所以这种情况来说，根据接口直接生成前代码，就免除了与后台接字段的时间，也免除了很复制操作．由此，我生出编写根据接口生成前端代码生成器的想法．因为我司api文档有两种，前端又有vue2+element和vue3+ant+ts两种框架，由此，扩展出三种代码生成器．思路前端代码生成器，简单的说： ..

极简但是很全的vue3+vite+pinia项目模板，开箱即用

qq_37167086的博客

05-27

4248

极简vue3+vite+pinia项目模板

vite创建vue3项目

qq_45438471的博客

10-11

444

在开发软件阶段，时间就是金钱。VUE CLI和Vite 均是构建Vue项目的工具。而随着开发技术的发展，Vite引起了很多人的关注？为什么会有这个现象的出现呢？因为 Vite 的开发服务器速度很快。Vite对 JavaScript 模块使用本机浏览器支持，所以服务器启动时间是即时的。这种方法还意味着，无论应用程序的大小如何，热模块更换都保持快速，因为不必重建整个捆绑包。接下来，让我们来看看如何用 Vite 创建Vue3项目。

基于Vuetify的Vue动态表单编辑器及代码生成器

适己而忘人者，人之所弃；克己而立人者，众之所戴。

12-27

1453

简介我是一个后端老炮，在做工作流服务时，深感动态表单的重要性。所以，慢慢摸索和学习，结合自己的需求，搭建了本套动态表单系统。本系统是基于 lerna 和 yarn workspaces 构建的， monorepo 方式管理代码的项目（很喜欢这种方式，和 Maven 的模块化工程一样，最主要是不用每个项目一堆 node_modules）基于 Vue 2.0 和 Vuetify 2.3.XX 构建。没有使用 Vue3，主要是 Vuetify 3 还在开发中。共性组件采用 rollup 进行编译，并且.

生成vue模板

liuguochao1024的博客

12-08

725

1，先安装git（可以不用） 2，安装node（安装node同时自动安装npm了）-如果需要升级npm (npm install npm -g ) 3，可以安装淘宝镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 4，安装vue的脚手架工具 npm install -g vue-cli /******

vite +vue3.0+ vue-router4.0 动态添加路由失败

05-01

vite作为一种新型构建工具，它的目标是提供快速的开发体验，但与此同时也包含了一些使用限制，其中包括动态路由表的生成。在使用vue3.0和vue-router4.0时，如果想要动态添加路由，需要在路由表中引入需要添加的组件，并且在组件加载前对路由进行监听，以便在组件加载时能够正确地生成路由表，否则动态路由的添加会失败。因此，我们需要在vue-router4.0中使用addRoute或者addRoutes方法来动态添加路由。在使用这些方法时，需要明确路由的路径和要渲染的组件，以及在路由更新时要执行的逻辑，这样才能保证动态路由的生成和更新。此外，在vite中因为是基于ES模块的加载机制，所以需要确保每个动态路由在使用前都必须被加载完毕，否则可能会出现加载错误的情况。因此，在使用动态路由的过程中，需要对应用程序的代码进行优化，保证所有路由的组件都能够正确地被加载并生成路由表，才能保证动态路由的正确性。