精华内容
下载资源
问答
  • dashboard:基于 Vue 2.0 优雅的管理后台
  • <div><p>is there a way to put vue-argon-dashboard and vue-argon-design-system in one project, i want to use the langin page in vue-argon-design-system with the the dashboard</p><p>该提问来源于开源项目...
  • Vue Material Dashboard是一个基于和构建的漂亮资源。 它将帮助您立即开始开发仪表板。 Vue Material Dashboard是原始Material Dashboard的官方Vuejs版本。 使用仪表板非常简单,但是需要具备Javascript, 和基础...
  • ct-vue-material-dashboard-pro:Vue Material Dashboard Pro-材料设计管理员
  • vue构建dashboard

    千次阅读 2019-08-09 20:51:17
    App.vue添加 #app { height : 100% ; width : 100% ; } index.html添加 html,body { margin : 0 ; padding : 0 ; width : 100% ; height : 100% ; } 效果如下 step3...

    step1 水平划分组件为三层

    <template>
      <div>
        <div class="upPart">
          a
        </div>
        <div class="centerPart">
          b
        </div>
        <div class="downPart">
          c
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
    }
    </script>
    
    <style scoped>
    .upPart{
      background-color:blanchedalmond;
    }
    .centerPart{
      background-color: aqua;
    }
    .downPart{
      background-color: blueviolet;
    }
    </style>
    

    写了三个div会发现边缘还是有空白的,在index.html文件里加入如下代码即可解决
    在这里插入图片描述

    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
    </style>
    

    效果如下
    在这里插入图片描述

    step2 使三个div铺满整个屏幕

    <template>
      <div class="mainPage">
        <div class="upPart">
          a
        </div>
        <div class="centerPart">
          b
        </div>
        <div class="downPart">
          c
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
    }
    </script>
    
    <style scoped>
    html,body{
      height: 100%;
      width: 100%;
    }
    .mainPage{
      height: 100%;
      width: 100%;
    }
    .upPart{
      height: 30%;
      background-color:blanchedalmond;
    }
    .centerPart{
      height: 30%;
      background-color: aqua;
    }
    .downPart{
      height: 40%;
      background-color: blueviolet;
    }
    </style>
    

    App.vue添加

    #app{
      height: 100%;
      width: 100%;
    }
    

    index.html添加

    html,body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    

    效果如下
    在这里插入图片描述

    step3垂直划分组件为两层

    <template>
      <div class="mainPage">
        <div class="upPart">
          a
        </div>
        <div class="centerPart">
          b
        </div>
        <div class="downPart">
          <div class="downPartLeft">
            c
          </div>
          <div class="downPartRight">
            d
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
    }
    </script>
    
    <style scoped>
    html,body{
      height: 100%;
      width: 100%;
    }
    .mainPage{
      height: 100%;
      width: 100%;
    }
    .upPart{
      height: 30%;
      background-color:blanchedalmond;
    }
    .centerPart{
      height: 30%;
      background-color: aqua;
    }
    .downPart{
      height: 40%;
      background-color: blueviolet;
    }
    .downPartLeft{
      width: 40%;
      /* 高度设置为父组件downPart的高度 */
      height: 40%;
      position: absolute;
      display: inline-block;
    }
    .downPartRight{
      width: 60%;
      height: 40%;
      background-color: coral;
      /* position设置为absolu可以进行left right top bottom等设置 */
      position: absolute;
      /* 重要 设置右边离屏幕右边距离为0 */
      right: 0%;
      display: inline-block;
    }
    </style>
    

    在这里插入图片描述
    源码地址:https://github.com/IcedOtaku/dashboard

    展开全文
  • 仪表板 IPay项目 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
  • vue-vuetify-todo 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 火力基地的结构 集合-'项目' 集合-“团队”
  • vue-dashboard-源码

    2021-04-08 23:36:33
    登录信息 Acc: Pass:PaZZword! 管理包 设计: : 项目设置 npm install 编译和热重装以进行开发 npm run dev 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • Vue White仪表板是一个漂亮的Bootstrap 4 Admin仪表板,其大量组件内置在一起,看起来非常漂亮。 如果您正在寻找一种工具来管理和可视化有关您的业务的数据,则此仪表板很适合您。 它融合了容易上手的颜色,宽大的...
  • 安装 首先,请确保已安装所有先决条件: (> = 8.9) 3+版本(或 1.16+版本)和 。 检查前提条件后,请按照以下简单步骤安装和使用Vuestic Admin: # clone the repo ...# go into app's directory and install ...
  • vue前端UI模板,vue-argon-dashboard-master,使用方法:安装依赖包(cnpm install)、运行预览(yarn run serve)
  • 食品仪表盘 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch server $ yarn build $ yarn start # generate static ...
  • 浅谈Vue个性化dashBoard 布局

    千次阅读 2017-09-29 22:09:05
    dashBoard布局在管理系统使用比较多;使用自己喜欢的方式进行自定义布局使用npm 安装npm install vue-grid-layout全局使用import vueGridLayout from 'vue-grid-layout'; Vue.use(vueGridLayout);局部使用var ...

    dashBoard布局在管理系统使用比较多;使用自己喜欢的方式进行自定义布局

    使用npm 安装

    npm install vue-grid-layout

    全局使用

    import vueGridLayout from 'vue-grid-layout';
    Vue.use(vueGridLayout);

    局部使用

    var GridLayout = vueGridLayout.GridLayout;
    var GridItem = vueGridLayout.GridItem;
    

    注册组件

     components:{
                GridLayout,
                GridItem,
        },

    数据源

    var testLayout = [
          {"x":0,"y":0,"w":2,"h":2,"i":"0",compentent:"组件"},
          {"x":2,"y":0,"w":2,"h":4,"i":"1",compentent:"组件"},
          {"x":4,"y":0,"w":2,"h":5,"i":"2",compentent:"组件"},
          {"x":6,"y":0,"w":2,"h":3,"i":"3",compentent:"组件"},
        ];

    渲染

    <grid-layout
                :layout="layout"
                :col-num="12"
                :row-height="30"
                :is-draggable="true"
                :is-resizable="true"
                :vertical-compact="true"
                :margin="[10, 10]"
                :use-css-transforms="true"
        >
            <grid-item v-for="item in layout"
                       :x="item.x"
                       :y="item.y"
                       :w="item.w"
                       :h="item.h"
                       :i="item.i">
              <component v-bind:is="item.component"> </component>
            </grid-item>
        </grid-layout>

    参数配置

    autoSize    Boolean true    是否根据内容确定容器的高度
    isDraggable Boolean true    是否支持推拽
    isResizable Boolean true    是否支持改变大小
    useCssTransforms    Boolean true    是否使用自定义的过渡效果
    verticalCompact Boolean true    是否使用verticalCompact布局
    layout  Array   -   布局位置

    事件

    @resize="resizeEvent"     //托拽时
    @move="moveEvent"         //移动时
    @resized="resizedEvent"  //托拽结束
    @moved="movedEvent"      //移动停止

    是不错的dashBoard布局选择,参考来源
    https://github.com/jbaysolutions/vue-grid-layout

    展开全文
  • vue项目中如何实现点击Dashboard跳转发布时间:2020-11-16 14:55:37来源:亿速云阅读:83作者:Leah本篇文章给大家分享的是有关vue项目中如何实现点击Dashboard跳转,小编觉得挺实用的,因此分享给大家学习,希望...

    vue项目中如何实现点击Dashboard跳转

    发布时间:2020-11-16 14:55:37

    来源:亿速云

    阅读:83

    作者:Leah

    本篇文章给大家分享的是有关vue项目中如何实现点击Dashboard跳转,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

    1.点击跳转写法

    点击页面内容:优先级优先级

    点击页面内容:状态状态

    点击echarts柱状

    this.chartEvent.on('click',function (param) {

    that.$router.push({

    path: '/cases/case',

    query: { createdTime: param.name,type:"createdTime" }

    });

    })

    2.表格分页写法(不同跳转 显示不同传参)

    注:由于该页面下拉框也有相应的优先级筛选条件 所有写了两层if判断了一下

    getData: function(){

    //获取CaseSearch里面的搜索内容

    eventBus.$on('ticketEntityId',function(val){

    tableCaseVue.ticketEntityId=val;

    })

    eventBus.$on('companyId',function(val){

    tableCaseVue.companyId=val;

    })

    eventBus.$on('priorityId',function(val){

    tableCaseVue.priorityId=val;

    })

    eventBus.$on('status',function(val){

    tableCaseVue.status=val;

    })

    eventBus.$on('ticketCategory',function(val){

    tableCaseVue.ticketCategory=val;

    })

    var pageTicketDate = {

    "pageNum": this.current,

    "pageSize": this.pageSize,

    "priorityId":tableCaseVue.priorityId,

    "status":tableCaseVue.status,

    "ticketEntityId":tableCaseVue.ticketEntityId,

    "companyId":tableCaseVue.companyId,

    "ticketCategory":tableCaseVue.ticketCategory

    };

    // 优先级

    if((this.$route.query.type == 'priorityId')&&(pageTicketDate.priorityId=='')){

    pageTicketDate.priorityId=this.$route.query.priorityId;

    }

    // 状态

    if((this.$route.query.type == 'status')&&(pageTicketDate.status=='')){

    pageTicketDate.status=this.$route.query.status;

    }

    //创建时间

    if (this.$route.query.type == 'createdTime') {

    pageTicketDate.createdTime = this.$route.query.createdTime;

    }

    //当前月

    if (this.$route.query.type == 'currentMonth') {

    pageTicketDate.currentMonth = this.$route.query.currentMonth;

    }

    if(pageTicketDate.ticketEntityId||pageTicketDate.companyId||pageTicketDate.priorityId||pageTicketDate.status||pageTicketDate.ticketCategory){

    pageTicketDate.ticketEntityId=tableCaseVue.ticketEntityId;

    pageTicketDate.companyId=tableCaseVue.companyId;

    pageTicketDate.priorityId=tableCaseVue.priorityId;

    pageTicketDate.status=tableCaseVue.status;

    pageTicketDate.ticketCategory=tableCaseVue.ticketCategory;

    pageTicketDate.createdTime='';

    pageTicketDate.currentMonth='';

    }

    this.$api.ticket.pageTicket(pageTicketDate)

    .then(res => {

    this.tableCaseDate = res.data.records;

    for(var i=0;i

    // 响应时间

    if(this.tableCaseDate[i].waitTime!=undefined){

    this.tableCaseDate[i].waitTime=this.tableCaseDate[i].waitTime+'分钟';

    }

    // 处理时间

    if(this.tableCaseDate[i].handleTime!=undefined){

    this.tableCaseDate[i].handleTime=this.tableCaseDate[i].handleTime+'分钟';

    }

    // 完成时间

    if(this.tableCaseDate[i].finishTime!=undefined){

    this.tableCaseDate[i].finishTime=this.tableCaseDate[i].finishTime;

    }else{

    this.tableCaseDate[i].finishTime='N/A';

    }

    }

    // 当前页

    this.current = res.data.current;

    // 总条数

    this.dataTotal = res.data.total;

    });

    }

    补充知识:vue点击跳转到详情页

    1商品组件页面GoodsInfo.vue(点击该组件跳转到详情页)

    {{goodsName}}
    ¥{{ goodsPrice.toFixed(2) }}

    export default {

    name: "goodsInfo",

    // 首页传过来的

    props: ["goodsImage", "goodsName", "goodsPrice", "goodsId"],

    data() {

    return {};

    },

    methods: {

    goGoodsPage() {

    // 跳转到Goods.vue商品详情页面,name为Goods.vue页面路由配置里的的name属性

    this.$router.push({name:"goods",query:{goodsId:this.goodsId}})

    }

    }

    };

    .goods-info {

    padding-bottom: 0.2rem;

    .goods-image {

    text-align: center;

    img{

    width: 95%;vertical-align: middle;

    }

    }

    .goods-name {

    padding: 0 8px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    }

    .goods-price {

    text-align: center;

    color: #e5017d;

    }

    }

    2商品详情页面Goods.vue(接收商品组件页面GoodsInfo.vue传过来的goodsId)

    商品详情页

    import url from "@/urlApi.js";

    export default {

    name: "goods",

    data() {

    return {

    goodsId: ""

    };

    },

    created () {

    // 接收GoodsInfo.vue传过来的goodsId

    this.goodsId = this.$route.query.goodsId

    console.log(this.goodsId)

    this.getGoodsInfo();

    },

    methods: {

    getGoodsInfo() {

    let that = this;

    this.$http

    .post(url.getDetailGoodsInfo,{goodsId: that.goodsId})

    .then(response => {

    //根据goodsId获取对应的商品详情信息

    console.log(response)

    })

    .catch(error => {

    });

    }

    }

    };

    以上就是vue项目中如何实现点击Dashboard跳转,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

    展开全文
  • 演示中禁用了登录身份验证系统以及除向用户表获取请求外的所有其他API 演示在侧边栏上有一个额外的登录按钮,因此您可以看到它的外观 Vuetify Admin Dashboard是一个和构建的漂亮资源。... 内置的Vue-C
  • vue-cli-service serve --mode development --dashboard $ vue-cli-service serve --mode development --dashboard INFO Starting development server... <s> [webpack.Progress] 0% compiling <s&g...
    vue-cli-service serve --mode development --dashboard

    $ vue-cli-service serve --mode development --dashboard
     INFO  Starting development server...

    <s> [webpack.Progress] 0% compiling

    <s> [webpack.Progress] 10% building 0/0 modules 0 active 
    <s> [webpack.Progress] 10% building 0/1 modules 1 active multi /Users/jianwewa/js/vue_test/vue_shop/node_modules/webpack-dev-server/client/index.js?http://x86_64-apple-darwin13.4.0:8080/sockjs-node /Users/jianwewa/js/vue_test/vue_shop/node_modules/webpack/hot/dev-server.js ./src/main.js
    <s> [webpack.Progress] 10% building 1/1 modules 0 active 
    <s> [webpack.Progress] 10% building 1/1 modules 0 active 
    <s> [webpack.Progress] 10% building 1/2 modules 1 active multi /Users/jianwewa/js/vue_test/vue_shop/node_modules/webpack/hot/dev-server.js /Users/jianwewa/js/vue_test/vue_shop/node_modules/webpack-dev-server/client/index.js?http://x86_64-apple-darwin13.4.0:8080/sockjs-node ./src/main.js
    <s> [webpack.Progress] 10% building 2/2 modules 0 active 
    events.js:282
          throw er; // Unhandled 'error' event
          ^

    Error: getaddrinfo ENOTFOUND x86_64-apple-darwin13.4.0
        at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:64:26)
    Emitted 'error' event on Server instance at:
        at GetAddrInfoReqWrap.doListen [as callback] (net.js:1492:12)
        at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:64:17) {
      errno: -3008,
      code: 'ENOTFOUND',
      syscall: 'getaddrinfo',
      hostname: 'x86_64-apple-darwin13.4.0'
    }
     

     不知道是Vue里什么逻辑,为什么会check hostname = x86_64-apple-darwin13.4.0, 可能是少安装了什么东西吧,知道的大佬给下解决。

    搜索了网络,有2种方案

    (1)在终端下,执行sudo unset HOST

                 (2) 或者编辑,/etc/hosts 文件,推荐这个

    127.0.0.1 x86_64-apple-darwin13.4.0 

     

    或者

    uset HOST

     

    就解决了!

     

     
    展开全文
  • vue 前端UI模板 vue-light-bootstrap-dashboard-master ,使用方法:安装依赖包(cnpm install)、运行预览(yarn run serve)
  • 我通过组件实现了一个基本的dashboard模板 [img=https://img-bbs.csdn.net/upload/201912/31/1577768848_611439.png][/img] 给 App.vue 里写了 <router-view></router-view> 这一个出口 当点击 &...
  • DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 Web Dashboard是一个客户端控件,它使用HTTP...
  • vue + flask 实现的 linux web dashboard

    千次阅读 2017-05-15 21:48:14
    最近抽空写了一个linux 的 dashboard, 借此熟悉了vue框架和前端构建技术webpack等技术, 偶尔一次看到羊驼的英文名叫alpaca, 就拿来做这个项目的名字了。 alpaca是一个基于vue2.0 python2.7 flask的简单linux ...
  • vue 管理系统模板 碎片仪表板Vue (Shards Dashboard Vue) A free Vue admin dashboard template pack featuring a modern design system and lots of custom templates and components. 一个免费的Vue管理员仪表板...
  • 使用Vite,Vue 3,Tailwind CSS和TypeScript构建的仪表板入门模板。 从复制并转换为Vue。 演示版 请注意,如果您有权访问 ,则可以按照以下步骤添加它: 安装@tailwindcss/ui : yarn add @tailwindcss/ui 将...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 778
精华内容 311
关键字:

dashboardvue

vue 订阅