基于vue3.0小程序开发框架（微信小程序 vue3）
本篇文章给大家谈谈基于vue3.0小程序开发框架，以及微信小程序 vue3对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、Jeecgboot-Vue3 v1.0.0 版本正式发布，基于代码生成器的企业级低代码平台
- 2、基于vue的ui框架有哪些
- 3、Vue3+elemetPlus支持动态路由和菜单管理UI框架
- 4、uni-app 项目小程序端支持 vue3 介绍
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。
基于vue的ui框架有哪些
6283 star 饿了么开源的，支持 vue2.0
3073 star 使用 Vue.js 和纯 JavaScript 构建的 Bootstrap 组件，用的 vue 1.x
2326 star ，适合 PC 网页，目前只支持 Vue.js 1.x 版本。
5994 star 结合了 weui ，用的 vue 1.x
3809 star ，支持 vue2.0
Vue3+elemetPlus支持动态路由和菜单管理UI框架
内容较多请耐心阅读，你认真读完一定获益匪浅
这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。
"element-plus": "^1.0.2-beta.70",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。
2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库， 避免因为项目集成库过多给你带来烦恼 。
3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。
4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。
5、 更少的干扰 。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。
Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。
我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue'
import router from './router'
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')
// 注册全局组件
import Uicon from './unitui/sub/Uicon.vue'
app.component('Uicon',Uicon)
你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改
这是一个全局注册的图标选择器，你可以在任意组件通过 使用图标选择器，它挂载在main.js文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。
实际效果
这是一个非常重要的内置组件，它主要用于模拟登录时的操作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。
其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：
init_route(route_data) {
//依据后端返回的json数据生成路由
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () = import(`@/${route_data[index].children[i].component}`),
// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
this.$router.addRoute(init_route_data[index]); //循环添加数组
}
this.init_menu(); //执行菜单生成方法
},
其他三个你可以随意修改
在vue2动态路由项目之中，在app.vue文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容，然后再main.js中引入。
init_route.js内容：
import router from '@/router'
function init_route() {
//依据后端返回的json数据生成路由
if (sessionStorage.getItem("route_data") != null) {
const route_data = JSON.parse(sessionStorage.getItem("route_data"));
// console.log(route_data);
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () =
import(`@/${route_data[index].children[i].component}`),
// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
router.addRoute(init_route_data[index]); //循环添加数组
}
// 这里放置刷新
// console.log('app');
// const index=window.location.href.lastIndexOf("#")
// const url=window.location.href.substring(index+1,window.location.href.length);
// this.$router.push(url)
}
}
init_route()
在main.js中引用：
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
此时便可完成刷新自动初始化
我们通过在app.vue文件中通过获取路由中meta. show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。
App.vue源码：
1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为：
#sub_admin_back {
width: 100%;
/* 非ui框架将height写为height: 100vh; */
height: 100vh;
background-size: cover;
position: relative;
background-color: #ffffff;
border-radius: 10px;
}
1、没能尽可能减少对框架的干扰，你仍然需要保持对main.js的适当修改。
uni-app 项目小程序端支持 vue3 介绍
随着 vue3 的发布， uni-app 也逐步支持 vue3 。
目前小程序平台已支持，h5、App 平台暂不支持。
除支持 vue3 语法特性外， uni-app 特有的生命周期钩子支持 Composition API ，如 onLaunch ， onShow ， onLoad …
下面介绍创建支持 vue3 的 uni-app 项目的流程，以及使用中的一些注意事项。vue3 相关问题请关注vue官方文档 vue3 中文文档。
目前仅支持 cli 方式创建支持 vue3 默认模板项目。
如果你之前没有使用过 vue-cli 方式创建过项目，需要先安装 vue-cli ，若已安装则跳过步骤 1。
步骤 1: 全局安装vue-cli
步骤 2: 用如下的命令创建vue3工程
步骤 3: 创建好工程后，进入对应目录
步骤 4: 将项目跑到微信平台
需要将编译后的文件 dist/dev/mp-weixin 导入微信开发者工具运行，也可将项目拖入 HbuildX 中运行，方便运行到各个平台。
欢迎开发者反馈使用该版本遇到的问题，我们将积极收集意见。
后续：
DCloud之所以不支持vue3的h5和app版，主要是因为vue3的组件中很多语法的写法发生变化，这导致uni-app的h5版基础组件库和app版基础组件库的写法与vue3不兼容。
当然除了基础组件，插件市场的所有插件（包括uni ui），都不支持vue3。即便是uni-app已经推出的vue3的小程序版，也不支持插件市场的插件。
考虑到生态兼容的重要性，vue官方（尤雨溪）计划2021年4月中下旬推出新版，对vue2的语法做兼容，届时uni-app的h5版和app版将同时推出，并且插件市场的众多插件也将自动适配vue3版的uni-app。
关于基于vue3.0小程序开发框架和微信小程序 vue3的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
