管理后台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

1. 安装插件 babel-plugin-import

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

2. 修改配制文件 babel.config.js

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

3. 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),
   }
   

4. 再main.js 中引入

   import {setupAntd} from './plugs/ant-design-vue/index'
   
   const app=createApp(App)
   setupAntd(app)
   

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

1. notification 文档连接 https://2x.antdv.com/components/notification-cn
2. 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效果 也可以使用拦截器全局设置

1. 请求拦截器

   // 添加请求拦截器
   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)
     })
   

2. 相应拦截器

   // 添加响应拦截器
   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 目前的默认文案是英文，

配置中文

1. 引入 ConfigProvider组件 添加 moment

   npm install moment --save
   

   Moment.js 适用于获取时间 格式化时间的 ant dsign vue 的时间日期类组件使用的此组件

   http://momentjs.cn/

2. 在根组件 配置

   <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{

    width: 50px;

    height: 200px;

    overflow: auto;

    float: left;

    margin: 5px;

    border: none;

}

.context{

    width: 30px;

    height: 300px;

    margin: 0 auto;

}

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

        width: 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内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：

滚动条组成部分

1. ::-webkit-scrollbar 滚动条整体部分

2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）

3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。

5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方

7. ::-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: './',
};

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