使用mpvue和云函数开发微信博客小程序(三) 前端框架熟悉与开发配置

上一篇介绍mpvue开发小程序所需要的开发环境和工具，并创建了一个初始化项目。这一篇主要是了解一下mpvue的目录结构和一些基本的开发配置。

---

mpuve项目目录结构

在visual studio code里面打开我们创建的项目文件夹mini-blog，目录结构大致如下：

1.package.json文件：

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

2.project.config.json文件：

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

3.static目录：

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

4.build目录：

是一些用于项目编译打包的node.js脚本和webpack配置文件。

5.config目录：

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

6.src目录：

是进行小程序功能编写的地方，demo代码默认创建了几个子目录：components、pages、utils、App.vue、main.js。其实它们都不是必须的，可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构，比较容易理解，所以最好是遵循这个结构进行开发。

components：可以将界面上复用较多部分提取成公共组件，放入该目录下。

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

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

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

---

开发配置

1.简单清理工作：

正式编码之前，需要对这个初始化工程代码做点清理工作。首先，删除pages目录下的counter、logs目录，仅保留index目录，并且index目录下的index.vue文件重置为：

接下来重新编译，有的同学编译可能会报错不成功，这是因为mpvue默认开启了eslint严格语法校检，如果对自己要求高可以按照eslint规范进行编码。我比较烦它的是写点代码就会标红然后编译失败，所以就关闭了vue页面内部的eslint代码检查，具体做法是找到build目录下的webpack.base.conf.js文件，将这条eslint校检规则注释掉就可以了。

重新编译成功后，在微信小程序中预览效果如下：

2.mpvue引入样式预编译工具less：

样式预编译工具，我个人使用less较多，所以这个项目依旧采用的是less工具。

原生小程序使用样式预编译需要在编译器进行一系列繁琐的配置，而在mpvue中使用样式预编译将会简单很多。

之前的mpvue1.0版本使用less还需要我们手动安装less-loader，然后在配置文件webpack.base.conf.js中引入使用。而mpvue2.0.0已经配置好一系列样式预编译工具包括less、sass、stylus。你所需要做的就是在style标签上添加 lang="less" 属性即可。

2.引入UI组件库vant WeApp：

选择一款好用的UI组件库可以让你的开发达到事半功倍的效果。小程序的UI组件库有很多，目前在开源社区排名较高的以下几款：WeUI WXSS、iView WeApp、vant WeApp、MinUI、Wux WeApp、ColorUI，这些组件库有各自的风格和特点，你可以搜索它们的网站并查阅文档先大致了解一下，然后根据项目的需求选择一款契合自己的。

我的博客项目比较简单而且通用组件复杂性要求不高，这里我选择的是的vant WeApp，有赞团队开发，现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等组件或元素。

GitHub地址：

https://github.com/youzan/vant-weapp

vant WeApp暂时好像还不支持npm安装，我这里的做法是将组件下载到本地，并将dist目录包改名为vant-weapp置入项目的static目录下，然后在本地引用。

使用组件的方法也很简单，这里我示例一下如何在项目中使用vant的按钮组件。

index目录下新建文件main.json并申明引入如下：

在index.vue页面文件内就可以直接使用按钮组件了：

预览效果如下：

至此，我们项目的前端开发配置接近完成，接下来将会介绍云开发云函数的初始化和数据库的配置。