vue小程序开发框架有哪些?基于vue开发微信小程序的入门开发教程

知梧 1636 2022-09-15

本文转载自网络公开信息

本文关于vue小程序开发框架有哪些?基于vue开发微信小程序的入门开发教程。

常见的vue小程序框架有:1.mpvue,使用Vue.js开发的小程序前端框架;2.uni-app,使用Vue.js开发的小程序、h5、app的统一前端框架;3.Megalo,基于Vue开发的小程序开发框架;

vue小程序框架有哪些


⭐️ 常见的vue小程序框架有以下几种

1.mpvue

mpvue是一款使用Vue.js开发的小程序前端框架,其设计目的是提高开发效率,增强开发体验,mpVue可以将代码解析转换为小程序并确保其正确运行,使用mpvue开发小程序时,无需了解小程序开发规范,熟悉vue中的基本语法即可。

2.uni-app

uni-app是一个使用Vue.js开发的小程序、h5、app的统一前端框架,使用uni-app时可以将vue语法编写的代码编译到小程序中,并保证其可以正确运行,且uni-app具有跨端数量多、性能体验好、开发成本低的特点。

3.Megalo

Megalo是一款基于Vue开发的小程序开发框架,使用Megalo时可以通过Vue的开发方式开发一个小程序应用,且Megalo可以通过进行少量修改,即可将H5和小程序进行转换,相对于其他小程序开发框架,Megalo具有双向绑定、过滤器、富文本和复杂表达式插值的特性。


购买使用亿速云服务器,可以极大降低初创企业、中小企业以及个人开发者等用户群体的整体IT使用成本,无需亲自搭建基础设施、简化了运维和管理的日常工作量,使用户能够更专注于自身的业务发展和创新。

1. 初始化一个 mpvue 项目

现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先** nodejs 并安装。

然后打开命令行工具:


  1. # 1. 先检查下 Node.js 是否安装成功
  2. $ node -v
  3. v8.9.0
  4. $ npm -v
  5. 5.6.0
  6. # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
  7. $ npm set registry /
  8. # 3. 全局安装 vue-cli
  9. # 一般是要 sudo 权限的
  10. $ npm install --global vue-cli@2.9
  11. # 4. 创建一个基于 mpvue-quickstart 模板的新项目
  12. # 新手一路回车选择默认就可以了
  13. $ vue init mpvue/mpvue-quickstart my-project
  14. # 5. 安装依赖,走你
  15. $ cd my-project
  16. $ npm install
  17. $ npm run dev


随着运行成功的回显之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。

2. 搭建小程序的开发环境

小程序自己有一个专门的微信开发者工具。

这一步比较简单,按照提示一步步安装好就行,然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。

3. 调试开发 mpvue

选择 小程序项目 并依次填好需要的信息:

  • 项目目录:就是刚刚创建的项目目录(非 dist 目录)

  • AppID:没有的话可以点选体验“小程序”,只影响是否可以真机调试。

  • 项目名称。

如图:

点击“确定”按钮后会跳到正式的开发页面,点击“编辑器”按钮,关闭自带的小程序编辑器。然后如图:

此时,整个 mpvue 项目已经跑起来了。

用自己趁手的编辑器(或者IDE)打开 my-project 中的 src 目录下的代码试试,如示例:

有详细视频地址链接   

到此,上手完毕。

4. 分包机制 2018.7.23

mpvue-loader 1.1.2-rc.2 之后,优化了 build 后的文件生成结构,生成的目录结构保持了源文件夹下的目录结构,有利于对分包的支持。

5. webpack 配置

注意事项

  1. 新增的页面需要重新 npm run dev 来进行编译

项目开发,更新中。。。

按上面的步骤创建的项目,新建页面的时候是要建一个文件夹

但是用下面 github的项目已经创建好的,是单独的一个文件就行,和之前vue的页面一样

上述就是小编为大家整理的vue小程序开发框架有哪些?基于vue开发微信小程序的入门开发教程相关内容。

国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。



本站部分文章、图片属于网络上可搜索到的公开信息,均用于学习和交流用途,不能代表Finclip的观点、立场或意见。我们接受网民的监督,如发现任何违法内容或侵犯了您的权益,请第一时间联系小编邮箱jiasou666@gmail.com 处理。
上一篇:交流中交易:金融业的专业社交
下一篇:使用flutter小程序开发的案例,如何利用Flutter框架开发运行小程序?
相关文章

 发表评论

评论列表

2022-10-11 12:36:04

这篇文章对于vue小程序开发框架的讲解是比较全面和详细的,对于新手入门比较友好。


×