vue 后台经典模版尝试(1)

937 阅读1分钟

1、目的

  • 前面发模版 相关内容时,有小伙伴 留言 后台模版,尝试一个,给大伙看看好不好用

2、尝试模版 vue-material

3、使用方法

1、新建一个vue 项目, vue 项目 如何新建 vue create xxxxx(前提是 安装 vue)
2、npm install vue-material --save(前提是 安装 npm/cnpm)
3、引入
  • 引入 将下面这段 放到 main.js 中(入口文件)
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)
  • 比如 这样 (当然也可按需加载,当前全部引入 体积比较大)

image.png

  • 放 css 到 index.html 中
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
  • 然后 去看看文档 比如 我们要使用 progress 进度组件

image.png

  • 找到之后 将代码 拿过去 新建 Progress.vue

image.png

  • 代码
<template>
  <div>
    <md-progress-bar md-mode="determinate" :md-value="amount"></md-progress-bar>
    <md-progress-bar class="md-accent" md-mode="determinate" :md-value="amount"></md-progress-bar>
    <input type="range" v-model.number="amount"> {{ amount }}%
  </div>
</template>

<script>
  export default {
    name: 'ProgressBarDeterminate',
    data: () => ({
      amount: 0
    })
  }
</script>

<style lang="scss" scoped>
  .md-progress-bar {
    margin: 24px;
  }
</style>
  • 页面效果 展示

image.png

  • 非常nice !

其他有很多 模版可以使用 比如 这种 list

image.png

  • 这种 按钮等等

image.png

4、更多精彩 请自行尝试