开始你的第一个 mpvue 小程序

原创 uptown 随笔 vue 109阅读 2018-12-14 18:19:54 举报

随着微信小程序的火爆,抖音、百度、支付宝、今日头条等公司,也都先后地推出了自己的小程序平台!自然,后面会跟着一大票喊着“我们也要做小程序”的公司,也想试试手里的黄牛票,能否登上这班客船!

相应的,小程序相关的前端框架,也如雨后春笋般冒出来,如: wepympvuetaro 。从转换角度来看,将现有Vue / React构建的组件和系统,利用这个通道,丝般柔滑地转化成小程序,省心省力,倒是个不伤手的好工具;同时,PC和移动端能一并开发,一举两得,安逸。先来试试 mpvue,用 Vue 的方式开发小程序!

1、安装 node.js

检查是否安装了 node.js,打开命令行工具输入:node -v

如果没安装,可参考上一篇文章:《Nvm 安装笔记》

2、安装 vue 脚手架 vue-cli

安装完成后,输入 vue 验证是否成功 

 

3、安装 微信开发者工具 和 代码编辑器

代码编辑器我用的是 sublime ,下载地址:http://www.sublimetext.com/3

4、新建第一个基于mpvue的小程序

1)、新建项目

注:项目名不支持大写字母

vue init mpvue/mpvue-quickstart firstapp
一律回车,除了纠错的ESlint输入:N

2)、安装依赖项

进入 firstapp 目录:

安装依赖项:

安装完成以后,文件夹下多了一个node_modules目录 

3)、运行项目

4)、打开 firstapp 小程序
如果足够细心的话,会发现firstapp 文件下,有一个dist 文件。
点开dist,有一个 wx 文件夹,再点开 wx ,熟悉的配方出现了,没错,就是小程序代码!

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

首页:

大功告成!!!

你可以试试在sublime修改代码,Ctrl + S 保存,微信开发工具跟着会自动刷新!

简单吧,那还不即刻开始你的 mpvue 小程序?!!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复