mpvue 开发小程序

为什么使用mpvue 开发小程序？

通过官网给出的 五分钟快速上手教程  可以发现它的开发过程和Vue保持高度一致。

通过下图一个对原生微信小程序、mpvue、WePY这三种开发小程序方式的比较： 如果你已经熟悉vue。那么可以使用开发Web应用的方式去开发小程序 , 降低我们的时间和学习成本。

 

开发mpvue之前的初始化: 

全局安装 vue-cli

npm install --global vue-cli 

创建一个基于 mpvue-quickstart 模板的新项目 

vue init mpvue/mpvue-quickstart my-project 

运行

cd my-project
npm install
npm run dev

查看效果:  使用微信开发者工具 =》 导入项目 =》 生成的dist  目录

开发前了解mpvue初始化结构目录： 

　　

1）package.json文件

package.json是项目的主配置文件，里面包含了mpvue项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息。

2）project.config.json文件

project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。

3）static目录

static目录可以用于存放各种小程序本地静态资源，如图片、文本文件等。代码中可通过相对路径或绝对路径进行访问

4）build目录

build目录下是一些用于项目编译打包的node.js脚本和webpack配置文件。一般情况下不需要修改这些文件。

5）config目录

config目录下包含了用于开发和生产环境下的不同配置

6）src目录

src目录是我们主要进行小程序功能编写的地方。默认生成的demo代码为我们创建了几个子目录：

components、pages和utils，还有2个文件：App.vue和main.js。其实它们都不是必须的，可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构了，比较易于理解，所以我们可以遵循这个结构进行开发。

• components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录

• pages：存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式

• utils：可选（可删）。可以将代码中一些公用工具函数组织成模块放入该目录下

• 可新建其他目录，存放你希望组织起来的代码。比如公用的业务逻辑代码、请求后台API的代码等等

• main.js + App.vue：这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体。

开发我们的项目: 

在开发过程中，完全可以使用开发vue 的方法思路去开发小程序。

src/app.json   配置文件中pages数组里的第一个page会被当做是首页 。mpvue 新版本 每个页面单独添加 main.json 添加单页面头部样式，文字.

 开发过程中，一个页面对应pages 下一个目录，可以把mpvue 看做vue的多页路由开发，页面之间跳转通过路径实现。公用组件存放components。ajax 请求通过 Flyio Github: https://github.com/wendux/fly。

路径就是pages里面存放的目录pages/**/main。目录下至少由两个文件构成：

　　　　　　　　　　　　　　main.js 　(固定)，名称在buld/webpack.base.config.js 里面配置。

　　　　　　　　　　　　　　*.vue。     开发文件

mpvue会将我们代码编译为小程序可识别代码。所以使用mpvue的时候需要特别注意的点：去官网查看