即刻 mpvue 小程序

本文主要是介绍即刻 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 小程序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---