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

前言

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

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

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

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

創(chuàng)建項(xiàng)目

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

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

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

# 運(yùn)行項(xiàng)目
cd vue-vant-demo
npm run serve

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

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

SASS預(yù)編譯處理

你可以在創(chuàng)建項(xiàng)目的時(shí)候選擇預(yù)處理器 (Sass/Less/Stylus)。如果當(dāng)時(shí)沒有選好，內(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了

來測試驗(yàn)證一下:

修改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)前的頁面(組件)生效，編譯時(shí)會加上唯一的attribute(比如data-v-7ba5bd90)

我們寫最簡單的sass嵌套的語法，看頁面效果，文字已經(jīng)變成紅色，說明sass已經(jīng)生效?？梢苑判拇竽懙挠昧恕?/p>

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 是可訪問的全局變量時(shí)會自動調(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)容并沒有顯示出來，也沒有報(bào)錯。。

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

/src/App.vue

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

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

自定義頁面Title

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

/src/views/login/Index.vue

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

等頁面加載完成后，去改變頁面的title，這樣雖然也能解決問題，但是如果每個頁面都加上這段操作會顯得麻煩。是否還記得我們剛才在做路由配置的時(shí)候加了一個meta屬性，里面配置了title字段，這時(shí)我們可以通過全局前置守衛(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)隊(duì)開發(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，并不能適配不同分辨率的手機(jī)。

Vant適配

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

rem還要去做px->rem的計(jì)算，有點(diǎn)麻煩。我們通過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è)計(jì)稿的寬度
        unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(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 // 是否處理橫屏情況
      }
    }
  }
};

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

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

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

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

03.jpg

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

未完待續(xù)

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

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

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

我的掘金地址：

掘金傳送門

參考文檔

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容