基于mpvue的小程序项目搭建的步骤步骤1. 检查下 Node.js 是否安装成功

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后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CLS日志服务

腾讯云CLS日志服务应用

*LogListener: 是腾讯云日志服务提供的日志采集 Agent,通过在服务器上安装loglistener可以实时采集指定路径上的日志,并对日志原始数据进...

47510
来自专栏自动化测试实战

Flask第31课——include标签

现在考虑这样一个问题,如果页面头部和底部是很多页面要用的样式,那么如果在每一个新的文件中都要复制相同的代码肯定不是我们希望的,这时候就可以用到include标签...

11430
来自专栏开源优测

AutoMagic使用说明

自动化测试管理平台,可以进行用户、产品、项目、模块、测试用例、测试元素、测试关键字、测试报告的管理等。

10710
来自专栏知晓程序

想要快速获客?送你 2 个小程序互推方法 | 小程序问答 #47

今天,知晓程序(微信号 zxcx0101)就来手把手教你,小程序之间如何互相跳转、引导。

14360
来自专栏编程

Python让你自己做一个软件,自己开个聊天室,厉害吧!

内容 知识点 asyncore 、asynchat模块运用 环境 python 3.5 功能描绘 在本实验中,我们将实现一个简略的图形界面谈天系统。我们可以经...

34150
来自专栏小白课代表

虚拟机:VMware 12 安装教程。

虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。

15610
来自专栏机器学习算法与Python学习

VMware tools详细安装过程

在VMware下安装完Ubuntu的虚拟机后,界面总是很小,使用起来非常的不方便而且不美观,但是该工作对于小白而言有事比较困难的事情(ps:真的挺费劲的),进过...

50960
来自专栏测试驿栈

Jmeter(二十)_Mock接口

Mock通常是指,在测试一个对象时,我们构造一些假的对象来模拟与其交互。而这些Mock对象的行为是我们事先设定且符合预期。通过这些Mock对象来测试对象在正常逻...

35920
来自专栏DeveWork

DW Mobile Switcher:移动设备识别切换主题插件

DW Mobile Switcher 这款移动设备识别切换主题插件(就是说如果检测到是移动设备就会切换设置的另一款“移动主题”)是为了接下来要发售的两款移动主题...

20850
来自专栏Youngxj

Emlog后台编辑器工具栏表情OwO

19340

扫码关注云+社区

领取腾讯云代金券