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

前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用),这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序。

如果之前还未曾用过Vue这个框架的话,建议你可以快速浏览一下Vue的官方文档(https://cn.vuejs.org/v2/guide/),或者通过下面的几个视频教程来了解下Vue的基本用法。

Vue基础教程视频: https://www.bilibili.com/video/av25142267 https://www.bilibili.com/video/av25143408 https://www.bilibili.com/video/av25144006 https://www.bilibili.com/video/av25148349 https://www.bilibili.com/video/av25148832 https://www.bilibili.com/video/av25649895

起手式:必要的开发环境

工欲善其事必先利其器!在开始写代码之前,请确保你已经安装了必要的开发环境和工具,以下是几个必需的和可选的工具:

1)node.js 现在,前端工具链基本都依赖Node.js,所以请率先安装它吧。

下载地址:https://nodejs.org/en/download/

安装完成后,打开你的命令行输入如下命令,验证安装是否成功:

node --version
//成功的话输出类似:v10.6.0

npm --version
//成功的话输出类似:6.1.0

然后,我们需要执行以下命令,将npm的下载源切换到国内淘宝的镜像,以提高下载时的速度和成功率:

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

2)vue-cli vue-cli是一个vue专用的项目脚手架工具,可以用于方便的创建vue项目骨架代码,包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli,在命令行输入如下命令:

npm install vue-cli -g

安装完成后,输入如下命令进行验证:

vue

// 成功的话会输出如下内容:
// Usage: vue <command> [options]
//
// Options:
//
//    -V, --version  output the version number
//    -h, --help     output usage information
//
// Commands:
//
//    init           generate a new project from a template
//    list           list available official templates
//    build          prototype a new project
//    create         (for v3 warning only)
//    help [cmd]     display help for [cmd]

3)微信开发者工具 这个工具是开发、调试和模拟运行微信小程序的最核心的工具了,所以必须安装。

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4)Visual Studio Code + Vetur Visual Studio Code(简称vscode)是现在非常流行的一个轻量级代码编辑器,拥有非常多好用的辅助开发插件,在我的文章中我都会使用这个编辑器来编辑代码。当然,好用的代码编辑器有很多,比如Sublime Text、WebStorm等,同样可以达到我们的开发目的,你也尽管用你自己最喜欢的代码编辑器来写代码就行了。

下载地址:https://code.visualstudio.com

安装完vscode后,在它的插件管理器中,查找Vetur并安装,然后重启一下vscode后,插件即生效:

安装Vetur插件

Vetur是一款可以提供Vue语法高亮、语法检查和代码快捷输入等功能的插件,可以为我们的开发过程提供很多便利。

创建第一个基于mpvue的小程序项目代码

花了点时间装好了必要的开发环境,下面我们就来创建我们的第一个mpvue小程序项目。这里将用到前面已安装的vue-cli:

vue init mpvue/mpvue-quickstart firstapp

命令行将一步步的引导我们选择或填写项目的配置信息,如果你还不太明白这些内容的含义,可以先直接全部按回车:

? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang <kevin.zhang@moredist.com>
? Vue build runtime
? Use Vuex? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 小程序测试,敬请关注最新微信开发者工具的“测试报告”功能 

   vue-cli · Generated "firstapp".

   To get started:
   
     cd firstapp
     npm install
     npm run dev
   
   Documentation can be found at http://mpvue.com

这个过程vue-cli主要是先从远程的代码仓库中下载了一份注册名为mpvue/mpvue-quickstart的模板代码,然后根据开发者在命令行提示过程中输入的信息,生成一份经过配置后的代码。

这份代码暂时还运行不起来,因为它还缺少依赖的库,我们需要执行以下命令进行依赖库的安装:

cd firstapp 
npm install

经过几分钟的下载安装,依赖库安装到了firstapp目录下,你可以看到该目录下多出了一个node_modules目录。

然后,执行命令让这个代码运行起来,进入开发模式:

npm run dev

成功运行后,这个项目代码就进入开发模式,一旦有源代码发生修改,就会触发自动编译。因为mpvue使用的是Vue + HTML Web的开发方式开发小程序,它最终还是需要被转换成小程序的代码才可以在小程序环境运行,所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下:

运行并查看结果

上面的步骤中,我们开启开发模式后,其实并不能看到小程序的执行效果,要真正看小程序的运行界面的话,我们还是要借助微信开发者工具。

打开微信开发者工具,选择新增项目:

项目目录选择指向firstapp目录:

点击“确定”按钮,进入小程序开发主界面,在左边的小程序模拟器中就能看到firstapp小程序的执行结果了:

【提醒】记得在微信开发者工具的菜单》设置 》编辑设置 中,将“保存时自动编译小程序”勾选上,这样当mpvue的代码自动编译完成后,模拟器才会自动刷新界面。

小结

本文先简要介绍一下使用mpvue开发小程序的前期准备,在后面的文章中将一步步讲解mpvue的详细用法。

还没累?那就读下一篇吧,我已经写好了:)

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

Node入门教程(7)第五章:node 模块化(下) npm与yarn详解

Node的包管理器 JavaScript缺少包结构的定义,而CommonJS定义了一系列的规范。而NPM的出现则是为了在CommonJS规范的基础上,实现解决包...

37160
来自专栏码农笔录

手动下载genymotion ova镜像文件,genymotion下载失败、慢解决方案

23240
来自专栏前端说吧

Compass(更新中。。。)

26360
来自专栏vue学习

webpack入门

前言:这两天在网上找了些视频和资料学习webpack,最后发现官网上的教程原来就写得很好,只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程,然后总结...

21720
来自专栏编程

手把手教 Vue-环境搭建

1 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略过 2、教程难度 初级,本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢 3、Demo...

42350
来自专栏木子昭的博客

OneTab一键分享Chrome当前打开的所有标签页

当你发现自己有太多的标签页时,单击OneTab图标,所有标签页会转换成一个列表,当你需要再次访问这些标签页时,点击OneTab图标唤出列表,点击列表恢复标签页

25530
来自专栏云计算教程系列

如何在Windows 10上安装Ruby并设置本地编程环境

Ruby是一种动态编程语言,可用于编写从简单脚本到游戏和Web应用程序的任何内容。它于1993年首次在日本发布,但在2005年作为服务器端Web开发的语言获得了...

41100
来自专栏Linux驱动

23.QT记事本

源码下载地址: https://download.csdn.net/download/qq_37997682/10453294

15030
来自专栏hbbliyong

Ubuntu16.04安装后开发环境配置和常用软件安装

Ubuntu16.04安装后1.安装常用软件搜狗输入法+编辑器Atom+浏览器Chome+视频播放器vlc+图像编辑器GIMP Image Editor安装+视...

44480
来自专栏calvin

asp.net core 编译mvc,routing,security源代码进行本地调试

因为各种原因,需要查看asp.net core mvc的源代码来理解运行机制等等,虽说源代码查看已经能很好的理解了。但是能够直接调试还是最直观的。所有就有了本次...

14720

扫码关注云+社区

领取腾讯云代金券