基于vue的小程序开发（小程序用vue开发）
今天给各位分享基于vue的小程序开发的知识，其中也会对小程序用vue开发进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、vue小程序分类
- 2、微信小程序框架解析
- 3、基于Vue3+TS+ElementPlus+Qiankun构建微应用项目
- 4、推荐两个微信小程序开发框架
- 5、使用vue3+ typeScript 开发小程序
vue小程序分类
Vue小程序分类如下：
1.mpvue
2.uni-app
3.megalo
以上都是Vue开发小程序的框架。
微信小程序框架解析
微信小程序框架（Vue.js）
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生
APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言
WXML 和 WXSS，以及基于 JavaScript
的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
在刚接触微信小程序的时候，就是官方提供的这个框架，其实该框架的思想和vue还是有相似之处，正所谓万变不离其宗。只不过这个框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最终打包生成的文件才是官方所需要的。所以我建议就是初学者，还是可以先使用或学习下该框架，更能直接的了解小程序和学习。所以初学者值得推荐。
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目
Hello 大家好，这里是Anyin。
最近打算把一个小型项目（小程序点餐系统）重构为微服务+微应用模式，前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下我在构建基础微应用的过程。
重构后的项目相关地址：
•后端： Anyin Cloud [1]
•前端基座： Anyin Cloud Parent[2]
•前端微应用： Anyin Cloud Base[3]
好了，接下来，我们来看看如何基于 Vue3+TS+ElementPlus+Qiankun 构建我们的微应用项目。
另外说下，这里为什么不用 Vite 进行构建，原因是 Vite 目前结合 Qiankun 构建为应用还有点问题（采坑了），所以这里就放弃了。
首先，我们使用 vue-cli 创建一个parent项目:
接着，手动选择我们要添加的组件：
我们选择以下组件进行应用的构建，使用空格键进行多选，然后回车即可：
选择vue3.x版本
相关代码风格、路由模式都是使用默认，css编译我们使用less：
相关编码规范我们使用ESLint + Airbnb Config ：
最后，完整的选项如下：
当vue-cli帮我们创建好项目，我们进入项目查看下项目目录，如下：
首先，Qiankun的主应用是需要安装依赖的，微应用无需安装依赖，修改配置即可。这里我们先在主应用安装依赖
接着，进行相关微应用配置。我们新增一个 app.ts ，用于记录所有的微应用的入口：
然后，注册微应用，并导出start方法
导出 start 方法之后，需要在入口处执行该方法
对于整个界面，我们希望整体的布局是这个样子的：
所以，我们在安装 ElementPlus 之后，需要做这样子的布局。
首先，安装 ElementPlus
接着，在 main.ts 引入 ElementPlus 组件，如下:
然后，创建一个布局组件 Layout.vue ，如下：
最后，在App.vue注册该组件
运行起来呈现的效果如下：
微应用的初始化项目同主应用，这里就不详细说明。
微应用无需依赖 Qiankun ，这里我们做一些配置即可。
在 src 目录下新增一个 public-path.js 文件，内容如下：
在 main.ts 引入该文件
新增一个路由配置文件，这里我们创建对应的路由信息，并且兼容独立运行，内容如下：
接着，修改 main.ts 关于实例化的代码，如下：
这里主要是定义个渲染的方法，然后暴露Vue实例，因为等下在微应用的生命周期的钩子会使用到。
对于微应用还需要暴露生命周期的钩子方法，这样子主应用才能够识别，在 main.ts 添加如下方法：
使用 vue 创建项目是没有 vue.config.js 文件的，这里我们手动创建一个，并且配置相关详细，代码如下：
•这里我们导入了 package.json 的 name 字段，因为这里需要和主应用配置的 app.ts 文件的 name 字段一致 • headers 添加跨域配置，因为主应用是通过 fetch 方法来获取微应用的资源的，而微应用是启动在另外一个端口，所以需要添加跨域配置 • output 配置了微应用的打包格式，主应用才能正确识别微应用的一些配置
还记得我们以下这个图不？
我认为 Header 应该是属于主应用，而下面的 Aside 和 Main 都是属于微应用， Aside 块一般都是用于展示菜单，个人认为各个微应用应该各自维护自己的菜单，而不是交由主应用维护。
所以，在微应用，我们还需要处理下左侧的菜单布局。
我们新增一个 Layout.vue 布局文件
至此，Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成，整体运行看下效果：
首页
微应用
好了，基于 Vue3+TS+ElementPlus+Qiankun 的微应用项目基本框架我们已经搭建好了，后续就是慢慢填充一些工具和页面了。
相关源码地址：
•主应用： Anyin Cloud Parent
•微应用： Anyin Cloud Base
[1] Anyin Cloud :
[2] Anyin Cloud Parent:
[3] Anyin Cloud Base:
推荐两个微信小程序开发框架
下面是最近了解的，开发者使用较多的框架：
1. WePY
WePY属腾讯系，是一款组件化的开发框架，比原生小程序的开发模式更接近于MVVM ，它类Vue的开发风格，让Vue开发者很容易上手。
Github地址:
官网地址：
2. mpvue
mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
Github：
官网：
使用vue3+ typeScript 开发小程序
要求是使用 vue3 + typescript 进行开发小程序和H5的跨端应用
在 uniapp 和 taro 这两个之中进行选择 在参了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 的支持尚不完全比如说暂不支持 setup 语法糖对于h5的支持比较差 没有支持 vue3 的 ui 框架等等。
node.js
注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：
如果出现类似 Could not find module View in @tarojs/components 的问题，请在进行如下设置：
详情请参考
关于基于vue的小程序开发和小程序用vue开发的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
