vue-amdin-template的改造使用

一. 該項目的結構原理

├── App.vue //入口
├── api // 各種接口
├── assets // 圖片等資源
├── components // 各種公共組件，非公共組件在各自view下維護
├── icons //svg icon
├── main.js //入口
├── permission.js //認證入口
├── router // 路由表
├── store // 存儲
├── styles // 各種樣式
├── utils // 公共工具，非公共工具，在各自view下維護
└── views // 各種layout

本質就是App.vue作爲入口文件，其它所有頁面都是通過router-view渲染在這上面。

第一個級別：app.vue 用來做展示，login和404，layout這些頁面，默認就是以App.vue作爲底。

第二個級別：layout上的mainapp.vue用來做展示，通過嵌套路由更換layout的app-main上的視圖

 

login.vue

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

 

main.js

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

App.vue

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

<script>
export default {
  name: 'App'
}
</script>

是我們的主組件，所有頁面都是在App.vue下進行切換的。其實你也可以理解爲所有的路由也是App.vue的子組件

layout

layout 這個template 是一個組合組件，包含了AppMain和Navar，sidebar， 這三個都是自定義組件，

在export的components中聲明之後， template中就可以直接用標籤引入，比如Appmain對應</app-main>

<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>
</template>

<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain
  }
}
</script>

 

自定義組件

比如AppMain

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.path
    }
  }
}
</script>

router-view

router-view和路由嵌套有關

嵌套路由， component: () => import('@/views/form/index'), from這個組件會被渲染在Layout的router-view中，雖然layout中沒有直接寫出來的router-view，但是app-main本質也是一個template會被替換到layout頁面中，所以會被渲染在這個app-main的router-view中。

{
    path: '/form',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: { title: 'Form', icon: 'form' }
      }
    ]
  },

 

二. 改造使用

1. 使用版本目前是git上的最新版本，該版本基於vue-cli 4.0

2. 登錄頁面login/index.vue 註釋掉登錄判斷模塊，這裏直接返回true。不然每次去mock取出來判斷，後面我們會將mock替換成真實地址

    handleLogin() {
      return true
      // this.$refs.loginForm.validate(valid => {
      //   if (valid) {
      //     this.loading = true
      //     this.$store.dispatch('user/login', this.loginForm).then(() => {
      //       this.$router.push({ path: this.redirect || '/' })
      //       this.loading = false
      //     }).catch(() => {
      //       this.loading = false
      //     })
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    }

 

3.將mock替換成自己的java後端

vue.config.js

proxy作爲一個代理轉發，開發環境中可以直接在vue中配置，生產環境還是

[process.env.]   這個是匹配到的url，都轉發給target， 然後pathrewrite這裏是替換成新的路徑

比如：  http://localhost:9258/dev-api/test   這裏就替換成 http://localhost:8081/test

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    //proxy爲新增的內容
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8081`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    before: require('./mock/mock-server.js')
  },

request.js 要將response的處理註釋掉或者替換成自己的，不然會被攔截到

response => {
    const res = response.data
    return res
    // // if the custom code is not 20000, it is judged as an error.
    // if (res.code !== 20000) {
    //   Message({
    //     message: res.message || 'Error',
    //     type: 'error',
    //     duration: 5 * 1000
    //   })

    //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
    //     // to re-login
    //     MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
    //       confirmButtonText: 'Re-Login',
    //       cancelButtonText: 'Cancel',
    //       type: 'warning'
    //     }).then(() => {
    //       store.dispatch('user/resetToken').then(() => {
    //         location.reload()
    //       })
    //     })
    //   }
    //   return Promise.reject(new Error(res.message || 'Error'))
    // } else {
    //   return res
    // }
  },

暫時沒必要對permession.js下手，除非要自己定義權限控制

三. 增加一個新頁面

src/view 下面新增頁面

src/api 下面新增axios的請求

router 增加對應url路由