前端Vue开发-手把手教你写一个单页面应用

前端vue开发

GitHub-知乎日报-单页面

想必webpack+vue+vue-cli+vuex+vue-router+axios+ES6这样的技术组合,大家都听过很久了。这一次就用一个知乎日报SPA来详细说明如何写一个单页面应用吧。最终的目的是通过这个SPA掌握组件化开发并能应用到项目上去。

对于一些新框架这种,只用去官网看看最基本的api,然后自己找一个简单的demo直接上手敲代码,在实现的过程中会遇到很多问题,这也就是你学习这个框架的最好时机。

1.最终实现效果

凡事都是先看到最终成果才会有做下去的动力,这也就是很多小公司喜欢给员工花大饼的原因哈。

 

2.开发环境搭建

A.nodejs 安装
B.vue-cli 安装 npm install -g vue-cli
C.用vue-cli初始化项目 vue init webpack my-project-name
D.进入项目目录 cd my-project-name
E.安装依赖 npm install
F.启动服务 npm run dev

好了,以上就是 通过vue-cli搭建vue项目的所有步骤了。出现下面的页面说明你可以开始vue的旅程了。

 

3.项目目录重构

当你打开course文件夹的时候,发现里面已经存在了很多东西,这时候你不用去管它,只用直接进入src文件夹。

我们需要进行最终改文件形式

4.vuex-store.js

vuex是用来存储公共全局变量的,比如说一个滚动到最顶部这个东西需要一个flag来显示隐藏,很多组件里面都会用到这个flag,那么你就可以把整个falg写到store里面来。
那么我们可以来想一下这次这个知乎日报主要是一个首页组件,一个类目组件以及一个日报详情组件,这3个组件都会有几个公共的数据状态,比如左上角的表单按钮以及返回按钮状态切换,当前所属于的类目ID,回到顶部的状态flag,当然如果你想缓存一些数据,也是可以写这里面的,比如点击过的类目页信息,点击过的日报详情等等。那么我们的store.js就能写出来了。

javascript 代码

5.router.js

接下来我们来写路由控制。根据上面的分析我们有3个主要的显示组件-首页,类目,详情。那么我们的路由就出来来,就是在router里面映射不同component对应不同path就好了。

html 代码

6.main.js

main.js 这家伙可以说是整个项目的入口,webpack最终要根据这家伙的配置来取读各种模块。这里需要做的事情就是当你需要的模块都引入,然后初始化一个vue实例就好了。注意下面的 beforeEach以及.afterEach,这是将本来存在于很多组件里面的操作进行了统一管理。比如进入一个详情组件,就需要对左上角的类目菜单进行隐藏,显示返回的按钮(之前组件的左上角刚好相反),当返回时又要在类目组件或者home组件对这个状态进行管理,是不是很麻烦,这里的beforeEach以及.afterEach就是vue-rounter提供的全局路由钩子。

javascript 代码

7.App.vue

我们来写这个主要的vue文件。这个vue就是整个项目的画布,我们需要在这个vue里面画上公共的内容。可以看到我们需要3块内容,1.左上角的菜单栏以及返回,2.左边栏,3.显示其他组件的位置。
具体代码在下面。本胖都有很详细的注释了哈。主要做的事就是引入vuex里面的全局变量(一般组件都会用到其中某个属性),还有就是对组件路由的控制,比如点击左边栏的类目需要跳转到对应的类目组件,然后将需要的数据项写出来,比如这里左边栏数据需要放一个数组里就可以在data里设置一个list来存储。
html 代码

8.loading组件

这是一个当组件渲染时候出现的loading效果。接受一个参数flag,来控制该组件是否显示。

html 代码

9.loadMore组件

出现的思路和一般页面的加载更多是一样的,就是做一个判断。注意this.$emit(‘load’);这句代码$emit 触发当前实例上的事件 注意 应该在子组件里面emit,在父组件监听。我们之前写加载更多,当符合条件的时候就会请求接口再次获取数据,而这里就是做了一个事件分发。父组件这样使用<load-more :scroller=”scroller” :loading=”loading” @load=”loadMore” ></load-more> 这里面的loadMore就是再次获取数据。也可以看做是一个传参方式。

html 代码

10.日报详情组件

这不是一个单一的组件。是由loading组件以及backTop组件构成的。具体代码如下。
html 代码

网站前端开发_前端开发者丨前端vue开发
https://www.rokub.com
» 本文来自:前端开发者 » 《前端Vue开发-手把手教你写一个单页面应用》
» 本文链接地址:https://www.rokub.com/2719.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!