最近由于组里边有个童鞋在用Vue做东西，所以又把放了好久的Vue捡起来了（-_-=，说好的平滑过渡到Angular2呢...），说实话现在这些前端框架真心非常好，当初放弃Vue是由于被Ag的Typescript+vs code的干练开发方式吸引（相信我，后端出身的童鞋尤其是java转过来的一定要去学Angular2而不是Vue2）。而Vue本身确实是“小而美”，但就是在写代码的时候没有类型检查，所以往往写完后出错一头雾水...扯这么多，萝卜青菜各有所爱吧。今天我们就用大名鼎鼎的Material Design+ vue做个todo玩玩，里面还是有些坑要填的。废话不说，直接开撸。

既然要用到vuematerial，建议还是去英文官网看，中文翻译的有滞后，建议别看了
vue material英文
vue material中文

1. 起工程

//不要选Eslint和Mocha等等测试框架，也就是后来的那些问题都no，不是正式工程的话，这些只会添乱
//什么？一个todo还需要vue-router？
vue init webpack vue-material-todo
cd vue-material-todo 
npm i
npm i vue-material -S

2. main.js

import Vue from 'vue'
import App from './App' 
Vue.config.productionTip = false
//VueMaterial部分 开始-------------------------------
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial) 
Vue.material.registerTheme('default', {
  primary: 'blue',
  accent: 'red',
  warn: 'red',
  background: 'grey'
})
Vue.material.registerTheme('night',{
    primary: {
        color: 'blue-grey',
        hue: 900
    },
    accent:{
        color: 'grey',
        hue: 700
    },
    background:{
     color: 'blue-grey',
     hue: 800
    }
})
Vue.material.setCurrentTheme('night')
//VueMaterial部分 结束-------------------------------


/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

3. 跳坑和出坑

注意代码里的Vue.material.registerTheme这一句，是英文文档里的写法，这是正确写法，而中文文档里是像这样写的：

Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
})

** 按照中文文档的写法，一启动就会报错 **，所以这里出错了以后，我就跑去看英文的了。。。
这里解释一下registerTheme方法，这个方法用来定义主题，主题说白了就是一系列颜色的规定，如果你接触过Md，马上就能秒懂。没接触过也没关系，只需要知道传的那些参数是什么意思，这些就是它规定的一系列颜色。
如果没有定义主题，就会使用default主题：

primary - indigo
accent - pink
warn - deep-orange
background - grey

这是一个主要色为蓝色，强调紫色，警告深橙色，背景灰色的丑不拉叽的配色组合。
所以我们一定是要改的，我们的todo一定要awesome。
在Vue Material还能使用的颜色有：

red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
white
black

那么问题来了，我怎么直观的知道这些颜色是什么颜色？
去这个网址看看
不知需要不需要翻墙，需要也没关系，我把这个图截下来了：

google-color-palette.PNG
是不是觉得世界一下子明亮了许多？
我们也注意到每个色块下面有一些数字，那是颜色饱和度，也就是说自打你决定开始使用Md，就必须使用这个表里面的这些颜色，不能再用‘#333333’这样的东西了。那这个饱和度怎么设定，看上面代码的Vue.material.registerTheme('night',{........设置项就知道了。
其实这里还有个小问题，我本来是想用这个做夜间模式的，结果发现night项的background不管用...再研究吧。
官网还有提到，在index.html里引入两个样式：

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

第一项是Robot字体，这个建议不要引了，因为它不是一个字体，是一堆，别想了，根本引不到~~~~，我们伟大的wall，现在越来越难翻了。实在想用的话可以参考下这个帖子。我就不用了。
第二项是图标icon,这个可是要用的，那么打开浏览器中打开//fonts.googleapis.com/icon?family=Material+Icons , 发现里面有一行url(http://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); }

好人做到底，我辛苦下下来放到这里了，自己去取吧，没密码。

下载后放到asset文件夹里面，再把//fonts.googleapis.com/icon?family=Material+Icons也右键保存到assets里面它的名字是icon.css。现在类似这样：

Paste_Image.png

接下来在打开icon.css，把里面的地址换一下：

 src: local('Material Icons'), local('MaterialIcons-Regular'), url(materialicon.woff2) format('woff2');

然后，在main.js里引入css.icon就行了（一头汗，再次感谢伟大的墙你太弓虽了）

import './assets/icon.css'

最后，不开玩笑了，把main.js的颜色配一下吧，这里是我的：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' 
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
import './assets/icon.css'

Vue.use(VueMaterial) 

Vue.config.productionTip = false

Vue.material.registerTheme('app',{
    primary: 'teal',
        accent:'cyan',
        warn: 'red'
})

Vue.material.setCurrentTheme('app')
/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

争取明天更新第二篇