mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案。

Mpvue官网:http://mpvue.com/
demo地址 :https://github.com/ccwyn/mpvuedemo/tree/master/my-project

使用Vue开发微信小程序:mpvue框架。端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

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

$ node -v

我的node是安装在d盘,所以先切入进D盘,在执行node -v命令,结果如下,出现版本号则表示安装成功。

图片.png

步骤2:检查npm版本

$ npm -v

步骤3: 安装淘宝镜像

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

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

步骤4: 全局安装 vue-cli

$ npm install --global vue-cli

一般是要 sudo 权限的(打开cmd时要以管理员的身份,不然就会报错

注意:很多人在这一步安装报错了,原因是要权限哦


例如:
网上的解决方案用通过快捷键win+ r打开cmd,这样木有用,会被误导,在win8或者win10下,win+R不是以管理员身份来运行的。在开始菜单中选择command以管理员身份运行即可。


打开管理员运行之后,全局安装成功提示如下:


步骤5:创建一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

至于项目名称,作者,使用何种框架等提问信息,新手一路回车选择默认即可。


打开d盘,查看创建生成的目录my-project


步骤6:安装my-project项目所需要的依赖

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

1:执行cd my-project命令,进入项目


2:执行npm install命令之后,本地多了一个node_moudules文件夹


3:执行npm run dev,运行成功


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


以上,Vue开发环境已经搭建好,接下来打开微信开发者工具,,调试开发我们的框架 mpvue,依次填写需要的信息,微信开发者工具环境搭建详见教程:https://www.jianshu.com/p/0ff8c3b2f59f



填写之后跳转到编辑工具页面,mpvue框架项目已经跑起来了,完美,get到技能了吗?投入开发即可


官方五分钟快速上手教程:http://mpvue.com/mpvue/quickstart/

注:

原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

公众号回复“1”,拉你进程序员技术讨论群.

基于mpvue的小程序项目搭建的步骤的更多相关文章

  1. 基于mpvue的小程序项目搭建的步骤一

    未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...

  2. mpvue开发小程序项目遇到的问题

    mpvue项目 最近用mpvue开发了一个家庭私人医生签约的小程序项目.记录总结一下,开发过程中遇到的一些问题. 关于页面进栈出栈的状态值问题 页面进出栈,会触发onLoad/unLoad事件.出栈不 ...

  3. mpvue微信小程序项目踩坑记录

    1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...

  4. 记一次基于 mpvue 的小程序开发及上线实战

    小程序名称:一起打车吧 项目地址: 客户端:https://github.com/jrainlau/taxi-together-client 服务端:https://github.com/jrainl ...

  5. 使用mpvue开发小程序教程(一)

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  6. 学习笔记:mpvue开发小程序——入门

    接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...

  7. mpvue微信小程序分包

    ## 微信小程序分包(mpvue) 使用mpvue分包示例:1.下载vue脚手架(先有node环境,v8.12.0) npm install -g vue-cli 2.先用vue初始化一个mpvue小 ...

  8. 基于mpvue搭建小程序项目框架

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序 ...

  9. 基于mpvue的框架开发微信小程序(搭建环境)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_103 美团很早就开源了mpvue这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信 ...

随机推荐

  1. 论Nim中的 proc 和 method

    在Nim中.proc 是定义过程的keyword.method 是定义方法的keyword.它们之间根本的差别是proc定义的过程是静态绑定.method定义的方法是动态绑定.谈到静态绑定.动态绑定又 ...

  2. android图像处理系列之六-- 给图片添加边框(下)-图片叠加

    前面介绍了一种用透明图片叠加的方式添加花边边框,下面将介绍另外一种图片叠加添加花边边框的方式.前面方法有一个缺点,就是做成PNG图片,图片体积会很大,不是一般的大,比同样的JPG大三倍多,如果项目可以 ...

  3. POJ 1991 DP

    题意: 思路: 考虑DP 先把事件按照地点顺序排个序 f[i][j][0]表示从i到j还没有去过 现在在i f[i][j][1]表示从i到j还没有去过 现在在j 那么方程就呼之欲出了 f[i][j][ ...

  4. 突破极限 解决大硬盘上安装Unix新思路

    一.问题提出 硬盘越做越大,然我喜欢让我忧.10年前就遇到过在586电脑BIOS不认识超过8.4G容量硬盘的问题,以及Windows Nt操作系统不认大硬盘(容量超过8.4G)的问题,对于Linux ...

  5. 给iOS项目中添加图片,并通过UIImageView引用和显示该UIImage图片

    [问题] 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件 过程中,问题转换为,需要给当前iOS项目中,添加一个图片. 类似于Windows开发中的资源文件,其中图片文件属于资源的 ...

  6. Oracle新建表字段,如何使字段自增

    oracle的自增需要依靠序列和触发器共同实现 比如 新建一张表 create table test (id int primary key, name varchar2(10));   创建一个序列 ...

  7. 二分图简单概念&&HDU 2063

    二分图: 二分图又称作二部图,是图论中的一种特殊模型. 设G=(V,E)是一个无向图,如果顶点V可分割为两个互不相交的子集(A,B),并且图中的每条边(i,j)所关联的两个顶点i和j分别属于这两个不同 ...

  8. JavaScript--数据结构与算法之集合

    集合(Set):是一种包含不同元素的数据结构. 重要特性:1.集合中的成员时无序的:2.集合中不允许相同的成员存在. 使用场景:用于存储一些独一无二的元素. 1 集合的定义:(和高中数学中的集合一样) ...

  9. python2 pip安装包等出现各种编码错误UnicodeDecodeError: 'ascii'(/或者utf-8) codec can't decode byte 0xd2...

    1.问题描述: python2环境,pip安装包时报错UnicodeDecodeError: 'ascii'(/或者utf-8) codec can't decode byte 0xd2... 类似如 ...

  10. 今日SGU 5.7

    SGU 169 题意:求k位数里面有多少个是完美数,完美数的定义就是n是好数,n+1也是好数,那么n就是完美数,好数就是n%p(n)==0&&p(n)!=0,p(n)=a1*...*a ...