小編給大家分享一下如何使用vue構(gòu)建移動應(yīng)用,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),陽曲企業(yè)網(wǎng)站建設(shè),陽曲品牌網(wǎng)站建設(shè),網(wǎng)站定制,陽曲網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,陽曲網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
在移動應(yīng)用中很多功能都是必不可少的,使用vue構(gòu)建移動應(yīng)用自然也就需要實(shí)現(xiàn)這些功能。之所以寫這篇文章,是希望大家能更多的將注意力放在項(xiàng)目的核心業(yè)務(wù)上,而不是過多的關(guān)注通用功能。
基礎(chǔ)設(shè)置
使用vue-cli搭建項(xiàng)目框架
在index.html文件中添加<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">,在移動端設(shè)置禁止縮放,以便顯示合適大小的頁面。
如果要將頁面封裝為app,那么需要將config/index.js中build的assetsPublicPath設(shè)置為'./',build獲得的頁面可以直接打開,而不需要使用服務(wù)器。
通用功能
一、頁面跳轉(zhuǎn)
一般應(yīng)用都會擁有多個頁面,在vue中通過vue-router來管理頁面。移動應(yīng)用頁面跳轉(zhuǎn)時,都有轉(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)動畫。如果應(yīng)用到多種跳轉(zhuǎn)動畫,可以根據(jù)詳情,具體情況具體應(yīng)用。
登錄跳轉(zhuǎn)
PS:這里的動畫效果引用自animate.scss;
二、底部導(dǎo)航
直接引用Tabbar組件即可,如果需要添加跳轉(zhuǎn)動畫可以在<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ù)加載效果的顯示。
數(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) { // 沒有權(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è)置,也可以在需要時導(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移動應(yīng)用有很多合適的庫可以選擇,如mint-ui、vux,這里不一一列舉,想了解更多的可以自行谷歌,或直接到GitHub上搜索,這里已mint-ui為例,講一下比較常用的一些組件。
提示組件
提示組件即顯示信息、提示用戶的組件,toast、alert、 prompt皆為此類。
加載數(shù)據(jù)
如上拉加載數(shù)據(jù)、下拉加載(刷新)數(shù)據(jù)、滾動加載數(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)橥鶎@些組件每個應(yīng)用都有自己的設(shè)計(jì)要求,使用第三方然后修改樣式,不但比自編寫更復(fù)雜而且增加冗余文件。
使用第三方組件庫,一般有兩種導(dǎo)入方式:一是全部導(dǎo)入,這樣會引入很多不必要的文件;二是只導(dǎo)入使用的組件和樣式。建議使用第二種方式,避免導(dǎo)入多余組件,mint-ui可以使用Use babel-plugin-component簡化單獨(dú)導(dǎo)入組件的寫法。
看完了這篇文章,相信你對“如何使用vue構(gòu)建移動應(yīng)用”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道,感謝各位的閱讀!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁名稱:如何使用vue構(gòu)建移動應(yīng)用-創(chuàng)新互聯(lián)
文章位置:http://m.newbst.com/article44/cepgee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)、營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃、微信公眾號、做網(wǎng)站、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)