vue-amdin-template的改造使用_vue改appmain样式-CSDN博客

本文链接：https://blog.csdn.net/u013497977/article/details/106751088

一. 该项目的结构原理

├── 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上的视图

{
    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
    // }
  },