精华内容
下载资源
问答
  • dashboard:基于 Vue 2.0 优雅的管理后台
  • 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

    展开全文
  • DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 Web Dashboard是一个客户端控件,它使用HTTP...

    下载DevExpress v20.2完整版 

    DevExpress技术交流群3:700924826      欢迎一起进群讨论

    DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

    Web Dashboard是一个客户端控件,它使用HTTP请求与服务器部分进行通信:

    • 客户端部分是一个JavaScript应用程序,为最终用户提供UI来设计和与仪表板进行交互,DashboardControl是基础控件。
    • 服务器部分是一个ASP.NET Core或ASP.NET MVC应用程序,它处理客户端数据请求,并包括各种后端功能,例如数据访问、仪表板存储等。

    本教程将创建和配置包含Web Dashboard和服务器ASP.NET Core应用程序的客户端Vue应用程序。

    先决条件

    要求条件

    • 客户端上的脚本版本应与服务器上的库版本匹配。
    • DevExpress npm软件包的版本应该相同。

    Step 1. 在Vue项目中配置Client Dashboard控件

    1. 在命令提示符下,使用默认预设创建Vue应用程序:

    cmd

    vue create dashboard-vue-app

    创建项目后,导航到创建的文件夹:

    cmd

    cd dashboard-vue-app

    2. 安装以下npm软件包:

    cmd

    npm install devexpress-dashboard@20.2-next devexpress-dashboard-vue@20.2-next @devexpress/analytics-core@20.2-next devextreme@20.2-next --save devextreme-vue@20.2-next --save

    安装完成后,您可以在node_modules文件夹中找到所有库。

    3. 如下所示修改App.vue文件,以在页面上显示dashboard组件。

    typescript

    <template>
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; ">
    <DxDashboardControl 
    style="height:100%"
    endpoint="https://demos.devexpress.com/services/dashboard/api"
    
    />
    </div>
    </template>
    
    <script>
    import { DxDashboardControl } from 'devexpress-dashboard-vue';
    
    export default {
    components: {
    DxDashboardControl,
    }
    }
    </script>
    

    4. 打开main.js文件并添加以下全局样式:

    js

    import Vue from 'vue'
    import App from './App.vue'
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
    import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
    import "@devexpress/analytics-core/dist/css/dx-querybuilder.css";
    import "devexpress-dashboard/dist/css/dx-dashboard.light.css";
    
    Vue.config.productionTip = false
    
    new Vue({
    render: h => h(App),
    }).$mount('#app')
    

    5. 使用下面的命令启动应用程序。

    cmd

    npm start

    在浏览器中打开http://localhost:8080/来查看结果,Web Dashboard显示存储在预配置服务器(https://demos.devexpress.com/services/dashboard/api)上的仪表板。

    Step 2. 创建一个服务器应用程序

    创建一个自定义服务器应用程序来显示您的数据,请按照以下步骤操作:

    1. 在Visual Studio中,创建一个ASP.NET Core 3.1应用程序,选择Empty模板。

    2. 创建将存储仪表板的App_Data / Dashboards文件夹。

    3. 用以下代码替换Startup.cs文件的内容:

    C#

    using DevExpress.AspNetCore;
    using DevExpress.DashboardAspNetCore;
    using DevExpress.DashboardCommon;
    using DevExpress.DashboardWeb;
    using DevExpress.DataAccess.Json;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.FileProviders;
    using System;
    
    namespace AspNetCoreDashboardBackend {
    public class Startup {
    public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
    Configuration = configuration;
    FileProvider = hostingEnvironment.ContentRootFileProvider;
    }
    
    public IConfiguration Configuration { get; }
    public IFileProvider FileProvider { get; }
    
    public void ConfigureServices(IServiceCollection services) {
    services
    // Configures CORS policies. 
    .AddCors(options => {
    options.AddPolicy("CorsPolicy", builder => {
    builder.AllowAnyOrigin();
    builder.AllowAnyMethod();
    builder.WithHeaders("Content-Type");
    });
    })
    // Adds the DevExpress middleware.
    .AddDevExpressControls()
    // Adds controllers.
    .AddControllers()
    // Configures the dashboard backend.
    .AddDefaultDashboardController(configurator => {
    configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
    configurator.SetDataSourceStorage(CreateDataSourceStorage());
    configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
    });
    }
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    // Registers the DevExpress middleware. 
    app.UseDevExpressControls();
    // Registers routing.
    app.UseRouting();
    // Registers CORS policies.
    app.UseCors("CorsPolicy");
    app.UseEndpoints(endpoints => {
    // Maps the dashboard route.
    EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
    // Requires CORS policies.
    endpoints.MapControllers().RequireCors("CorsPolicy");
    });
    }
    public DataSourceInMemoryStorage CreateDataSourceStorage() {
    DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage(); 
    DashboardJsonDataSource jsonDataSource = new DashboardJsonDataSource("Customers");
    jsonDataSource.RootElement = "Customers";
    dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSource.SaveToXml());
    return dataSourceStorage;
    }
    private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
    if (e.DataSourceName.Contains("Customers")) {
    Uri fileUri = new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json");
    JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
    jsonParams.JsonSource = new UriJsonSource(fileUri);
    e.ConnectionParameters = jsonParams; 
    }
    }
    }
    }
    

    4. 运行以下命令以启动服务器:

    cmd

    dotnet run

    5. 要在客户端应用程序中使用此服务器,请转到App.vue文件。 将以下URL设置为端点:http://localhost:5000/api/dashboard

    javascript

    <template>
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; ">
    <DxDashboardControl 
    style="height:100%"
    endpoint="http://localhost:5000/api/dashboard"
    
    />
    </div>
    </template>
    
    <script>
    import { DxDashboardControl } from 'devexpress-dashboard-vue';
    
    export default {
    components: {
    DxDashboardControl,
    }
    }
    </script>
    

    Step 3. 切换到Viewer Mode

    创建并保存仪表板后,可以将Dashboard Designer切换到Viewer模式。

    1. 打开App.vue文件,并将workingMode属性设置为ViewerOnly:

    js

    <template>
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; ">
    <DxDashboardControl 
    style="height:100%"
    endpoint="http://localhost:5000/api/dashboard"
    workingMode="ViewerOnly"
    />
    </div>
    </template>
    

    上DevExpress中文网,获取第一手最新产品资讯!

    展开全文
  • 仪表盘 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 使用Vite,Vue 3,Tailwind CSS和TypeScript构建的仪表板入门模板。 从复制并转换为Vue。 演示版 请注意,如果您有权访问 ,则可以按照以下步骤添加它: 安装@tailwindcss/ui : yarn add @tailwindcss/ui 将...
  • 经过前面的三节内容的准备...dashboard.vue <template> <div class="app-wrapper"> <div class="sidebar-container"> 这是左边的导航 </div> <div class="main-container"> <

    经过前面的三节内容的准备工作,终于到了我们要实现页面的一节了。接下来我们要实现的是类似于下面的这种中后台的布局。让我们一步步来实现吧!
    在这里插入图片描述
    dashboard.vue

    <template>
      <div class="app-wrapper">
        <div class="sidebar-container">
          这是左边的导航
        </div>
        <div class="main-container">
          <div class="nav-header">
            这是导航部分
          </div>
          <div>
            这是主体部分
          </div>
        </div>
      </div>
    </template>
    
    .app-wrapper {
      @include clearfix;
      position: relative;
      height: 100%;
      width: 100%;
      display: flex;
      .sidebar-container {
        height: 100%;
        border: 1px solid #ddd;
        flex: 0 0 300px;
      }
      .main-container {
        height: 100%;
        border: 1px solid #ddd;
        flex: 1;
        .nav-header {
          height: 80px;
          border-bottom: 1px solid #ddd;
        }
      }
    }
    

    整体的架子就搭建出来了
    在这里插入图片描述
    接下来我们进一步的完善

    如果在过程中遇到这种报错,不要急,我们来处理下
    在这里插入图片描述
    eslintrc

    rules: {
      ...
        'no-unused-vars': 'off'
      }
    

    就解决了
    在这里插入图片描述
    注意文件的层级关系,看上面的截图
    logo.vue

    <template>
      <div class="sidebar-logo-container">
        这是logo部分
      </div>
    </template>
    

    sidebar/index.vue

    <template>
      <div>
        <logo />
        <el-scrollbar wrap-class="scrollbar-wrapper">siderbar</el-scrollbar>
      </div>
    </template>
    
    <script>
    import Logo from './Logo'
    export default {
      components: {
        Logo
      }
    }
    </script>
    
    <style lang="scss" scoped></style>
    

    src/layout/components/index.js

    // 不懂的可以参考这里https://es6.ruanyifeng.com/#docs/module#export-%E4%B8%8E-import-%E7%9A%84%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95
    export { default as Sidebar } from './Sidebar/index.vue'
    
    

    左侧的导航就出来了,样子虽然有点丑,我们继续进行美化
    在这里插入图片描述
    完善我们的Logo.vue

    <template>
      <div class="sidebar-logo-container" :class="{ collapse: collapse }">
        <transition name="sidebarLogoFade">
          <router-link
            v-if="collapse"
            key="collapse"
            class="sidebar-logo-link"
            to="/"
          >
            <img v-if="logo" :src="logo" class="sidebar-logo" />
            <h1 v-else class="sidebar-title">{{ title }}</h1>
          </router-link>
          <router-link v-else key="expand" class="sidebar-logo-link" to="/">
            <img v-if="logo" :src="logo" class="sidebar-logo" />
            <h1 class="sidebar-title">{{ title }}</h1>
          </router-link>
        </transition>
      </div>
    </template>
    
    <script>
    import Logo from '@/assets/images/logo.png'
    export default {
      name: 'SidebarLogo',
      props: {
        collapse: {
          type: Boolean,
          require: true
        }
      },
      data() {
        return {
          title: 'GLADMIN后台管理系统',
          logo: Logo
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .sidebarLogoFade-enter-active {
      transition: opacity 1.5s;
    }
    
    .sidebarLogoFade-enter,
    .sidebarLogoFade-leave-to {
      opacity: 0;
    }
    .sidebar-logo-container {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      overflow: hidden;
      .sidebar-logo-link {
        height: 100%;
        width: 100%;
        .sidebar-logo {
          width: 32px;
          height: 32px;
          vertical-align: middle;
          margin-right: 6px;
        }
        .sidebar-title {
          display: inline-block;
          color: #000;
          font-weight: 600;
          line-height: 50px;
          font-size: 14px;
          font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
          vertical-align: middle;
        }
      }
      &.collapse {
        .sidebar-logo {
          margin-right: 0px;
        }
      }
    }
    </style>
    

    Siderbar.vue

     <logo :collapse="false" />
    

    测试效果
    在这里插入图片描述

    Siderbar.vue

     <logo :collapse="true" />
    

    测试效果
    在这里插入图片描述
    根据组件上的这个collapse收起和展开的属性动态显示隐藏网站名字,并且还加入了动画过渡,暂时看不到效果,等我们加入切换按钮就能感知到了。

    接下来暂时不想做sidebar的菜单,趁着现在collapse的出现,我们来实现这个折叠的功能!实现绿色的按钮点击显示隐藏左边的sidebar
    在这里插入图片描述
    新建src/layout/components/Sidebar/Navbar.vue文件

    <template>
      <div class="navbar">
        <hamburger
          id="hamburger-container"
          :is-active="sidebar.opened"
          class="hamburger-container"
          @toggleClick="toggleSideBar"
        />
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        toggleSideBar() {}
      }
    }
    </script>
    
    <style lang="scss" scoped></style>
    

    我们暂时不关注后面的面包屑,只实现toggleSideBar功能

    src/layout/components/Sidebar/Logo.vue

    <template>
      <div class="sidebar-logo-container" :class="{ collapse: collapse }">
        <transition name="sidebarLogoFade">
          <router-link
            v-if="collapse"
            key="collapse"
            class="sidebar-logo-link"
            to="/"
          >
            <img v-if="logo" :src="logo" class="sidebar-logo" />
            <h1 v-else class="sidebar-title">{{ title }}</h1>
          </router-link>
          <router-link v-else key="expand" class="sidebar-logo-link" to="/">
            <img v-if="logo" :src="logo" class="sidebar-logo" />
            <h1 class="sidebar-title">{{ title }}</h1>
          </router-link>
        </transition>
      </div>
    </template>
    
    <script>
    import Logo from '@/assets/images/logo.png'
    export default {
      name: 'SidebarLogo',
      props: {
        collapse: {
          type: Boolean,
          require: true
        }
      },
      data() {
        return {
          title: 'GLADMIN后台管理系统',
          logo: Logo
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .sidebarLogoFade-enter-active {
      transition: opacity 1.5s;
    }
    
    .sidebarLogoFade-enter,
    .sidebarLogoFade-leave-to {
      opacity: 0;
    }
    .sidebar-logo-container {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      overflow: hidden;
      .sidebar-logo-link {
        height: 100%;
        width: 100%;
        .sidebar-logo {
          width: 32px;
          height: 32px;
          vertical-align: middle;
          margin-right: 6px;
        }
        .sidebar-title {
          display: inline-block;
          color: #000;
          font-weight: 600;
          line-height: 50px;
          font-size: 14px;
          font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
          vertical-align: middle;
        }
      }
      &.collapse {
        .sidebar-logo {
          margin-right: 0px;
        }
      }
    }
    </style>
    

    src/layout/components/Sidebar/index.vue

    <template>
      <div>
        <logo :collapse="isCollapse" />
        <el-scrollbar wrap-class="scrollbar-wrapper">siderbar</el-scrollbar>
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    import Logo from './Logo'
    export default {
      components: {
        Logo
      },
      computed: {
        ...mapGetters(['sidebar']),
        isCollapse() {
          return !this.sidebar.opened
        }
      }
    }
    </script>
    
    <style lang="scss" scoped></style>
    

    src/layout/components/Navbar/index.vue

    <template>
      <div class="navbar">
        <Hamburger
          id="hamburger-container"
          :is-active="sidebar.opened"
          class="hamburger-container"
          @toggleClick="toggleSideBar"
        />
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    import Hamburger from '@comps/Hamburger'
    export default {
      computed: {
        ...mapGetters(['sidebar'])
      },
      components: {
        Hamburger
      },
      methods: {
        toggleSideBar() {
          this.$store.dispatch('app/toggleSideBar')
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .navbar {
      height: 50px;
      overflow: hidden;
      position: relative;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    }
    </style>
    

    src/store/modules/app.js

    yarn add js-cookie -S
    
    import Cookies from 'js-cookie'
    const app = {
      namespaced: true, // 开启命名空间
      state: {
        sidebar: {
          opened: Cookies.get('sidebarStatus')
            ? !!+Cookies.get('sidebarStatus')
            : true,
          withoutAnimation: false
        }
      },
      mutations: {
        TOGGLE_SIDEBAR: state => {
          state.sidebar.opened = !state.sidebar.opened
          state.sidebar.withoutAnimation = false
          if (state.sidebar.opened) {
            Cookies.set('sidebarStatus', 1)
          } else {
            Cookies.set('sidebarStatus', 0)
          }
        },
        CLOSE_SIDEBAR: (state, withoutAnimation) => {
          Cookies.set('sidebarStatus', 0)
          state.sidebar.opened = false
          state.sidebar.withoutAnimation = withoutAnimation
        }
      },
    
      actions: {
        toggleSideBar({ commit }) {
          commit('TOGGLE_SIDEBAR')
        },
        closeSideBar({ commit }, { withoutAnimation }) {
          commit('CLOSE_SIDEBAR', withoutAnimation)
        }
      }
    }
    
    export default app
    

    经过以上一些列 操作后我们实现了
    请添加图片描述
    至此我们的切换功能就实现了,剩下的就是左侧的elementuil里面的nav导航进行收缩和隐藏了!实现起来就容易了

    展开全文
  • 浅谈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

    加入我的技术群,一起学习

    707196135
    在这里插入图片描述

    展开全文
  • Vue White仪表板是一个漂亮的Bootstrap 4 Admin仪表板,其大量组件内置在一起,看起来非常漂亮。 如果您正在寻找一种工具来管理和可视化有关您的业务的数据,则此仪表板很适合您。 它融合了容易上手的颜色,宽大的...
  • vue前端UI模板,vue-argon-dashboard-master,使用方法:安装依赖包(cnpm install)、运行预览(yarn run serve)
  • 'Dashboard', // 根据参数选择取出对应的组件页面 components: { adminDashboard, editorDashboard }, data() { return { // 预置参数 currentRole: 'adminDashboard' } }, computed: { ...mapGetters([ 'roles' ])...
  • 基于Vue.js的仪表板支架。 产品特点 JSDoc增强类型注释 通过路由拦截进行访问控制 Vuex(模块,插件) API服务 I18n支持 元素UI自定义主题 Travis CI和GitHub操作 等等 预习 在线演示 用户名:zce 密码:wanglei...
  • Vue Now UI Dashboard Pro是的Vue.js移植版本。 使用仪表板非常简单,但是需要Javascript, 和基础知识。 Vue Paper Dashboard由编码,设计由。 该产品代表了一大套前端开发人员工具,可以帮助您快速启动项目。 ...
  • 本篇文章主要介绍了详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • vue-dashboard-源码

    2021-04-08 23:36:33
    登录信息 Acc: Pass:PaZZword! 管理包 设计: : 项目设置 npm install 编译和热重装以进行开发 npm run dev 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • vue-paper-dashboard-nuxt Nuxt.js项目 构建设置 # install dependencies $ npm install # Or yarn install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $...
  • 演示中禁用了登录身份验证系统以及除向用户表获取请求外的所有其他API 演示在侧边栏上有一个额外的登录按钮,因此您可以看到它的外观 Vuetify Admin Dashboard是一个和构建的漂亮资源。... 内置的Vue-C
  • 基于轻型引导仪表板UI模板+ vue-router的管理仪表板 该项目是为vue js设计的的vue版本。 仪表板包括Bootstrap 4,vue-router,chartist,google-maps和其他几个插件/组件。 在查看。 :rocket: 入门 Vue Light ...
  • Vue-Cli 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint
  • 仪表板(Vue.js 2) 该物化仪表板是使用vue 2 ui框架构建的。 特征 实时图表(启用Websocket) 使用商店进行CRUD操作 JWT授权 上传文件 Vue.js生命周期 基于角色的访问 更改路线时更改标头 去做 国际化支持 屏幕...
  • Vue Material Dashboard是一个基于和构建的漂亮资源。 它将帮助您立即开始开发仪表板。 Vue Material Dashboard是原始Material Dashboard的官方Vuejs版本。 使用仪表板非常简单,但是需要具备Javascript, 和基础...
  • 仪表板 IPay项目 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
  • Vue 3 Tailwind2入门套件 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。 屏幕截图
  • 优先级 ... 状态 ...this.chartEvent.on('click',function (param) { that.$router.push({ path: '/cases/case', query: { createdTime: param.name,type:createdTime } ...注:由于该页面下拉框也有相应的优先级筛选...
  • vue-vuetify-todo 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 火力基地的结构 集合-'项目' 集合-“团队”
  • 安装 首先,请确保已安装所有先决条件: (> = 8.9) 3+版本(或 1.16+版本)和 。 检查前提条件后,请按照以下简单步骤安装和使用Vuestic Admin: # clone the repo ...# go into app's directory and install ...
  • Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo 转载连接https://segmentfault.com/a/1190000012015667#item-1 另附带设置路由懒加载代码时出现Module build failed: SyntaxError: ...
  • 食品仪表盘 构建设置 # 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 ...
  • 其实自己还是比较热衷于基于CLI的dashboard,也有心去做一些尝试,比如 用 Nodejs CLI 的方式实现一个TODO应用 - 简书 ,后续也会继续增加新想法到这个里面。但是我今天意识到一个问题,基于CLI的DashBoard的使用...
  • PRO版本可通过以下 安装在所需的文件夹位置下载并解压缩主题包档案。 从nodejs.org/en/download/下载并安装Node.js。 安装最新版本的npm。 当运行所有构建命令时,这将很有用。 在IDE的“终端”窗口或Windows命令...
  • Sing App Vue Dashboard .html .js 素材下载

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,177
精华内容 2,070
关键字:

dashboardvue

vue 订阅