【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。

好了，相关知识的科普就到这里，想要了解更多的可以看看其他文章，相信也不少。下面正式开始搭建我们的环境。

登陆node.js的中文官网找到下载页面下载安装包 http://nodejs.cn/download/

node.js支持windows、linux和mac系统，大家可以根据自己的需求安装，下面以windows系统为例。

下载后点击安装包弹出安装界面。

接着点击next下一步：

勾选同意协议

选择安装路径，这里默认即可，直接点击next进入下一步

一般这样就能正常使用了，但实际上有可能会遇到一些问题(其实很少会遇到)。

比如说命令执行不了，提示无效的命令，这种情况很有可能是没有配置环境变量。

环境变量是什么呢？大致理解就是一个顶级变量，所有地方都能获取。回想一下我们js的作用域，全局有一个变量a，有一个函数b，函数b里声明了一个变量a，并且console.log打印这个变量a，之后调用函数b输出的是哪个？自然是函数里的变量a，但是，如果函数内没有声明变量a呢？结果就是会输出全局变量a。其实就是这么一回事。

node.js有很多命令，如果想要在所有地方都能执行这个命令，就需要配置一个环境变量path，把命令文件所在路径添加上去就是了。

找到高级系统设置，点击打开

找到环境变量，点击打开，里面有用户变量和系统变量，用户对应用户，系统对应的就是系统，比如设置了用户，那么这套配置就属于这个用户的，切换用户时配置就会发生变化，系统也如此。

第一个就是我们node.js的路径，第二个是我们全局安装npm的路径，比如webpack，我们需要全局都能运行，所以会安装到这个目录里。

当然，我们可以自由修改npm的全局安装路径。在确保node.js安装成功后，在终端输入指令 npm config get prefix 查看当前安装路径，修改时输入指令 npm config set prefix 目标路径 设置安装路径。

至此，node.js安装完毕。其实一般情况下根本不需要做这么多操作，直接下载安装包，点击安装就好了，想要确保安装的话，打开终端输入个node -v看看就差不多了。

要搭建vue项目，一般只需要vue-cli和webpack。

不知道大家还记不记得我上面说过的用cnpm代替npm，没错，在安装工具之前我们得先绑定淘宝镜像，在终端输入指令 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm指令，安装完毕之后，我们就可以使用cnpm指令代替npm指令到https://registry.npm.taobao.org下载我们需要的东西了。

在此之前先科普两个指令，盘符: 代表进入某个硬盘，如 e: 进入e盘；cd 目标路径 进入目标目录

如：

好了，通过上面两个指令进入到我们想要创建项目的目录，之后运行指令 vue init webpack 项目名称 就会自动开始构建项目，当然，在构建前会让你填写项目相关信息，这里一直回车，直到出现vue-router，我们这个例子需要使用到vue-router，所以选择安装。而其他东西如果不需要安装的话选择n就好(我们这里只安装了vue-router)。

项目信息填写完毕后就会开始自动构建项目。

现在最新版本在构建项目时会自动下载所有需要的依赖，所以构建完毕后，运行指令 npm run dev 就能直接打开项目了，一般会自动打开浏览器，如果没有打开，可以手动在浏览器里输入 localhost:8080打开。

至此，我们的环境基本上算是搭建完成了，如果大家在搭建中遇到什么问题不妨留言提问，我看到就会回复。下一篇应该会讲讲vue-cli搭建的项目的配置文件，感兴趣的可以关注一下哦。不过也不好说什么时候会更新，工作忙啊，能写一篇也不容易了。

我把之后要讲的内容先列出来吧，如果大家在这些方面有疑问的，可以留言，我看到了就会回复。

1、配置文件讲解(包括babel、webpack等)；

2、前端目录结构；

3、vue-router(这里面包含了keep-alive和meta等一些用法技巧，为了兼容和复用，二次封装了push和replace方法、history模式的坑点和后端配置)；

4、跨域问题；

5、一些常用的插件(二维码生成、swiper等)；

6、vux；

7、vuex(基本用法，还有接口管理等)；

8、vue各api的用法、坑点和技巧；

9、weixin-js-sdk(微信支付、分享)；

10、axios(包括axios的二次封装)

11、微信登陆

......

基本上就这些，具体的会在之后以文章形式出现，有问题的不妨留言提问。