這篇文章主要介紹了Vue仿今日頭條實例詳解，並把相關程式碼做了說明，對此有興趣的朋友參考下吧。
vue也弄了一段時間了, 前段時間一直想用vue寫個移動端,加之年底也不是很忙,於是前幾天便著手開始弄了,到今天為止也算是勉強能看了
因為也是純粹的寫寫前端頁面,所以數據方面用的是mock.js,為了真實的模擬請求,可以直接在Easy Mock 自己生成API
#也可直接登陸我這項目的Easy Mock帳號密碼：
帳號: vue-toutiao
密碼： 123456
如果你想修改接口，請copy一份在修改
如果你想後台介面也自己開發的話。可以閱讀我這篇部落格Vue Node Mongodb 開發一個完整部落格流程
技術堆疊：
vue webpack vuex axios
#build: webpack配置
#config:專案設定參數
#src
assets : 靜態資源文件，存放圖片啥的
components: 常用元件。例如 彈跳窗 等等。 。 。
directive: 常用指令封裝
router:路由表
1.路由懶載入。 #
{
path: '/development',
name: 'development',
component: (resolve) => {
require(['../views/development.vue'], resolve)
}
}const _import_ = file => () => import('views/' + file + '.vue')
{
path: '/development',
name: 'development',
component: _import_('development')
}2. 登陸攔截
#透過路由的beforeEach 鉤子函數來判斷是否需要登陸// 如：系统设置需要登陆
{
path: '/system',
name: '系统设置',
meta: {
login: true
},
component: _import_('System/index')
}
router.beforeEach((to, from, next) => {
if (to.meta.login) { //判断前往的界面是否需要登陆
if (store.state.user.user.name) { // 是否已经登陆
next()
}else{
Vue.prototype.$alert('请先登录!')
.then( () => {
store.state.user.isLogin = true
})
}
}else{
if (to.meta.page) store.state.app.pageLoading = true
next()
}
})3. 動畫切換
透過偵測設定在Router上的animate屬性來判斷它做什麼樣的切換動畫Router.prototype.animate = 0
// 获取每个路由meta上面的slide 来判断它做什么动画
{
path: '/system',
name: '系统设置',
meta: {
slide: 1
},
component: _import_('System/index')
}
watch: {
$route (to, from) {
/*
0: 不做动画
1: 左切换
2: 右切换
3: 上切换
4: 下切换
...
*/
let animate = this.$router.animate || to.meta.slide
if (!animate) {
this.animate = ''
}else{
this.animate = animate === 1 ? 'slide-left' :
animate === 2 ? 'slide-right' :
animate === 3 ? 'slide-top' :
animate === 4 ? 'slide-bottom' : ''
}
this.$router.animate = 0
}
}4. 影片播放
#因為在IOS上無法隱藏video的controls ,所以我們可以隱藏video,透過繪製canvas來達到播放影片的效果5. icon採用的是阿里巴巴向量圖
6. mock.js
7. Easy Mock
上面是我整理給大家的，希望今後會對大家有幫助。 相關文章：以上是使用Vue仿製今日頭條（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
