如何用vue开发小程序（如何用vue开发小程序编程语言）

网友投稿 471 2023-02-19

本篇文章给大家谈谈如何用vue开发小程序，以及如何用vue开发小程序编程语言对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。今天给各位分享如何用vue开发小程序的知识，其中也会对如何用vue开发小程序编程语言进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、使用vue3+ typeScript 开发小程序
2、开发小程序流程
3、得到一套vue小程序怎样导入微信开发者工具？
4、怎么制作小程序
5、基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

使用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 的问题，请在进行如下设置：

详情请参考 https://github.com/dexterBo/mall

如何用vue开发小程序（如何用vue开发小程序编程语言）

开发小程序流程

开发小程序流程：

1、小程序账号注册

小程序需要在微信公众平台注册账号，来管理和发布小程序。账号是邮箱类型，需要公众号认证才能审核通过。

2、前期规划小程序功能

小程序前期要确定功能及类型，需要用到原型图，画出小程序的基本框架及功能。

3、小程序UI设计

根据前期的策划原型图，需要设计出小程序的页面。小程序的设计主要考虑用户体验度，突出重点，流程明确，导航来去自如，加载页面等等。

4、小程序前后端开发

小程序前端代码有小程序源生代码、html5、vue等代码可以编写，有条件建议用源生的代码，运行更快吧。小程序后端代码有php、jsp、asp-、php是应用最广泛的，性价比也最高。同样的功能开发，用php开发的成本最低。前后端开发完成之后，需要写下数据交互，这样小程序和后台的数据就连接起来了。

5、小程序开发测试和线上提交

小程序要对开发出来的功能进行测试，找到bug及时修复。测试代码运行速度，优化代码结构,，测试各个手机端兼容性，能承载多少网络带宽压力。

当小程序开发完毕之后，就要用到小程序账号来配置小程序的名称、图片等信息。然后提交代码给公众号平台审核，审核通过之后，在后台点发布，你的小程序就正式上线。

得到一套vue小程序怎样导入微信开发者工具？

-一个微信开发者工具，选择导入项目，选择你-好的一套vue小程序放置的源码根文件夹，然后等待加载即可。【点击查看小程序开发底价】
想要了解更多有关小程序开发的相关信息，推荐咨询猪八戒网。猪八戒网成立于2006年，是中国领先的企业服务平台，服务交易独角兽企业。猪八戒网现有注册用户2800万、在全国布局线下数字化创业园区超过100个。十余年来，累计有10万余个人通过平台孵化成长为公司，超过100万人通过平台实现灵活就业，千万企业通过平台解决专业服务需求；专业性值得选择。

怎么制作小程序

1、小程序前期策划

在制作小程序之前我们要先知道小程序的功能，我们想要用小程序做什么？我们做小程序的目的是啥？首先要有一个大致的框架。

2、申请一个小程序账号

需要去微信公众平台上面申请一个小程序的账号，在微信官网首页上有注册账号的入口，进入之后选择小程序的模块。在注册小程序的模块中按照提示填好信息和资料，提交后等待审核。审核通过之后，我们就可以开始着手制作小程序了。

3、小程序服务器及域名

不管是小程序还是网站都需要用到服务器及域名，服务器这块需要提前考虑好（阿里云、腾讯云、华为云等服务器）；域名这块（.com、-等）；

4、小程序前端界面设计

根据小程序的框架，由美工设计出小程序的各个页面的图，小程序的设计要做到页面简洁干净，不要有太多的信息，在布局排版上要注意各个内容版块之间要有适当留白，间距合理，避免堆砌。

5、小程序前端后端开发

设计图做好之后，接下来就是前端、后端人员进行开发；小程序前端开发的语言可以用源生的，也可以html5或vue等前端框架。后端语言主流的有php、asp-、jsp。其中php运用最为广泛，开发性价比也最高。

6、小程序审核上线

小程序前端后端设计好之后，接下来就是小城市调试测试，由测试人员进行各个功能板块的测试，找出问题，然后反馈给开发人员进行修改，再确认没有问题之后，然后提交到微信进行审核上线。上线之后交由客户进行检查，确认无误之后进行交接。

7、小程序取名

大家可能会忽略这步，小程序取名也是非常重要的。如果你的名取得好，别人在搜索小程序的时候，就会出现你的小程序。比如你是做什么的，那么你的小程序和做的东西相关。这样获取客户就比较精准一些。

基于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 的微应用项目基本框架我们已经搭建好了，后续就是慢慢填充一些工具和页面了。

暂时没有评论，来抢沙发吧~

如何用vue开发小程序（如何用vue开发小程序编程语言）

使用vue3+ typeScript 开发小程序

开发小程序流程

得到一套vue小程序怎样导入微信开发者工具？

怎么制作小程序

基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

最近发表

更多内容

推荐文章

解决方案

热评文章