小編給大家分享一下如何使用vue構(gòu)建移動(dòng)應(yīng)用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),陽(yáng)曲企業(yè)網(wǎng)站建設(shè),陽(yáng)曲品牌網(wǎng)站建設(shè),網(wǎng)站定制,陽(yáng)曲網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,陽(yáng)曲網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

vue是什么

Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

在移動(dòng)應(yīng)用中很多功能都是必不可少的，使用vue構(gòu)建移動(dòng)應(yīng)用自然也就需要實(shí)現(xiàn)這些功能。之所以寫(xiě)這篇文章，是希望大家能更多的將注意力放在項(xiàng)目的核心業(yè)務(wù)上，而不是過(guò)多的關(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è)置禁止縮放，以便顯示合適大小的頁(yè)面。

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

通用功能

一、頁(yè)面跳轉(zhuǎn)

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

在路由文件中設(shè)置meta為數(shù)字，meta表示其路由的深度，然后在A(yíng)pp.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)聽(tīng)$route，根據(jù)to、from meta值的大小設(shè)置不同的跳轉(zhuǎn)動(dòng)畫(huà)。如果應(yīng)用到多種跳轉(zhuǎn)動(dòng)畫(huà)，可以根據(jù)詳情，具體情況具體應(yīng)用。

登錄跳轉(zhuǎn)

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

二、底部導(dǎo)航

直接引用Tabbar組件即可，如果需要添加跳轉(zhuǎn)動(dòng)畫(huà)可以在<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: '首頁(yè)'},
    {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ù)與加載頁(yè)面是存在先后順序的，比較通用方法是先加載頁(yè)面，顯示數(shù)據(jù)加載效果，在數(shù)據(jù)加載完成之后顯示完整的頁(yè)面。數(shù)據(jù)加載效果作為組件添加到應(yīng)用中，比較繁瑣，所以使用自定義指令的方式實(shí)現(xiàn)數(shù)據(jù)加載效果的顯示。

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

四、接口文件

import fetch from 'isomorphic-fetch'
import store from 'store'
import router from './router'
var env = process.env.NODE_ENV
var rootUrl
if (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) {
   // 沒(méi)有權(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)限（判斷用戶(hù)id是否存在），如果存在直接跳過(guò)登錄頁(yè)進(jìn)入首頁(yè)，如果不存在在跳轉(zhuǎn)登錄頁(yè)。

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)目開(kāi)發(fā)中重復(fù)造輪子是一件很不明智的事情。vue移動(dòng)應(yīng)用有很多合適的庫(kù)可以選擇，如mint-ui、vux，這里不一一列舉，想了解更多的可以自行谷歌，或直接到GitHub上搜索，這里已mint-ui為例，講一下比較常用的一些組件。

提示組件

提示組件即顯示信息、提示用戶(hù)的組件，toast、alert、 prompt皆為此類(lèi)。

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

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

日期選擇

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

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

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

看完了這篇文章，相信你對(duì)“如何使用vue構(gòu)建移動(dòng)應(yīng)用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱(chēng)：如何使用vue構(gòu)建移動(dòng)應(yīng)用-創(chuàng)新互聯(lián)
文章位置：http://chinadenli.net/article44/cepgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站策劃、微信公眾號(hào)、做網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)