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
网络异常，图片无法展示
|
- 这种 按钮等等
网络异常，图片无法展示
|
