未标题-1.png

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
图片.png

步骤2:检查npm版本

$ npm -v
图片.png

步骤3: 安装淘宝镜像

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

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

步骤4: 全局安装 vue-cli

$ npm install --global vue-cli

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

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

图片.png

例如:

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

图片.png

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

图片.png

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

$ vue init mpvue/mpvue-quickstart my-project

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

图片.png

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

图片.png

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

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

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

图片.png

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

图片.png

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

图片.png

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

图片.png

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

图片.png
图片.png

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

图片.png

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

原文作者:祈澈姑娘

技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

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

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

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

  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. SpringBoot与Dubbo的整合-zookeeper和监控中心搭建

    对于Dubbo的应用已经是十分普遍,自从阿里巴巴开源以来,国内许多公司就采用了dubbo的架构来开发项目.不过再dubbo十分火的时候,突然就停止更新了, 只有当当网还在其基础进行了拓展(dubbox ...

  2. Scott Hanselman的问题-2

    .Net程序员面试 每个人都应知道篇 (回答Scott Hanselman的问题)   昨天回答了Scott Hanselman在他清单上关于C#那部分的题目,.Net 程序员面试 C# 语言篇 (回 ...

  3. css选择器和优先级总结

    本文转自http://www.cnblogs.com/zxjwlh/p/6213239.html CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式 ...

  4. Inversion of Control Containers and the Dependency Injection pattern--Martin Fowler

    原文地址:https://martinfowler.com/articles/injection.html n the Java community there's been a rush of li ...

  5. HTML5多维度数据分析

    详情:http://echarts.baidu.com/index.html

  6. deep-in-es6(七)

    Symbols对象 JavaScript的第七种原始类型 以前的数据类型: Undefined 未定义 Null 空值 Boolean 布尔类型 Number 数字类型 String 字符串类型 Ob ...

  7. Linux之lldptool命令

    1. 描述 当我们想在操作系统里面查看网口和交换机连接的状态信息,我们可以使用lldptool这个工具. 2.LLDP协议 LLDP是一个数据链路层发现协议,LLDP协议使得接入网络的一台设备可以将其 ...

  8. Myeclipse学习总结(2)——MyEclipse快捷键大全

    1.ctrl+shift+R 打开资源 此组快捷键可以打开工程中任意一个文件,而本人只需按文件名或者mask名的字母顺序输入就会出现对应的文件或者在内容中某个关键字再按快捷键也可以的,例如:Custo ...

  9. ubuntu终端sudo java提示“command not found”解决办法

    我在ubuntu 12.04里想启动一个java程序,sudo java -jar xxx.jar,但是结果提示sudo:java:command not found. Ubuntu下用sudo运行j ...

  10. php实现希尔排序(总结)

    php实现希尔排序(总结) 一.总结 1.希尔排序的算法思路:分组排序, 缩小增量排序,插入排序 2.算法思路: 循环非常好写 有几次gap:log2(n) 每次gap有几组:gap组 每组有几个元素 ...