管理后台Vue

管理后台遇到的问题

搭建

基于vue 3.0 Vue CLI 4.x Ant Design Vue 2.0 搭建后台管理系统

Ant Design Vue 2.0

 npm i --save ant-design-vue@next

Axios

 npm install axios

NProgress

npm install --save nprogress

配制

按需引入Ant Design Vue

安装插件 babel-plugin-import

npm install babel-plugin-import --save-dev

修改配制文件 babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    {
      "plugins": [
        ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": 'css' }] // `style: true` 会加载 less 文件 (修改后报错)
      ]
    }
  ]
}

SRC下新建 plugs/ant-design-vue文件夹创建index.js

index.js 中代码

 import {
    Button,
} from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'
export function setupAntd(app){
    app.use(Button),    
}

再main.js 中引入

import {setupAntd} from './plugs/ant-design-vue/index'


const app=createApp(App)
setupAntd(app)

注意: 以下一下组件使用时需以下方式引入

notification 文档连接 https://2x.antdv.com/components/notification-cn

message 文档连接 https://2x.antdv.com/components/message-cn
import { message } from 'ant-design-vue';
import { notification } from "ant-design-vue";

全局配置Axios

main.js

import Axios from 'axios'
Axios.defaults.baseURL="http://192.168.31.199:8888"


const app=createApp(App)
app.config.globalProperties.$axios=Axios

axios 拦截器

大部分请求接口需要token 等身份信息才能访问若给每个请求都加上请求头设置麻烦而且后期不好修改这时可以使用拦截器另外实现加载数据的loading效果也可以使用拦截器全局设置

请求拦截器

// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 判断是否存在token,如果存在将每个页面header添加token
    if (sessionStorage.getItem("access-token")) {
      config.headers.common['access-token'] = sessionStorage.getItem("access-token");
    }
    return config
  }, function (error) {
    router.push('/')
    return Promise.reject(error)
  })

相应拦截器

// 添加响应拦截器
Axios.interceptors.reponse.use(res => {
    // 请求成功对响应数据做处理
    // 该返回的数据则是axios.then(res)中接收的数据
    return res
}, err => {
    // 在请求错误时要做的事儿
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

使用iconfont

引入：

import {
 createFromIconfontCN,
} from "@ant-design/icons-vue";
const IconFont = createFromIconfontCN({
 scriptUrl: "//at.alicdn.com/t/font_1926999_siv4qyygml.js",
});

export default {
 components: {
   IconFont,
 
 },

使用:

<IconFont type="icon 名称" />

ant design vue 国际化配置

ant-design-vue 目前的默认文案是英文，

配置中文

引入 ConfigProvider组件添加 moment
```
npm install moment --save 
```
Moment.js 适用于获取时间格式化时间的 ant dsign vue 的时间日期类组件使用的此组件

http://momentjs.cn/

在根组件配置

<template>
  <div class="app-root">
     <a-config-provider :locale="locale">
    <App />
     </a-config-provider>
  </div>

</template>


<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
moment.locale('zh');
export default {
  components: {
  },

  mounted() {},
  data() {
    return {
      moment,
      locale: zhCN
 
    };
  },

  methods: {

  },
};
</script>

路由切换动画

Vue 路由切换时页面的动画可以在 <router-view></router-view>使用vue提供的<transition></transition>进行设置具体参数如下:

<router-view v-slot="{ Component }">
  <transition
   name="custom-classes-transition"
   enter-active-class="animate__animated animate__fadeIn"
   >
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

NProgress 加载进度条配置

引入组件

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

使用

NProgress.start() //进度条显示
NProgress.done()   //加载完成

例子

再vue 路由中使用实现路由切换加载进度

// 给路由设置守卫函数
router.beforeEach((to, form, next) => {
  NProgress.start()
  next()

  // to表示将要访问的路径
  // form表示从那个页面跳转而来
  // next表示允许跳转到指定位置
})

router.afterEach(() => {
  NProgress.done()
})

自定义滚动条

<div class="scrollbar">

  <div class="contxt"></div>

</div>

.scrollbar{

     50px;

    height: 200px;

    overflow: auto;

    float: left;

    margin: 5px;

    border: none;

}

.context{

     30px;

    height: 300px;

    margin: 0 auto;

 

}

.scrollbar::-webkit-scrollbar {/*滚动条整体样式*/

         10px;     /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;

    }

.scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius: 10px;

         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        background: #535353;

    }

.scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        border-radius: 10px;

        background: #EDEDED;

}

设置针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：

滚动条组成部分

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

路由

路由传参

使用场景当从一个页面跳转到另一个页面时需要从原始页面带一个参数传递到新的页面时就需要使用vue的路由传参

方式1

// 跳转     
this.$router.push({
          path: `/路由路径/${参数值}`,
 })
//路由配置
   {
     path: '/路由路径/:参数名',
     name: '组件名',
     component: 组件 
   }
//取参数值
this.$route.params.参数名

上面这种方式 刷新页面数据不会丢失 因为参数直接都拼接到路径上了页面跳转时 url

http://127.0.0.1/路由路径/:参数名

方式2

//跳转
this.$router.push({
          name: '组件名',
          params: {
            参数名: 参数值
          }
})
//路由配置
   {
     path: '/路由路径',
     name: '组件名',
     component: 组件 
   }
//取参数值
this.$route.params.参数名

上面这种方式 页面刷新数据丢失 这种方式通过组件名进行路由匹配所以路由名一定要对上数据会进行隐藏在url后看不到数据

方式3

//跳转
      this.$router.push({
          path: '/路由路径',
          query: {
           参数名: 参数值
          }
        })
//路由配置
   {
     path: '/路由路径',
     name: '组件名',
     component: 组件 
   }
//取参数值
this.$route.query.参数名

上这种方式使用 刷新页面数据不会丢失 数据会显示在url后面

注意: 在我使用的过程中经常需要传递一个对象而不是简单的基本数据但对象无法传输我的解决方案是将对象转成json字符串格式到新页面再转成对象进行使用

打包

打包后会遇到页面打开是空白的状况

需要在src 先创建一个 vue.config.js 文件

module.exports = {
    publicPath: './',
};

搭建管理后台比较重要的是