【vue+微信公众平台开发的踩坑记录】之一 利用vue-cli搭建开发环境

作为国内主流的三大mv类框架，vue的主要优势在于其轻量和上手快。除此以外，她还有很多比其他两大框架要好的地方，比如可读性更强的语法和更好的数据绑定方式。可能是因为她出生比较晚，有更多的机会去借鉴和吸收吧，而取长补短的结果就是现在我们看到的vue。

当然，我写这篇文章的目的不是对比框架，相信来看这篇文章的人绝大部分都是准备或刚入坑的，所以废话就不多说了，作为vue踩坑记录系列的首篇，希望大家看完后能尽快参与到项目开发当中。

为了完全没有接触过这方面开发的同学，先来几发相关知识的科普吧。

vue-cli是什么？

vue-cli是帮助我们快速搭建vue+webpack的开发环境的脚手架。

webpack是什么？

webpack是目前主流的前端构建化工具，简单来说就是能帮我们整合文件资源，利用配套的插件还能实现其他更加高级的功能，是前端模块化开发的重要工具之一。

什么是模块化？

模块化是一种开发模式，大致的理解就是将不同的功能、页面甚至是页面里面的某一部分单独用一个文件去承载，互不影响，需要时才通过某种方式引入(大致有require.js和es6的import、export两种方法)。我们可以将性质相似或相同的文件放到同一个文件夹中用于区分管理，这样做十分利于维护和复用。而将这些文件资源整合(俗称打包)成可以上线的文件，就要靠构建化工具了，比如上面所说的webpack。

node.js

既然是资源整合，那就意味着需要操作文件，但我们都知道，平常使用的js需要浏览器引擎解释执行，所以根本无法进行这类操作。而为此我们借助了一个工具，那就是node.js。node.js能让js在非浏览器环境下运行，而且还扩展了各类api，赋予了js开发者们在非浏览器环境操作的能力。

npm和cnpm

npm是随同node.js一起安装的包管理工具，我们可以利用npm下载或上传各种资源文件和项目，在vue开发中我们会经常接触和使用到。npm的大致理解就是一个集合了世界各地的插件的仓库。npm有很多命令行指令，我们就是通过这些指令下载和上传插件，也能使用这些指令管理本地的插件。但由于这个仓库在国外，在国内的我们在访问时可能会出现各种各样的网络问题。而淘宝给了我们一个解决办法，那就是镜像，我们可以通过绑定淘宝镜像，使用cnpm代替npm。