本文主要是介绍即刻 mpvue 小程序,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
随着微信小程序的火爆,抖音、百度、支付宝、今日头条等公司,也都先后地推出了自己的小程序平台!自然,后面会跟着一大票喊着“我们也要做小程序”的公司,也想试试手里的黄牛票,能否登上这班客船!
相应的,小程序相关的前端框架,也如雨后春笋般冒出来,如: wepy 、 mpvue、taro ,从转换角度来看,将现有Vue / React构建的组件和系统,利用这个通道,丝般柔滑地转化成小程序,省心省力,倒是个不伤手的好工具;同时,PC和移动端同一并开发,一举两得,确实安逸。先来试试 mpvue,用 Vue 的方式开发小程序!
1、安装 node.js
检查是否安装了 node.js,打开命令行工具输入:node -v
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\jason>node -v
v7.6.0C:\Users\jason>
如果没安装,可参考上一篇文章:《Nvm 安装笔记》
2、安装 vue 脚手架 vue-cli
npm install vue-cli -g
安装完成后,输入 vue 验证是否成功
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\jason>vue
Usage: vue <command> [options]Options:-V, --version output the version number-h, --help output usage informationCommands:init generate a new project from a templatelist list available official templatesbuild prototype a new projectcreate (for v3 warning only)help [cmd] display help for [cmd]C:\Users\jason>
3、安装 微信开发者工具 和 代码编辑器
代码编辑器我用的是 sublime ,下载地址:http://www.sublimetext.com/3
4、新建第一个基于mpvue的小程序
1)、新建项目
注:项目名不支持大写字母
vue init mpvue/mpvue-quickstart firstapp
一律回车,除了纠错的ESlint输入:N
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\jason>cd /d E:\ape\miniAppE:\ape\miniApp>vue init mpvue/mpvue-quickstart firstapp? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author jason <jasonwilling@163.com>
? Vue build runtime
? Use Vuex? Yes
? Use ESLint to lint your code? No
? 小程序测试,敬请关注最新微信开发者工具的“测试报告”功能vue-cli · Generated "firstapp".To get started:cd firstappnpm installnpm run devDocumentation can be found at http://mpvue.comE:\ape\miniApp>
2)、安装依赖项
进入 firstapp 目录:
cd firstapp
安装依赖项:
npm install
安装完成以后,文件夹下多了一个node_modules目录
3)、运行项目
npm run dev
4)、打开 firstapp 小程序
如果足够细心的话,会发现firstapp 文件下,有一个dist 文件。
点开dist,有一个 wx 文件夹,再点开 wx ,熟悉的配方出现了,没错,就是小程序代码!
打开微信开发工具,新增项目:
首页:
大功告成!!!
你可以试试在sublime修改代码,Ctrl + S 保存,微信开发工具跟着会自动刷新!
简单吧,那还不即刻开始你的 mpvue 小程序?!!
这篇关于即刻 mpvue 小程序的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!