This article mainly introduces the detailed examples of Vue imitating Toutiao, and explains the relevant code. Friends who are interested in this can refer to it.
I have been working on vue for a while. I have always wanted to use vue to write a mobile terminal. In addition, I am not very busy at the end of the year, so I started working on it a few days ago. So far today, I can barely read it
Because I am purely writing front-end pages, I use mock.js for data. In order to simulate real requests, you can directly generate the API yourself in Easy Mock
You can also directly log in to the Easy Mock account of my project. Password:
Account: vue-toutiao
Password: 123456
If you want to modify the interface, please make a copy and modify it
If you want to develop the backend interface yourself. You can read my blog Vue Node Mongodb to develop a complete blog process
Technology stack:
vue webpack vuex axios
build: webpack configuration
config: project configuration parameters
src
assets : Static resource files, storing pictures and so on
components: Commonly used components. For example, pop-up windows, etc. . .
directive: Common instruction encapsulation
router: routing table
store: state management vuex
styles: style file
utils: common tool class package
views: view page
static: Static file: store favicon.ico, etc.
This project uses DllPlugin for packaging, so remember when starting the project , first execute the script command once to generate the configuration
Effect demonstration:
Several common knowledge points
1. Lazy loading of routes
{ path: '/development', name: 'development', component: (resolve) => { require(['../views/development.vue'], resolve) } }
or
const _import_ = file => () => import('views/' + file + '.vue') { path: '/development', name: 'development', component: _import_('development') }
2. Login interception
Determine whether login is required through the beforeEach hook function of the route
// 如:系统设置需要登陆 { 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. Animation switching
Determine what kind of switching animation it does by detecting the animate attribute set on the Router
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. Video playback
Because the video controls cannot be hidden on IOS, we can hide the video and achieve the effect of playing the video by drawing canvas
5. The icon uses Alibaba vector graphics
6. mock.js
7. Easy Mock
The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone.
Related articles:
How to deal with the problem of view not updating when object properties are changed in vue?
Different screen adaptation px and rem conversion issues in vue2.0
How to implement file dragging with progress bar in Vue Upload function
The above is the detailed content of Use Vue to imitate Toutiao (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!