vue 后台经典模版尝试（1）

马克付

发布于 2022-12-12 16:46:02

3550

发布于 2022-12-12 16:46:02

文章被收录于专栏：技术进阶系列技术进阶系列

Vol.1

目的

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

Vol.2

尝试模版 vue-material

https://github.com/vuematerial/vue-material

Vol.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)

比如这样（当然也可按需加载）

import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

放 css 到 index.html 中

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

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

https://www.creative-tim.com/vuematerial/getting-started

找到之后将代码拿过去 新建 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>

页面效果展示