vue 后台经典模版尝试（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)

• 比如 这样 （当然也可按需加载，当前全部引入 体积比较大）

• 放 css 到 index.html 中

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">

• 然后 去看看文档 比如 我们要使用 progress 进度组件

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

• 代码

<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>

• 页面效果 展示

• 非常nice ！

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

• 这种 按钮等等

4、更多精彩 请自行尝试