使用vue-admin 構建手機端應用

vue-admin是一款比較常用的vue開源項目，下面是根據自己的需求使其增加mobile 的ui

1.我使用的是vue-admin-template來進行修改的，因為相對的餓了么的組件較少好修改一些，下面是下載項目

git clone https://github.com/PanJiaChen/vue-admin-template.git

2.然后是選擇自己需要的mobile ui,這里我選的是有贊的vant,下面是官網地址

https://youzan.github.io/vant/#/zh-CN/intro

3.引入vant

找到babel.conf.js文件，增加vant

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

運行：

yarn add vant

3.修改layout模塊

原來的模塊是針對web端的element-ui,現在使用vant:效果圖如下：

 

下面是具體的實現：

修改layout

首先修改header，將原有的面包屑去除，修改的地方是layout模塊下的components下的Navbar.vue

<template>
  <div class="navbar">
    <van-nav-bar
      title="標題"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed=true
    />
  </div>
</template>

增加返回的方法

onClickLeft() {
      this.$router.go(-1)
}

並在main.js中引入需要的組件，完成后的

完成的部分是

注意因為原有的樣式可能會出現雙分割線的問題，注釋Navbar.vue里的這句css

 /*box-shadow: 0 1px 4px rgba(0,21,41,.08);*/

增加底部導航欄：

在layout模塊下的index.vue下增加導航欄代碼

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <app-main />
    </div>
    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" @click="goHome">首頁</van-tabbar-item>
        <van-tabbar-item icon="search" @click="showMenus">菜單</van-tabbar-item>
        <van-tabbar-item icon="setting-o" @click="setting">個人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

同時增加切換選項卡，進行路由的改變

methods: {
//點擊空白收縮側邊欄
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
//跳出側邊欄菜單
    showMenus() {
      this.$store.dispatch('app/toggleSideBar')
    },
//跳轉個人中心
    setting() {
      this.$router.push({ path: '/setting' })
    },
//跳轉首頁
    goHome() {
      this.$router.push({ path: '/' })
    }
  }

 

修改完layout以后基本上后續的功能就是使用mobile -ui來開發app單頁了