微信小程序mpvue框架快速入门指南

一、什么是mpvue框架？

Mpvue是一个使用Vue.js开发小程序的前端框架，该框架基于Vue.js内核(所以建议先掌握vue再使用mpvue框架，否则建议使用原生框架编写小程序)。mpvue修改了Vue.js的运行时和编译器实现，使其在小程序环境下运行，从而为小程序开发引入了一整套Vue.js开发经验。

二.必要的发展基础

精通vue.js(如果没用过vue的框架，建议学习vue的官方文档：https://cn.vuejs.org/v2/guide/)

微信开发者工具(该工具是开发、调试、模拟运行微信小程序的核心工具，下载地址：https://开发者。weixin.qq.com/miniprogram/dev/devtools/download.html)

Visual Studio Code(一个轻量级的代码编辑器，有很多易于使用的辅助开发插件，下载地址：https://code.visualstudio.com)

node.js(现在前端工具链基本依赖node.js，下载地址：https://nodejs.org/en/download/)

vue-cli (vue专用项目脚手架工具，打开cmd，输入命令：npm install - global vue-cli)

三.初始化项目

1.打开cmd，快捷键win R；

2.检查node.js是否安装成功，输入命令：

节点v

版本号显示为成功；

3.检查vue-cli是否安装成功，并输入命令：

查看版本

版本号显示为成功；

4.然后我们执行以下命令，将npm的下载源切换到国内淘宝的图片，提高下载的速度和成功率；

https://registry.npm.taobao.org/国家预防机制成套登记处

5.输入要保存项目的文件夹(例如，D盘，首先输入命令d:)并基于mpvue-quickstart模板创建一个新项目：

vue init mpvue/mpvue-quick start wxvueshop

然后我们选择或者填写项目的配置信息，不知道的就按enter(依次是项目名称、applet appid、项目简介、作者，然后是是否安装vuex等。如果要安装，请写“是”,否则写“否”

这时可以看到d盘有一个wxvueshop的项目文件。

6.别担心，让我们进入这个文件夹并输入命令：

cd wxvueshop

7.然后，我们安装依赖关系库并输入命令：

npm安装

8.安装完成后，让我们运行它并输入命令：

npm运行开发

通过成功的操作，我们可以看到在本地wxvueshop中还有一个额外的dist目录，这个目录就是生成的applet相关代码。这时，我们成功地初始化了项目。向上跑.

四.运行视图项目

打开微信web developer工具，选择新项目，打开我们刚刚创建的项目，如图：

点击“确定”按钮，进入小程序开发主界面，在左侧小程序模拟器中可以看到wxvueshop小程序的执行结果：

动词（verb的缩写）代码编写

如上所示，我们新创建的项目已经生成了默认页面，现在我们删除了所有这些页面，如下所示：

1.删除src/组件、src/页面和src/utils目录中的所有代码文件；

2.将src/App.vue文件中的内容重置为：

Script/*相当于app . js */export default { created(){ console . log(' mini app created！')}}/scriptstyle/*这部分相当于app。wxss */。容器{ background-color : # cccc；}/style3。将src/main.js文件的内容重置为：

从“vue”导入Vue从“App”导入。/App ' Vue . config . Production TiP=FalsApp . MpType=' App ' const App=new Vue(App)App。$mount()导出默认值{ config : { pages :['^pages/login/main']，window : { backgroundtextstyle : ' light '，navigationbarbackgroundcolor : ' # fff '，NavigationBar标题文本：' My Small Program '，NavigationBar文本样式：' Black'}}现在，我们的代码已经成为小程序页面不具备的初始状态。

4.创建一个新的页面，未来每个mpvue页面组件都会有如下图的结构。

页面内容如下：

login.vue:

template div class=' container ' @ click=' click handle ' div class=' message“{ msg } }/div/div/templatescript export default { data(){ return { msg : ' log in ' }，methods : { click handle(){ this . msg=' yes！'} } }/script style scoped . message { color : red；padding: 10px文本对齐：中心；}/stylemain.js:

从“vue”导入vue，从“导入应用程序”。/login' const app=new vue (app) app。$ mount()导出默认值{ config : {//注意，页面级可配置属性相当于窗口中的' navigationbarbackgroundcolor ' : ' # 3d c1c 7 '，' navigation bar title text ' : ' log in ' src/main . js中的部分配置。导航栏文本样式' : '白色' }} 5。当我们在vue的src中创建页面时，小程序的页面会自动创建并进行代码转换。文件夹是dist，图片如下：

这样，我们对mpvue框架有了一个初步的了解，然后有时间的时候再写一个高级版本。以上内容如有错误，请各位老板指正。谢谢大家！

摘要

以上是边肖介绍的微信小程序mpvue框架的快速入门指南。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！