使用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單頁了