《基础如何学微信小程序》之mpvue框架搭建篇

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

《基础如何学微信小程序》之mpvue框架搭建篇

春天是一个适合外出求学的季节。

沉睡已久的身心应该再次绽放。

从本期开始，技术人员将连载一篇使用mpvue框架开发微信小程序的简单教程。 对mpvue框架不熟悉或者不了解的同学要积极行动~~

本文要求读者对Vue框架有一定的了解。 对微信小程序不熟悉的同学可以在《如何零基础学习微信小程序》中找到小程序入门介绍

本文将涵盖以下方向：

mpvue简介

mpvue框架搭建

设置本地服务器环境

运行示例演示

mpvue与其他小程序框架对比

1.mpvue简介

mpvue是一个使用Vue.js开发小程序的前端框架。 该框架基于Vue.js的核心。 mpvue修改了Vue.js的实现和实现，使其可以运行在小程序环境中，从而为小程序开发引入了一套完整的Vue.js开发经验。

——引自官网

主要特点：

目前国内的Web开发可以说是由React和Vue两大框架主导。 至于我们，还是先让它冷静一下吧。

Vue框架目前在中小型项目中占有很大的面积。 与此同时，微信小程序从2017年开始异军突起，在腾讯强大的宣传开发能力和技术背景的支持下，大量的网页开发也投入其中，这也给传统App带来了问题。 相当有影响。 不过做过小程序开发同学都知道，小程序中实际使用的WXML和WXSS与HTML、CSS的差别其实很小，但是我们还是需要针对小程序单独编写。

于是美团研发部门在2018年开源了mpvue框架，希望能够共享H5页面和小程序的相同代码。

官网地址：

2.mpvue框架搭建

# 全局安装 vue-cli

$ npm --vue-cli

#基于mpvue-创建项目

$ vue init mpvue/mpvue- my-

# 安装依赖项

$ cd 我的-

$ npm

# 开始构建

$ npm 运行开发

# 注册微信小程序

＃ 预览

打开微信小程序开发工具，导入my-，填写刚刚申请的APPID。

3. 设置本地服务器

为了让我们的小程序项目更加完善，这次我们还将基于腾讯云的wafer架构搭建本地服务环境【koa+mysql】开发微信小程序示例，为我们提供了完整的小程序开发环境和在线生产环境。

3.1 登录腾讯云

3.2 下载服务器环境代码

3.3 配置服务器代码

将示例代码中的文件夹放入my-中，在my-中配置..json文件，并添加后端关联目录[": ".//",]

配置CONF文件搭建本地后端开发环境：

云API密钥控制台：

[：''，

: '',

: '',

: '',

: '',

: '',

: '',

: 30000,

应用程序 ID: '',

: ''

3.4 安装本地MySQL && 创建数据库

百度搜索一下MySQL就可以了《基础如何学微信小程序》之mpvue框架搭建篇，很简单

创建数据库：

cAuth；

3.5 安装项目依赖：

纱线/npm

3.6 初始化cAuth数据库数据：

节点/tools/.js或yarn

3.7 安装项目监控插件：

npm 我 pm2 -g

4. 运行示例Demo

开始：yarn run dev

开始：yarn run dev

5. mpvue与其他小程序框架对比

原生微信小程序、mpvue、WePY三种小小程序开发方式对比

至此环境搭建过程已经完成。 如果您在环境搭建过程中有任何疑问，可以给技术人员留言~

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等