原文转载自「刘悦的技术博客」https://v3u.cn/a_id_103

美团很早就开源了mpvue这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信小程序的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用,但是瑕不掩瑜),这给使用过Vue开发Web应用的前端开发者提供了极低的门槛来开发小程序。

搭建所需的软件环境,首先mpvue是基于vue.js,同时也需要vue-cli脚手架,注意一点:你的node环境版本必须大于9.0,否则会出现和新版mpvue不兼容的情况,首先去微信公众号平台注册开发者账号: https://mp.weixin.qq.com 记得验证一下开发者身份,另外获取appid,并且点击生成appsecret秘钥,一般审核速度很快,大概一天就会通过。附上微信小程序开发文档: https://developers.weixin.qq.com/miniprogram/dev/framework/

npm cache clean --force

npm set registry https://registry.npmjs.org/

npm install npm -g

npm install -g vue-cli

npm cache clean --force

安装好之后,查看node版本是否大于9.0 node -v

之后,运行命令,创建一个mpvue的工程

vue init mpvue/mpvue-quickstart mpvue

图上的appid就是注册时获取到的

随后进入到项目目录中:cd mpvue

输入命令安装依赖

npm install

安装成功后,在项目目录下输入npm run dev 启动项目

mpvue的项目结构是这样的:

可以看到,和传统的vue项目没有任何差别,简直太友好了

此时,可以去下载一个微信小程序开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择适合自己系统的版本下载,这里我下载mac版,缺点是体积有点略大,安装后要500多m,希望腾讯以后可以压缩一下,轻量级开发工具应该小巧轻便。

打开微信小程序开发工具,点击新建项目

选择导入项目,输入项目目录以及appid

最后打开导入的项目,这时候需要耐心等待一小会,不要着急

成功打开后,就可以看到界面了

此时只要修改对应的vue组件,小程序就会实时进行更改,不过需要注意一点,新建组件的时候,需要手动重启mpvue项目:npm run dev

是不是很简单呢,如果你是一位精通vue的开发者,那么开发微信小程序对于你来说也就是a piece of cake

原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_103

基于mpvue的框架开发微信小程序(搭建环境)的更多相关文章

  1. mpvue 应用 Vant Weapp框架开发微信小程序

    今天在使用mpvue开发微信小程序的过程中需要实现一个底部上拉选择列表的功能,因为之前做过H5微信公众号的开发,使用的就是有赞的Vant-ui,所以第一时间就想到了有赞的Vant Weapp UI框架 ...

  2. mpvue 开发微信小程序搭建项目

    首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...

  3. 部署wepy框架开发微信小程序

    我用的是yarn,如果你使用的是npm,也可以 首先需要安装wepy命令行工具 npm install wepy-cli -g 然后在选定的位置使用脚手架工具创建wepy项目 wepy init st ...

  4. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  5. 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转

    在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...

  6. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  7. 使用Vue开发微信小程序:mpvue框架

    使用Vue开发微信小程序:mpvue框架:https://www.jianshu.com/p/8f779950bfd9

  8. 使用mpvue开发微信小程序

    更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程 ...

  9. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

随机推荐

  1. 有了这10个GitHub仓库,开发者如同buff加持

    摘要:列出了10个极好的仓库,它们为所有web和软件开发人员提供了巨大的价值. 本文分享自华为云社区<所有开发者都应该知道的10个GitHub仓库>,作者: Ocean2022 . 除了作 ...

  2. MySQL基准测试工具

    一.基准测试 基准测试(benchmark)是针对系统设计的一种压力测试. 基准测试是简化了的压力测试. 1.1 常见指标 TPS QPS 响应时间 并发量 1.2 收集与分析数据脚本 收集数据的sh ...

  3. 817. Linked List Components - LeetCode

    Question 817. Linked List Components Solution 题目大意:给一个链表和该链表元素组成的一个子数组,求子数组在链表中组成多少个片段,每个片段中可有多个连续的元 ...

  4. SpringBoot从Eclipse添加的Tomcat容器中启动

    SpringBoot的Web项目,想要在Eclipse中的Tomcat容器中启动运行需要做下面这两处改动 pom.xml <packaging>war</packaging> ...

  5. Python技法:用argparse模块解析命令行选项

    1. 用argparse模块解析命令行选项 我们在上一篇博客<Linux:可执行程序的Shell传参格式规范>中介绍了Linux系统Shell命令行下可执行程序应该遵守的传参规范(包括了各 ...

  6. linux篇-修改mysql数据库密码

    总是忘记,每次都要查文档,背背背 方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = passw ...

  7. SpringBoot进阶教程(七十四)整合ELK

    在上一篇文章<SpringBoot进阶教程(七十三)整合elasticsearch >,已经详细介绍了关于elasticsearch的安装与使用,现在主要来看看关于ELK的定义.安装及使用 ...

  8. Ajax前后端交互——后端接收前端页面变量

    核心代码: app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.r ...

  9. nacos 快速入门

    每日一句 外表可是具有欺骗性的. 每日一句 No victory comes without a price. 凡是成功就要付出代价. 概述 这个快速开始手册是帮忙您快速在您的电脑上,下载.安装并使用 ...

  10. ABP框架之——数据访问基础架构

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享阅读心得,希望我的文章能成为你成长路上的一块垫脚石,我们一起精进. 几乎所有的业务应用程序都要适用一种数据库基础架构,用来实现数据访问逻辑,以便从数 ...