VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用(一)
最近公司技术 Leader 说要以后要使用 VUE 来构建单页应用,让我先研究下怎么搞。既然接到了任务那就撸起袖子开干吧,由于之前有过使用 VUE 做页面数据绑定,对 VUE 这东西还是很有好感的。于是乎 google 了一堆先行者的文章,看了一圈下来有了一个基本的概念。在我看来,单页应用就是把网页做的跟原生 APP 差不多的形式,没有传统网页那样的有明显的页面跳转,页面切换比较流畅顺滑,用户体验
最近公司技术 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 回车,提示服务正在启动,稍等下完成后就会自动在浏览器打开初始页面。
到这里,一个基础的单页应用就创建完成了,我上面的是一路非常顺利的做下来的,没有碰到任何错误,如果有人照着上面步骤做的时候碰到了错误,可以看看这个帖子,上面列举了一些可能碰到的错误及解决办法。
项目是构建出来了,但这只是最基本的,我们需要修改成我们需要的样子,那么下一篇就说说如何修改以达到我们的要求。
这个系列文章其实也是我自己的一个学习过程,边学边写,加深理解,方便自己以后查看同时也造福后来人。
更多推荐
所有评论(0)