使用mpvue和云函数开发微信博客小程序(二) 前端环境搭建

入坑之前，前端的基础知识html，css，js还是需要大家有所储备的，如果有过vue项目开发经验，那么使用mpvue开发小程序对你来说将会是轻而易举的事。

---

开发工具准备

工欲善其事必先利其器，动手写代码之前，请务必检查一下你的本地是否安装了必要的开发环境和工具。

1.小程序账号：

what? 开发小程序，你还没有一个小程序账号，那就先去搜索微信公众平台，注册一个吧，然后是你需要大致的浏览一下官方提供的小程序开发文档，至少要做到熟悉了解。

2.node.js：

一个javascript的运行环境，能使javascript脱离浏览器运行，现代的前端工具链基本上都依赖node.js提供的函数库，这里也请安装一个。

传送门：https://nodejs.org/zh-cn/

打开命令行窗口输入node 和 npm版本号，验证是否安装成功，打印出版本号就意味着ok啦。

3.vue-cli：

vue-cli，是一个vue专用的项目脚手架工具，可以用于创建vue项目代码，也包括接下来的mpvue的项目代码。可以通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令： 

npm install vue-cli -g

安装完成后输入vue命令出现以下内容便意味着安装成功。

4.微信开发者工具

微信开发者工具是开发、调试和模拟运行微信小程序的核心工具，也是必须安装的。

传送门：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

5.编译器vscode

你也可以使用你常用熟悉的编译器。这里我使用的是vscode，同时搭配扩展wechat-snippet（微信小程序代码辅助,代码片段自动完成）、vetur（提供Vue语法高亮、语法检查和代码快捷输入等功能的插件），可以为开发过程提供很多便利。

---

创建一个mpvue项目

必要的开发环境准备就绪。下面就来创建我们的第一个mpvue小程序项目。这里将用到前面已安装的vue-cli，输入下面命令创建模板项目：

vue init mpvue/mpvue-quickstart mini-blog

命令行将一步步的引导我们选择或填写项目的配置信息，如果你还不太明白这些内容的含义，先不用care，可以直接按回车默认确定，唯一要注意的是appid，之前注册完小程序，在右侧栏的开发设置中找到appid并填入。

执行以下命令进行依赖库的安装：

cd mini-blog

npm install

执行命令，运行代码，进入开发模式：

npm start

成功运行后，项目代码就进入开发模式，一旦有源代码发生修改，就会触发自动编译。因为mpvue使用的是vue + html web的开发方式开发小程序，最终还是需要被转换成小程序的代码才可以在小程序环境运行。所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下：

---

查看项目运行

上面的代码顺利编译后，如果想看到程序运行界面，还需要借助微信开发者工具，打开微信开发者工具，选择导入项目，项目路径指向我们的mini-blog。

点击右下方的导入，进入小程序开发主界面，开发者工具左边的小程序模拟器中就能看mini-blog小程序的执行结果。

还需要注意的是请在微信开发者工具的设置 > 编辑设置 中，将下面几个选项勾上，项目中部分代码使用es6编写、云函数调试也需要使用npm模块。

总结一下，本篇主要是大致介绍一下小程序项目开发前端环境以及如何初始化一个mpvue项目代码，前期准备工作还是比较繁琐，后面将详细介绍云开发数据库表创建和云函数的初始化。