VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（一）

最近公司技术 Leader 说要以后要使用 VUE 来构建单页应用，让我先研究下怎么搞。

既然接到了任务那就撸起袖子开干吧，由于之前有过使用 VUE 做页面数据绑定，对 VUE 这东西还是很有好感的。于是乎 google 了一堆先行者的文章，看了一圈下来有了一个基本的概念。

在我看来，单页应用就是把网页做的跟原生 APP 差不多的形式，没有传统网页那样的有明显的页面跳转，页面切换比较流畅顺滑，用户体验较好。

单页应用的优缺点

优点

• 无刷新体验，这个应该是最显著的有点，由于路由分发直接在浏览器端完成，页面是不刷新，对用户的响应非常及时，因此提升了用户体验；
• 完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
• API 共享，如果你的服务是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量。容易变化的 UI 部分都已经前置到了多端，只受到业务数据模型影响的 API，更容易稳定下来，便于提供更棒的服务；
• 组件共享，在某些对性能体验要求不高的场景，或者产品处于快速试错阶段，借助于一些技术（Hybrid、React Native），可以在多端共享组件，便于产品的快速迭代，节约资源；

缺点

• 首次加载大量资源，要在一个页面上为用户提供产品的所有功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长；
• 较高的前端开发门槛，MVC 前置，对前端工程师的要求提高了，不再是『切切图，画画页面这么简单』；同时工作量也会增加数倍，开发这类应用前端工程师的数量往往多于后端；
• 不利于 SEO，单页页面，数据在前端渲染，就意味着没有 SEO，或者需要使用变通的方案。

说到缺点，较高的开发门槛 这条我还是比较认同的，我一个 Android 开发，虽然有点 Web 前端基础，要我直接来搞这单页应用，还是颇费了一番功夫。撞了不少墙，也踩了不少坑，比起传统的 HTML ，CSS 还是要难一点的。写下这篇文章（也许应该是一个系列文章）的目的也是为了把我遇到的问题记录下来，方便自己和其他的和我情况差不多的朋友，毕竟不是所有人都有很扎实的前端基础和开发经验，能够很快的上手。

好，废话到此为止，下面来让我们开始吧。

准备工作

本文中使用了以下内容，在阅读本文前，请保证您对以下内容有了基础的了解。了解，嗯嗯，，，
VUE 中文文档（我只看了组件前面的基础部分，，，）
vue-router 中文文档（这个我只看了前面的一点点）
ES6 入门（这个我还没看，，，）

然后需要先安装 node.js ,后面的很多步骤都需要用到 nodejs 里面的 npm ,所以不装是不行的。

项目构建

项目推荐直接使用 Vue 官方提供的脚手架（Vue-cli），所以第一步首先是安装脚手架。在命令行或者 IDE 的 Terminal 窗口中输入以下命令即可自动安装：

npm install -g vue-cli

这个是全局安装 vue-cli ，以后就不需要再装了。装好之后就可以开始创建应用了。

创建应用

还是在命令行里面，进入想要创建应用的目录，然后输入：

vue init webpack app

这里面的 webpack 是一个构建和打包应用的工具，具体的我也不是很清楚，想了解的可以看这里，最后的 app 是你要创建的应用的名字，可以换成你需要的名字，回车之后等下之后会提示 downloading template ，等它完成后有几个初始化的选项需要你选择：

• 首先会询问项目名，描述，作者三项，直接回车即可
• 接着有一个 vue build 选项，直接回车即可
• 然后会问你要不要安装 vue-router，选 y/n 都行，n 的话以后要用的话需要再装，但是肯定是要用的，，，所以推荐选 y
• 最后是语法检查，单元测试，项目测试三项直接输入 n 就行

选完之后会提示你怎么 To Get Start，照着提示把三条命令都输一遍就行了。

npm install 命令回车之后会自动生成项目结构和安装各种依赖文件，等着就行，完成之后输入 npm run dev 回车，提示服务正在启动，稍等下完成后就会自动在浏览器打开初始页面。

到这里，一个基础的单页应用就创建完成了，我上面的是一路非常顺利的做下来的，没有碰到任何错误，如果有人照着上面步骤做的时候碰到了错误，可以看看这个帖子，上面列举了一些可能碰到的错误及解决办法。

项目是构建出来了，但这只是最基本的，我们需要修改成我们需要的样子，那么下一篇就说说如何修改以达到我们的要求。
这个系列文章其实也是我自己的一个学习过程，边学边写，加深理解，方便自己以后查看同时也造福后来人。

从零开始一步一步构建 VUE 单页应用（二）