免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

這篇文章主要為大家詳細(xì)介紹了使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼，具有一定的參考價(jià)值，可以用來參考一下。

感興趣的小伙伴，下面一起跟隨512筆記的小編兩巴掌來看看吧！

在移動(dòng)應(yīng)用中很多功能都是必不可少的，使用vue構(gòu)建移動(dòng)應(yīng)用自然也就需要實(shí)現(xiàn)這些功能。之所以寫這篇文章，是希望大家能更多的將注意力放在項(xiàng)目的核心業(yè)務(wù)上，而不是過多的關(guān)注通用功能。

基礎(chǔ)設(shè)置

1. 使用vue-cli搭建項(xiàng)目框架

2. 在index.html文件中添加<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">，在移動(dòng)端設(shè)置禁止縮放，以便顯示合適大小的頁面。

3. 如果要將頁面封裝為app，那么需要將config/index.js中build的assetsPublicPath設(shè)置為'./'，build獲得的頁面可以直接打開，而不需要使用服務(wù)器。

通用功能

一、頁面跳轉(zhuǎn)

一般應(yīng)用都會(huì)擁有多個(gè)頁面，在vue中通過vue-router來管理頁面。移動(dòng)應(yīng)用頁面跳轉(zhuǎn)時(shí)，都有轉(zhuǎn)場效果，在vue中我們也可以實(shí)現(xiàn)。

在路由文件中設(shè)置meta為數(shù)字，meta表示其路由的深度，然后在App.vue中設(shè)置：

代碼如下：

<template> <transition :name="transitionName">  <router-view></router-view> </transition></template><script>export default { name: 'app', data () {  return {   transitionName: 'fade'  } }, watch: {  '$route' (to, from) {   let toDepth = to.meta   let fromDepth = from.meta   if (fromDepth > toDepth) {    this.transitionName = 'fade-left'   } else if (fromDepth < toDepth) {    this.transitionName = 'fade-right'   } else {    this.transitionName = 'fade'   }  } }}</script><style></style>

監(jiān)聽$route，根據(jù)to、from meta值的大小設(shè)置不同的跳轉(zhuǎn)動(dòng)畫。如果應(yīng)用到多種跳轉(zhuǎn)動(dòng)畫，可以根據(jù)詳情，具體情況具體應(yīng)用。

【512pic.com溫馨提示：圖片暫缺】

登錄跳轉(zhuǎn)

PS:這里的動(dòng)畫效果引用自animate.scss;

二、底部導(dǎo)航

直接引用Tabbar組件即可，如果需要添加跳轉(zhuǎn)動(dòng)畫可以在<router-view></router-view>外設(shè)置：

代碼如下：

<template> <div class="content">  <!--<transition name="fade" mode="out-in">-->   <router-view></router-view>  <!--</transition>-->  <Tabbar    :routers="[    {path: '/index/home', icon: 'icon-home', name: '首頁'},    {path: '/index/loading', icon: 'icon-course', name: '加載'},    {path: '/index/message', icon: 'icon-info', name: '信息'}   ]"  >  </Tabbar> </div></template><script>export default { name: 'Index', components: {Tabbar: require('components/Tabbar')}, data () {  return {  } }}</script><style lang="scss" scoped> .content{ background-color: #eee;}</style>

三、數(shù)據(jù)加載

加載數(shù)據(jù)與加載頁面是存在先后順序的，比較通用方法是先加載頁面，顯示數(shù)據(jù)加載效果，在數(shù)據(jù)加載完成之后顯示完整的頁面。數(shù)據(jù)加載效果作為組件添加到應(yīng)用中，比較繁瑣，所以使用自定義指令的方式實(shí)現(xiàn)數(shù)據(jù)加載效果的顯示。

【512pic.com溫馨提示：圖片暫缺】
數(shù)據(jù)加載效果

四、接口文件

代碼如下：

import fetch from 'isomorphic-fetch'import store from 'store'import router from './router'var env = process.env.NODE_ENVvar rootUrlif (env === 'development') { rootUrl = ''}if (env === 'production') { rootUrl = ''}const post = function (url, params = {}) { return fetch(rootUrl + url, {  method: 'post',  headers: {   'Content-type': 'application/json; charset=utf-8',   'Authorization': store.get('token')  },  body: JSON.stringify(params) }).then(function (res) {  if (res.status === 401) {   // 沒有權(quán)限   api.logout()  } else {   return res.json()  } })}const urls = [ 'classAtCurDate' // 普通接口列表]var api = {}for (var url of urls) { (function (url) {  api[url] = (params) => {   console.log(url)   return post('course/' + url, params)  } })(url)}// 需要特殊處理的接口api.logout = () => { store.clearAll() router.push('login')}api.login = (params) => { store.set('id', 1) store.set('token', 2) return Promise.resolve({params})}export default api

可以在全局設(shè)置，也可以在需要時(shí)導(dǎo)入

代碼如下：

// 在main.js中導(dǎo)入api接口import api from '../src/api'Vue.$api = Vue.prototype.$api = api

五、登錄權(quán)限設(shè)置

路由加載前，檢查是否有登錄權(quán)限（判斷用戶id是否存在），如果存在直接跳過登錄頁進(jìn)入首頁，如果不存在在跳轉(zhuǎn)登錄頁。

代碼如下：

router.beforeEach((to, from, next) => { if (cache.get('id') && to.path === '/login') {  next('/index') } else if (!cache.get('id') && to.path !== '/login') {  next('/login') } else {  next() }})

六、常用第三方組件

許多常用組件都已經(jīng)有了很好的實(shí)現(xiàn)，在項(xiàng)目開發(fā)中重復(fù)造輪子是一件很不明智的事情。vue移動(dòng)應(yīng)用有很多合適的庫可以選擇，如mint-ui、vux，這里不一一列舉，想了解更多的可以自行谷歌，或直接到GitHub上搜索，這里已mint-ui為例，講一下比較常用的一些組件。

提示組件

提示組件即顯示信息、提示用戶的組件，toast、alert、 prompt皆為此類。

加載數(shù)據(jù)

如上拉加載數(shù)據(jù)、下拉加載（刷新）數(shù)據(jù)、滾動(dòng)加載數(shù)據(jù)；這些在mint-ui中有較好的實(shí)現(xiàn)

日期選擇

比較通用的功能，但自己實(shí)現(xiàn)起來還是相對麻煩的，借助第三方組件就可以很快的實(shí)現(xiàn)了。

使用第三方組件雖然能夠快速完成項(xiàng)目，但是不建議過度使用，一些常用的組件如按鈕、表單還是應(yīng)該自己實(shí)現(xiàn)，一是因?yàn)檫@些組件實(shí)現(xiàn)不是很復(fù)雜，二是因?yàn)橥鶎@些組件每個(gè)應(yīng)用都有自己的設(shè)計(jì)要求，使用第三方然后修改樣式，不但比自編寫更復(fù)雜而且增加冗余文件。

使用第三方組件庫，一般有兩種導(dǎo)入方式：一是全部導(dǎo)入，這樣會(huì)引入很多不必要的文件；二是只導(dǎo)入使用的組件和樣式。建議使用第二種方式，避免導(dǎo)入多余組件，mint-ui可以使用Use babel-plugin-component簡化單獨(dú)導(dǎo)入組件的寫法。

GitHub地址：https://github.com/x007xyz/vue-mobile

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持512筆記。

注：關(guān)于使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼的內(nèi)容就先介紹到這里，更多相關(guān)文章的可以留意512筆記的其他信息。