6风筝9

一点一点

发消息

管理后台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: './',
};

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

posted @ 2021-03-08 20:25  6风筝9  阅读(111)  评论(0)  编辑  收藏  举报