A vUE project modeled after Lofte mobile terminal
Project description
Vue2.0 family bucket + Axios + Vuex + mint-UI + Mock. Js + Stylus
preview
Mainly depends on
- Vue2.0 front-end page display
- Precompiled for Stylus CSS
- Axios requests asynchronous data
- Flexibility.js solves mobile device compatibility
- Better-scroll optimizes the scrolling effect
- Mint-ui Mobile component library
- Mock data hosting
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['@/pages/found/index'], resolve),
redirect: '/found/page1'
},
{
path: '/found',
name: 'found',
component: resolve => require(['@/pages/found/index'], resolve),
meta: {keepAlive: true},
children: [
{
path: '',
component: resolve => require(['@/pages/found/index'], resolve)
},
{
path: 'page1',
name: 'page1',
component: resolve => require(['@/pages/found/recommend'], resolve)
},
{
path: 'page2',
name: 'page2',
component: resolve => require(['@/pages/found/animal'], resolve)
},
{
path: 'page3',
name: 'page3',
component: resolve => require(['@/pages/found/movie'], resolve)
},
{
path: 'page4',
name: 'page4',
component: resolve => require(['@/pages/found/travel'], resolve)
},
{
path: 'page5',
name: 'page5',
component: resolve => require(['@/pages/found/food'], resolve)
},
{
path: 'page6',
name: 'page6',
component: resolve => require(['@/pages/found/pen'], resolve)
},
{
path: 'page7',
name: 'page7',
component: resolve => require(['@/pages/found/photo'], resolve)
}
]
},
{
path: '/home',
name: 'home',
component: resolve => require(['@/pages/home/index'], resolve)
},
{
path: '/message',
name: 'message',
component: resolve => require(['@/pages/message/msg'], resolve)
},
{
path: '/my',
name: 'my',
component: resolve => require(['@/pages/my/index'], resolve)
}
]
})
Copy the code
rendering
Functions to be improved
User login out of the implementation of the focus on user content appears in the focus page comments increase and other sliding effects
After more than half a month of code knocking, WE finally completed this lofter imitation project. Through this project, we got familiar with the use of Vue2.0, and used vuex’s state management module in the project. The unified state management enabled us to better understand data operation and axiOS ‘cross-domain problems. Be sure to read the documentation when you encounter problems. You can find things you missed or missed. When packing files, also be careful to change the path or you will step on the hole. Of course, there are still some functions not realized in this project, which will be improved in the future
The last
If you think my project is good, please move your little hands and leave a precious star ~
I graduated from the class of 18 and am now looking for a job. If you are interested in me, please contact me through the following ways:
- E-mail: 1047429135 @qq.com
- Wechat id: zzzrrr716
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportCopy the code
For detailed explanation on how things work, checkout the guide and docs for vue-loader.