使用mpvue框架开发微信小程序

比眉伴天荒 2023-10-09 11:24 143阅读 0赞

在这里插入图片描述
这个mpvue是从整个Vue的核心代码上经过二次开发而形成的一个框架，相当于是给Vue本身赋能，增加了开发微信小程序的能力。

使用mpvue开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

  • 彻底的组件化开发能力：提高代码复用性
  • 完整的 Vue.js 开发体验
  • 方便的 Vuex 数据管理方案：方便构建复杂应用
  • 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

  • H5 代码转换编译成小程序目标代码的能力

    1. 先检查下 Node.js 是否安装成功

    $ node -v
    v8.9.0

    $ npm -v
    5.6.0

    2. 由于众所周知的原因，可以考虑切换源为 taobao 源

    $ npm set registry https://registry.npm.taobao.org/

    3. 全局安装 vue-cli

    一般是要 sudo 权限的

    $ npm install —global vue-cli@2.9

    4. 创建一个基于 mpvue-quickstart 模板的新项目

    新手一路回车选择默认就可以了

    $ vue init mpvue/mpvue-quickstart my-project

    5. 安装依赖，走你

    $ cd my-project
    $ npm install
    $ npm run dev

随着运行成功的回显之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。如图：
在这里插入图片描述
小程序自己有一个专门的微信开发者工具，最新版本下载地址。

  • 微信开发者工具
    在这里插入图片描述

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

另外，提供一个对原生微信小程序、mpvue、WePY这三种开发小程序方式的比较，感兴趣的朋友可以参考一下：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读