使用 Material Design UI 开发

Material Design UI 是指基于 Google 的 Material Design 全新设计语言的一些 CSS 框架。它们功能强大，界面简洁、美观，交互上也更加立体友好，同时也提供了很多常用的UI组件，除了最基本的菜单、按钮、滑动杆、进度条、单选框/复选框外，还提供了一些很有趣的图标、layouts、主题等。使用这些框架，我们能够快速搭建出交互友好的网站效果。既然有了，为啥不用呢？其中基于 Vuejs 2.0 和 Material Design 的 UI 库也很多（查看更多），如 muse-ui、vue-material、vuetify 等，导出项目中选用了 vuetify 组件库。

Vuetify

  1. 介绍

结合 Material Design 和 Vue 可以建立精美的应用，提升用户的交互体验。官网也给出了该框架的一些优势：

  • 考虑到了 SSR (Server-Side Rendering) 服务端渲染的情况，这也是我们选择它的原因之一

  • Layouts 结合 Material Design，提供了独一无二的交互体验，满足您的开发需求

  • 提供了必须可用的组件，且使用方便

  1. 通过 npm 或 yarn 安装 Vuetify :
  1. $ npm install --save vuetify
  3. $ yarn add vuetify
  1. 使用

首先在你的应用（项目中对应 src/app.js ）中通过 Vue.use(Vuetify) 导入:

  1. // 引入全部组件
  2. import Vue from 'vue';
  3. import Vuetify from 'vuetify';
  5. Vue.use(Vuetify);

然后就可以直接在html(或者vue)文件中使用，如下定义了一个按钮:

  1. <div>
  2.     <v-btn dark flat>Normal</v-btn>
  3. </div>

可以在官网查看更多组件的使用和效果

  1. 项目中主题修改

项目中修改主题的配置在 config/theme.js 中 详细可点击查看，此处不多赘述

如果不使用 Material Design UI

Material Design UI 库的运用可以让我们快速的实现一些美观的展现效果，但是如果官网提供的效果仍然没有符合您的预期，您也可以自己开发自己的组件，应用到自己的项目中。

组件开发：这里以一个简单的 mask 蒙层组件为例

  1. 组件的开发：
  1. <!-- 模板部分： 点击蒙层调用关闭方法 -->
  2. <template>
  3.     <transition name="fade">
  4.         <div v-show="show" @click.stop="closeAppMask">
  5.         </div>
  6.     </transition>
  7. </template>
  9. <!-- js部分：包括需要父组件传递来的一些参数props,和本身方法methods -->
  10. <script>
  11. export default {
  12.     props: ['show'],
  13.     methods: {
  14.         closeAppMask() {
  15.             this.$emit('close-mask');
  16.         }
  17.     }
  18. };
  19. </script>
  21. <!-- 样式效果 -->
  22. <style lang="stylus" scoped>...</style>
  1. 父组件如何调用：
  1. <template>
  2.     <div class="app-sidebar-wrapper">
  3.         <!-- 使用app-mask组件，注意使用时驼转化成中划线 -->
  4.         <app-mask :show="show"
  5.             @close-mask="closeAppSidebar"
  6.         ></app-mask>
  8.     </div>
  9. </template>
  11. <!-- 通过 import 引入组件，放到components中，在模板中就可以调用啦 -->
  12. <script>
  13. import AppMask from './AppMask.vue';
  15. export default {
  16.     components: {
  17.         AppMask
  18.     },
  19.     props: {
  20.         show: {
  21.             'type': Boolean,
  22.             'default': true
  23.         }
  24.     },
  25.     methods: {
  26.         closeAppSidebar() {
  27.             this.$emit('close-sidebar');
  28.         }
  29.     }
  30. };
  31. </script>
  33. <!-- 样式 -->
  34. <style lang="stylus" scoped>...</style>