從0到0.1 擼一個基于Vant的H5簡單框架(一)

前言

本文適合對vue剛?cè)腴T的小白侣滩，通過vue-cli快速創(chuàng)建vue項目口注，以vant ui框架為基礎(chǔ)搭建的H5簡單框架。適配主流手機瀏覽器君珠。內(nèi)容可能有些不嚴(yán)謹(jǐn)或者理解錯誤的地方寝志，歡迎提出指正。

通過本文葛躏，大致可以達(dá)到以下目的:

通過vue-cli創(chuàng)建一個vue項目
sass的配置
axios的二次封裝
vue-router簡單使用
vuex簡單使用
vant的簡單應(yīng)用
post-css-to-viewport移動端適配(兼容vant)
登錄的token設(shè)置
權(quán)限設(shè)計

閱讀之前澈段，你最好對閱讀以下官方文檔，以便快速理解：

vue官網(wǎng)
vue-cli官網(wǎng)
vue-router官方文檔
vuex官方文檔
vant官方文檔
axios中文網(wǎng)

創(chuàng)建項目

安裝vue-cli并創(chuàng)建項目

# 安裝 Vue Cli
npm install -g @vue/cli

# 創(chuàng)建一個項目
vue create vue-vant-demo

# 運行項目
cd vue-vant-demo
npm run serve

服務(wù)啟動瀏覽器訪問http://localhost:8080/預(yù)覽頁面

簡單的vue項目已建好舰攒，接下來再根據(jù)需求添磚加瓦。

SASS預(yù)編譯處理

你可以在創(chuàng)建項目的時候選擇預(yù)處理器 (Sass/Less/Stylus)悔醋。如果當(dāng)時沒有選好摩窃，內(nèi)置的 webpack 仍然會被預(yù)配置為可以完成所有的處理。你也可以手動安裝相應(yīng)的 webpack loader：

# 安裝Sass
npm install -D sass-loader node-sass

裝node-sass的失敗率很高，執(zhí)行命令后默默祈禱吧

sass-loader node-sass 這兩個包安裝成功后猾愿，無需任何配置鹦聪，可以直接在頁面中庸sass寫css了

來測試驗證一下:

修改App.vue文件刪除自動生成的內(nèi)容，加上測試代碼

<template>
  <div id="app">
    <div class="test">
      測試sass
    </div>
  </div>
</template>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 30px;
  .test {
    color: red;
    font-size: 14px;
  }
}
</style>

注: style 標(biāo)簽上需要加上lang 字段來指定預(yù)編譯的語言 ; scoped字段表示當(dāng)前的樣式只對當(dāng)前的頁面(組件)生效蒂秘，編譯時會加上唯一的attribute(比如data-v-7ba5bd90)

我們寫最簡單的sass嵌套的語法泽本，看頁面效果，文字已經(jīng)變成紅色姻僧，說明sass已經(jīng)生效规丽。可以放心大膽的用了撇贺。

01.jpg

vue-router路由

安裝與配置

Vue Router 是 Vue.js 官方的路由管理器赌莺。(具體可以閱讀vue-router的官網(wǎng))

首先安裝

# 安裝vue-router
npm install -s vue-router

在src目錄下新建一個views目錄，用來存放頁面松嘶。我們新建兩個頁面登錄和列表頁模板.

在src目錄下新加router目錄艘狭，用來管理路由。

具體目錄結(jié)構(gòu)如下:

src
  --views
    --login
      Index.vue
    --list
      Index.vue
  --router
    index.js

隨便在登錄頁和列表頁寫幾個字以示區(qū)分翠订，接下來巢音，我們來配置路由

/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// @會從src目錄查找
import Login from '@/views/login/Index.vue'
import List from '@/views/list/Index.vue'

// Vue.js 官方提供的一些插件 (例如 vue-router) 在檢測到 Vue 是可訪問的全局變量時會自動調(diào)用 Vue.use()。然而在像 CommonJS 這樣的模塊環(huán)境中尽超，你應(yīng)該始終顯式地調(diào)用 Vue.use()
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    // meta這個字段有什么用港谊？ 稍等會說
    meta: {
      title: "登錄"
    }
  },
  {
    path: '/list',
    name: 'List',
    component: List,
    meta: {
      title: "列表"
    }
  },
]

const router = new VueRouter({
    // 注意：key名是routes 不是routers!!!
  routes
})

export default router

/scr/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
    // 注冊路由
  router,
  render: h => h(App),
}).$mount('#app')

這樣我們是不是就可以通過路由訪問了？

重啟服務(wù) 訪問/login 試一下發(fā)現(xiàn)登錄頁面寫的內(nèi)容并沒有顯示出來橙弱，也沒有報錯歧寺。。

原來我們漏了很重要的一步需要在加上router-view 路由匹配的組件講在這里顯示

/src/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

這時訪問 http://localhost:8080/#/login http://localhost:8080/#/list都可以正確訪問了

自定義頁面Title

思考：現(xiàn)在登錄和列表頁面的title都是默認(rèn)的項目名棘脐，怎么去改成自定義的title呢斜筐？

/src/views/login/Index.vue

<script>
export default {
  mounted(){
    document.title = '登錄'
  }
}
</script>

等頁面加載完成后，去改變頁面的title蛀缝，這樣雖然也能解決問題顷链，但是如果每個頁面都加上這段操作會顯得麻煩。是否還記得我們剛才在做路由配置的時候加了一個meta屬性屈梁，里面配置了title字段嗤练，這時我們可以通過全局前置守衛(wèi)來解決這個問題

/src/main.js

// 路由守衛(wèi)
router.beforeEach((to, from, next) => {
  if(to.meta.title){
    document.title = to.meta.title
  }
  next()
})

meta字段就是路由元信息字段，我們console.log(to)可以看到在讶，通過to.meta或者to.matched數(shù)組中拿到我們配置的title信息煞抬。這樣就可以為每個頁面都加上自定義的title了。

引入移動端UI框架 Vant

Vant是有贊團(tuán)隊開發(fā)的輕量級的移動端UI組件庫。

安裝

# 安裝vant
npm install vant -s

配置

我們選擇一次性引入所有組件。按需引入方式可以參考官方文檔

在main.js中注冊vant

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

在登錄頁我們引入按鈕組件看一下效果

/views/login/Index.vue

<template>
  <div>
    <van-button type="primary">主要按鈕</van-button>
  </div>
</template>

02.jpg

vant已經(jīng)生效，然鵝福稳，我們看到vant的樣式残拐，單位是px途茫，并不能適配不同分辨率的手機。

Vant適配

vant的官方文檔提供了Rem的適配方式溪食，具體的可以參考官方文檔

rem還要去做px->rem的計算囊卜，有點麻煩。我們通過viewport來解決適配問題错沃。

postcss-px-to-viewport是將px單位轉(zhuǎn)換為視口單位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

安裝

# 安裝到開發(fā)環(huán)境
npm install postcss-px-to-viewport -D

配置

我們需要在根目錄添加.postcssrc.js文件

具體配置如下：

const path = require('path');

module.exports = ({ file })=> {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {}, // 用來給不同的瀏覽器自動添加相應(yīng)前綴栅组，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 要轉(zhuǎn)化的單位
        viewportWidth: designWidth, // UI設(shè)計稿的寬度
        unitPrecision: 6, // 轉(zhuǎn)換后的精度捎废，即小數(shù)點位數(shù)
        propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位笑窜，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
        viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
        fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位登疗，默認(rèn)vw
        selectorBlackList: ["wrap"], // 指定不轉(zhuǎn)換為視窗單位的類名排截，
        minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換
        mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換辐益，默認(rèn)false
        replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
        // exclude: [/node_modules/], // 設(shè)置忽略文件断傲，用正則做目錄名匹配
        landscape: false // 是否處理橫屏情況
      }
    }
  }
};

上面配置項的注釋已經(jīng)很清楚，按說明配置就可以了智政。因為vant的px也需要轉(zhuǎn)成vw认罩，所以exclude不能再配置node_modules或者通過正則不匹配vant

另外，viewportWidth屬性需要配置UI設(shè)計稿的寬度续捂，vant是按375的設(shè)計稿設(shè)計的垦垂，而我們一般開發(fā)時的設(shè)計稿為750，所以這個值是需要做一下判斷來賦值牙瓢。

webpack的plugins可以配置對象劫拗，也可以配置一個函數(shù)，函數(shù)調(diào)用時可以傳入兩個參數(shù)矾克，環(huán)境對象(env)和一個map對象页慷。該對象描述了傳遞給webpack的選項，可以從中獲取output-filename胁附，來判斷是否是vant酒繁，從而為vant賦不同的值。

最后我們重新啟動服務(wù)控妻，看我們的樣式是否已被轉(zhuǎn)成vw:

03.jpg

特別注意 postcss-px-to-viewport插件不能轉(zhuǎn)換行內(nèi)樣式 州袒，所以你寫樣式的時候盡量寫外鏈的樣式或者寫到style里

未完待續(xù)

這篇先寫到這，這些都是最基礎(chǔ)的應(yīng)用饼暑，基本相關(guān)官網(wǎng)都有更詳細(xì)的文檔稳析。還是建議多看官方文檔洗做，少走彎路弓叛。

下次更新的內(nèi)容：

vant實現(xiàn)登錄頁面彰居、列表頁
axios的二次封裝
mock數(shù)據(jù)
接口跨域、代理
角色/權(quán)限設(shè)置

我的掘金地址：

掘金傳送門