iOS 图片加载框架－SDWebImage 解读

前段时间，美团开源了mpvue这个项目，使得咱们又多了一种用来开发小程序的框架选项。因为mpvue框架是彻底基于Vue框架的（重写了其runtime和compiler），所以在用法上面是高度和Vue一致的（某些功能因为受限于小程序环境自己的缘由而不能使用），这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序。

iOS 图片加载框架－SDWebImage 解读 若是以前还不曾用过Vue这个框架的话，建议你能够 加咱们QQ群668041364，一块儿交流学习

起手式：必要的开发环境

工欲善其事必先利其器！在开始写代码以前，请确保你已经安装了必要的开发环境和工具，如下是几个必需的和可选的工具：

1）node.js

如今，前端工具链基本都依赖Node.js，因此请率先安装它吧。

下载地址：nodejs.org/en/download…

安装完成后，打开你的命令行输入以下命令，验证安装是否成功：

node --version //成功的话输出相似：v10.6.0

npm --version //成功的话输出相似：6.1.0 而后，咱们须要执行如下命令，将npm的下载源切换到国内淘宝的镜像，以提升下载时的速度和成功率：

npm set registry registry.npm.taobao.org/ 2）vue-cli

vue-cli是一个vue专用的项目脚手架工具，能够用于方便的建立vue项目骨架代码，包括咱们要讲到的mpvue的项目代码。咱们能够经过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入以下命令：

npm install vue-cli -g 安装完成后，输入以下命令进行验证：

vue // 成功的话会输出以下内容： // Usage: vue [options] // // Options: // // -V, --version output the version number // -h, --help output usage information // // Commands: // // init generate a new project from a template // list list available official templates // build prototype a new project // create (for v3 warning only) // help [cmd] display help for [cmd] 3）微信开发者工具

这个工具是开发、调试和模拟运行微信小程序的最核心的工具了，因此必须安装。

下载地址：developers.weixin.qq.com/miniprogram…

4）Visual Studio Code + Vetur

Visual Studio Code（简称vscode）是如今很是流行的一个轻量级代码编辑器，拥有很是多好用的辅助开发插件，在个人文章中我都会使用这个编辑器来编辑代码。固然，好用的代码编辑器有不少，好比Sublime Text、WebStorm等，一样能够达到咱们的开发目的，你也尽管用你本身最喜欢的代码编辑器来写代码就好了。

下载地址：code.visualstudio.com

安装完vscode后，在它的插件管理器中，查找Vetur并安装，而后重启一下vscode后，插件即生效：

iOS 图片加载框架－SDWebImage 解读 安装Vetur插件

Vetur是一款能够提供Vue语法高亮、语法检查和代码快捷输入等功能的插件，能够为咱们的开发过程提供不少便利。

建立第一个基于mpvue的小程序项目代码

花了点时间装好了必要的开发环境，下面咱们就来建立咱们的第一个mpvue小程序项目。这里将用到前面已安装的vue-cli：

vue init mpvue/mpvue-quickstart firstapp 命令行将一步步的引导咱们选择或填写项目的配置信息，若是你还不太明白这些内容的含义，能够先直接所有按回车：

? Project name firstapp ? wxmp appid touristappid ? Project description A Mpvue project ? Author kevinzhang kevin.zhang@moredist.com ? Vue build runtime ? Use Vuex? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能 vue-cli · Generated "firstapp".

To get started:

cd firstapp npm install npm run dev

Documentation can be found at mpvue.com 这个过程vue-cli主要是先从远程的代码仓库中下载了一份注册名为mpvue/mpvue-quickstart的模板代码，而后根据开发者在命令行提示过程当中输入的信息，生成一份通过配置后的代码。

这份代码暂时还运行不起来，由于它还缺乏依赖的库，咱们须要执行如下命令进行依赖库的安装：

cd firstapp npm install 通过几分钟的下载安装，依赖库安装到了firstapp目录下，你能够看到该目录下多出了一个node_modules目录。

而后，执行命令让这个代码运行起来，进入开发模式：

npm run dev 成功运行后，这个项目代码就进入开发模式，一旦有源代码发生修改，就会触发自动编译。由于mpvue使用的是Vue + HTML Web的开发方式开发小程序，它最终仍是须要被转换成小程序的代码才能够在小程序环境运行，因此这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下：

iOS 图片加载框架－SDWebImage 解读 运行并查看结果

上面的步骤中，咱们开启开发模式后，其实并不能看到小程序的执行效果，要真正看小程序的运行界面的话，咱们仍是要借助微信开发者工具。

打开微信开发者工具，选择新增项目：

iOS 图片加载框架－SDWebImage 解读 项目目录选择指向firstapp目录：

iOS 图片加载框架－SDWebImage 解读 点击“肯定”按钮，进入小程序开发主界面，在左边的小程序模拟器中就能看到firstapp小程序的执行结果了：

iOS 图片加载框架－SDWebImage 解读 【提醒】记得在微信开发者工具的菜单》设置 》编辑设置 中，将“保存时自动编译小程序”勾选上，这样当mpvue的代码自动编译完成后，模拟器才会自动刷新界面。

iOS 图片加载框架－SDWebImage 解读 小结

本文先简要介绍一下使用mpvue开发小程序的前期准备，在后面的文章中将一步步讲解mpvue的详细用法。