vue.js移動端app如何初始配置-創(chuàng)新互聯(lián)

這篇文章主要介紹了vue.js移動端app如何初始配置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(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è)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

示例：

初始工作：

通過vue-cli安裝webpack模板后，會自動生成一大堆文件，通常我們只關(guān)心src/目錄下的東西。
 個人習(xí)慣在src下新建一個base目錄，用來存放通用的css及js，比如樣式重置css，一切js工具函數(shù)。

下載好文件后，npm run dev

啟動服務(wù)你就會看到熟悉的hello vue。由于我們做的是移動端的頁面，所以把chrome切換到手機模式（打開開發(fā)工具，ctrl+shift+m或者點左上角那個手機）

對于移動端如何適配不同的手機屏幕，估計每個人都有自己的做法，我用的是淘寶的flexible.js，根據(jù)不同類型來縮放以及調(diào)整html字體的大小，用rem來布局。使用的方法也很簡單，只需要引入Js文件就可以了，github地址。

這里簡單介紹一下如何計算rem:

假如設(shè)計稿為640,有一個div寬200px，則css應(yīng)該為width:(200/640)*10=3.125rem

假如設(shè)計稿為750,有一個div寬200px，則css應(yīng)該為width:(200/750)*10=2.666rem

可以發(fā)現(xiàn)如果每次量好一個DIV寬后都要用一個計算器算一遍，那這速度也太慢了。

假如你用的是scss，那么可以編寫一個函數(shù)來處理(函數(shù)下面的75px來自設(shè)計稿大小，假如設(shè)計稿為750，則為75；)

@function torem($px) {
 @return $px / 75px * 1rem;
}

假如你用的sublime編輯器,可以到https://github.com/flashlizi/cssrem 下載一個插件，寫起來更方便；

字體的處理：

字體方面我們?nèi)匀挥胮x來寫，不過需要針對不同的縮放比例寫不用的大小，比如安卓下，字體大小為14px,那么iphone6下大小應(yīng)為28，Iphone6s應(yīng)為42px。flexible.js會根據(jù)屏幕縮放比給html添加data-dpr屬性，因此可以通過scss編寫mixin來處理字體

@mixin fz($font-size) {
 font-size: $font-size;
 [data-dpr="2"] & {
  font-size: $font-size * 2;
 }
 [data-dpr="3"] & {
  font-size: $font-size * 3;
 }
}

需要用到字體的地方，@include fz(16px);

圖片的處理:

通常為了適應(yīng)retain和非retain屏幕，我們會準(zhǔn)備不同的圖片大小，也就是2x和3x圖，我的做法是[data-dpr="3"]下使用3x圖，其他情況統(tǒng)一使用2X圖。

在為了方便，編寫一個mixin來處理：（假設(shè)放在2x文件夾和3x文件夾下）

@mixin dpr-img($url,$name,$type:".jpg"){
 background-image: url($url+"2x/"+ $name+"@2x"+$type);
 [data-dpr="3"] &{
  background-image: url($url+"3x/"+ $name+"@3x"+$type);
 }
}

第一個參數(shù)為2x,3x文件夾所在路徑，第二個參數(shù)為文件名，第三個參數(shù)為文件類型，默認(rèn)為.jpg結(jié)尾。

寫CSS時有些代碼塊可能會經(jīng)常用到，因此也可以寫成mixin，比如單行文本溢出和多行文本溢出：

@mixin t-overflow($line:1) {
 @if $line==1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 @else {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }
}

比如左右垂直居中：

@mixin table-center {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

@mixin flex-center {
 display: flex;
 justify-content: center;
 align-items: center;
}

字體圖標(biāo)的處理：

頁面通常都會有很多小圖標(biāo)，為了減少請求以前可能會用雪碧圖來合并，不過我現(xiàn)在基本不用了，用字體圖標(biāo)來代替。我用的是阿里的在線字體圖標(biāo)，上傳svg到阿里字體庫或者直接使用阿里的圖標(biāo)，選中圖標(biāo)后添加到項目，生成地址后，import到項目中就可已使用了。

在App.vue中：

@import url('//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css');

編寫main組件：

頁面上底部有4個tab，點擊時會切換對應(yīng)的組件，所以Main組件的結(jié)構(gòu)是這樣的

<template>
 <div>
  <router-view></router-view>  
  <foot-nav></foot-nav>
 </div>
</template>

foot-nav底部導(dǎo)航的布局如下：

<template>
 <div class="foot-nav-containner">
  <ul class="bottom-nav">
   <router-link tag="li" to='/index' class="bottom-nav__li iconfont icon-shouye bottom-nav__li--home"></router-link>
   <router-link tag="li" to='/search' class="bottom-nav__li iconfont icon-ss bottom-nav__li--search"></router-link>
   <router-link tag="li" to='/car' class="bottom-nav__li iconfont icon-shoppingcart bottom-nav__li--car"></router-link>
   <router-link tag="li" to='/vip' class="bottom-nav__li iconfont icon-gerenzhongxinxia bottom-nav__li--vip"></router-link>
  </ul>
  </div>
</template>

點擊底部每個導(dǎo)航，導(dǎo)航上面的組件都會相應(yīng)的替換。不過要注意點擊購物車時，購物車頁面底部需要有去結(jié)算按鈕，所以購物車頁面是沒有導(dǎo)航的，也就是說購物車的路由配置時不會放在mian路由的children下面。

編寫路由：

 {
  path:'/',
  redirect:"/home"
 }, 
 {
  path:'/home',
  component:Main,
  children:[
   {
    path:'/',
    redirect:"/index"
   },
   {
    path:'/index',
    component:Index
   },
   {
    path:'/search',
    component:Search
   },   
   {
    path:'/vip',
    component:Vip
   }
  ]
 },
 {
  path:'/car',
  component:Car
 }

我們把home路由設(shè)置為默認(rèn)路由，當(dāng)路由為空時，就會重定向到home路由，home路由下又把index路由設(shè)置為默認(rèn)路由。我們把car設(shè)為單獨的路由而不是home下，因此點擊導(dǎo)航的購物車時就會從home路由切換到car路由，而由于底部的路由是放置在home路由下，所以到了購物車頁面導(dǎo)航也就不存在了，這樣基本的配置就差不多完成了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue.js移動端app如何初始配置”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

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

新聞標(biāo)題：vue.js移動端app如何初始配置-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://muchs.cn/article28/dcjecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、Google、商城網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站改版、虛擬主機

廣告

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