使用mpvue框架开发微信小程序教程

一、所需环境

node环境,vue-cli脚手架,微信小程序开发工具(用来展示页面效果)

二、安装

1. node

node官网 进入官网下载,直接安装即可。安装后打开cmd,运行查看版本命令。如下图所示

使用mpvue框架开发微信小程序教程_第1张图片

2. vue-cli脚手架

// 全局安装vue-cli
npm install vue-cli -g

安装完毕后,运行查看版本,如下图所示

3. 微信小程序开发工具

微信小程序官网下载地址 点击进入微信公众平台官网进行下载即可

 

三、使用脚手架创建项目

使用mpvue框架开发微信小程序教程_第2张图片

项目目录如下:

使用mpvue框架开发微信小程序教程_第3张图片

四、启动项目

cd 到项目根目录(myapp)

执行 npm install,安装完毕后

执行 npm run dev

使用mpvue框架开发微信小程序教程_第4张图片

这样项目就算跑起来了, 这时候要看页面的效果,就需要打开微信小程序开发工具

使用mpvue框架开发微信小程序教程_第5张图片

使用mpvue框架开发微信小程序教程_第6张图片

使用mpvue框架开发微信小程序教程_第7张图片

这就是我们新建的项目运行起来的效果啦!!!

五、发布自己的小程序

当开发好我们的小程序后,要投入使用的话,就要发布我们的小程序。

下面这个非常简易的小程序,每日一更高智商悬疑故事以及沙雕段子。便是通过这个流程进行开发的,大家也可以看看哦。

使用mpvue框架开发微信小程序教程_第8张图片

如果大家想了解这个小程序的开发以及发布的全过程,可以评论留言告诉我!!!

你可能感兴趣的:(小程序)