即刻 mpvue 小程序

最新推荐文章于 2023-08-02 10:30:01 发布

清晏23

最新推荐文章于 2023-08-02 10:30:01 发布

阅读量128

点赞数

分类专栏： vue 文章标签：小程序 node.js vue.js

本文链接：https://blog.csdn.net/sinat_36539161/article/details/85000106

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

相应的，小程序相关的前端框架，也如雨后春笋般冒出来，如： 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.0

C:\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 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]

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\miniApp

E:\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 firstapp
     npm install
     npm run dev

   Documentation can be found at http://mpvue.com


E:\ape\miniApp>

2）、安装依赖项

进入 firstapp 目录：