当前位置: 首页 > 工具软件 > d2-admin > 使用案例 >

基于Vue开发的D2-Admin框架使用方法

尉迟彬
2023-12-01

 


更改服务启动端口与配置代理

Vue-Cli默认无法配置端口与代理,可以自己添加,在根目录下vue.config.js文件中找到devServer修改其中配置即可

  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://10.70.25.239:7000',

        //更换源
        changeOrigin: true,

        //重写路径
        pathRewrite: {
          '^/api': ''
        },
      }
    },
    publicPath // 和 publicPath 保持一致
  },


template标签中不添加div或添加多个div处理方法

template只能渲染绑定一个div,如果需要使用第二个div,使用v-if,v-else-if,当两个div条件都为true时,默认选中第一个为true的div

<template>
  <div v-if="true">

  </div>
  <div v-else-if="true">

  </div>
</template>


新建页面(一级,二级,三级)

只有在最下层菜单加path属性添加访问路径,其他菜单只做展示使用

// 菜单 顶栏
export const menuHeader = [
  {

  //一级菜单
    title: '功能',
    icon: 'puzzle-piece',
    children: [
      {

       //二级菜单
        title: '新窗口打开链接',
        icon: 'link',
        children: [

          //三级菜单
          { path: 'https://github.com/d2-projects/d2-admin', title: 'D2Admin Github', icon: 'github' }
      }
    ]
  }
]
 

 

 

 

 

 

 

 

 

 

 

 类似资料: