终于要从零开始一个新的项目了，由于本项目就我一个前端配合另外一个后端，加上一个写管理后台的小伙伴，三个人的开发小团队，要开始运转起来了。

  • 一开始我就觉得前端应该使用SPA的方式进行开发，都8102年了，其优势不言而喻。毫无疑问的是，使用这种方式开发无疑前端的工作量会大大增加，但是软件的耦合性大大降低，对产品迭代等有很大的益处。下面开始总结一下自己的做法，以便以后查漏补缺。

  1. 说到单页应用开发，我们总得进行框架选型吧，从接触前端这个行业开始，我首先是对react有所耳闻的，但是一直没有真实项目实践之。最后由于项目紧急，而且后期对vue(v2.x)提起了很大兴趣(学习成本更低，文档更接地气)。毫不犹豫的选择了vue作为前端框架，并且彻底丢弃了jQuery。这对我来说是一个全新的开发体验，因为在这之前的我参与开发的所有项目都能看到jQuery的影子。

  2. 框架选好了，开始着手设计一下前端的架构了吧。首先考虑到的问题就是，如何基于vue写出一个Hello World!。通过文档，我发现了一个灰常好用的官方工具，vue-cli（由于版本不同，安装使用方式略有不同，上官网看看就行啦），这个脚手架工具简直就是一个神器，此时的我脸上笑嘻嘻。

  3. 谈到vue-cli，就不得不谈webpack，众所周知，webpack是一个资源打包工具，使用它能够轻松的管理你的项目中的静态资源文件（html/css/js/image…）。所以在这之前我们需要保证本地安装有vue-cli和webpack。

  4. 话不多说，开始搭建一个初始化的APP吧：

    1. 安装Node.js，Node.js是一个基于Chrome V8 引擎开发的 JavaScript运行时，以后我们的程序将会跑在他上面(开发)，上到生产环境的重要一步…打包 也会用到它，虽然说在生产环境也可以使用它，但我们不会这么做。。。
    2. 安装webpack和vue-cli，这些个步骤很简单，网上的教程都堆成山了。
    3. 创建一个项目（终于开始了），使用vue-cli初始化一个基于vue的项目简直简单。具体请官网查看。vue的生态非常繁荣，对于汉语母语的开发者来说，无论是学习vue.js还是学习vue-cli等工具，其简明易懂的开发者文档对我们来说都是福音。繁荣的生态圈，是我们在开发过程中遇到的问题大多都能迎刃而解（赞+10086）。
    4. 初始化完成以后，我们进入到项目目录，开始安装依赖，vue-cli会默认给我们配好大多数我们将来会用的上的npm包和大多数有用的webpack配置。
    5. 安装npm包时，由于一些众所周知的原因，会存在下载包龟速的情况，可以使用淘宝npm镜像cnpm进行这一步的工作。就绪之后我们运行npm run dev命令，node.js就会在我们本地开启一个服务，默认8080端口，这是打开浏览器，输入localhost:8080，就可以看到启动的项目啦！你也可以使用npm run build命令进行打包项目，当然这只是发布前的操作，开发时一般用不上。
  5. 至此，一个简单的基于vue的项目就跑起来了，当然，这样一个项目能运行起来，里面的设计到的东西非常之多，这里只是梳理一些简单的东西，还有很多地方没有涉及到，比如webpack配置，众多好用的npm包，当然还有使用vue.js开发业务时需要注意的一些小坑。后面我会抽空努力补上。