使用Vue2.x+Vue Material做一个Awesome TODO-第一篇(起步、注意事项)

最近由于组里边有个童鞋在用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 }
})

涉及到google font 或者icon的可以把url替换成 https://fonts.lug.ustc.edu.cn,比如 https://fonts.lug.ustc.edu.cn/icon?family=Material+Icons

FLYLEE