作者归档：Rick

vue插件开发

插件MyPlugin.js

module.exports = (function() {
  var install = function install(Vue) {
       if (install.installed) return;

         // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
          // 逻辑...
        }
        // 2. 添加全局资源
        Vue.directive('my-directive', {
          bind (el, binding, vnode, oldVnode) {
            // 逻辑...
            el.innerHTML = 'DDDD'

          }
        })
        // 3. 注入组件
        Vue.mixin({
          created: function () {
            // 逻辑...
          }
        })
        // 4. 添加事例方法
        Vue.prototype.$myMethod = function (options) {
          // 逻辑...
        }
  }

  return install;

})()

调用main.js

import Vue from 'vue'
import App from './App.vue'
import MyPlugin from './MyPlugin'

Vue.use(MyPlugin)

var vm = new Vue({
  el: '#app',
  render: h => h(App)
})

Vue组件App.vue

<template>
  <div id="app">
     <div v-my-directive></div>
  </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {

    },
    mounted: function() {

    }
}
</script>

参考网站
https://cn.vuejs.org/v2/guide/plugins.html

vue组件开发

创建组件rate.vue

<template lang="html">
   <li>{{message}}</li>
</template>

<script>

export default {
  name: 'vb-rate',
  props:['message'],
  methods: {
  }
}
</script>

使用组件

有两种方式，全局注册和局部注册

全局注册：

main.js

import Vue from 'vue'
import App from './App.vue'

import Rate from './components/rate/rate.vue'

Vue.component(Rate.name, Rate); //全局注册组件



new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue.js

<template>
  <div id="app">
    <!--使用全局注册,直接使用-->
    <ol>
      <vb-rate v-for="item in groceryList" :message="item.text"></vb-rate>
      <vb-rate message="Rick"></vb-rate>
    </ol>

  </div>
</template>

<script>

import Rate from './components/rate/rate.vue' //

export default {
  data () {
    return {
      groceryList: [
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
          ]
    }
  }
}
</script>

局部注册

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

<template>
  <div id="app">
    <!--使用局部注册-->
    <ol>
      <vb-rate v-for="item in groceryList" :message="item.text"></vb-rate>
      <vb-rate message="Rick"></vb-rate>
    </ol>

  </div>
</template>

<script>

import Rate from './components/rate/rate.vue' //

export default {
  data () {
    return {
      groceryList: [
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
          ]
    }
  },
  components: {
    [Rate.name] : Rate// 局部注册组件
  }
}
</script>

这个地方有个注意点：

<vb-rate :message="item.text"></vb-rate>
<vb-rate message="Rick"></vb-rate>
message有`:`表示vue变量，没有`:`表示字符串

MyBatis Generator使用

MyBatis Generator有很多方式：命令行、ant、java、maven、eclipse。
我采用的是命令行的方式。
文件列表：
http://xhope.top/wp-content/uploads/2016/12/1.png
generatorConfig.properties

# 包路径配置 
model.package=com.koldoh.etmode.modules.test.entity
xml.mapper.package=mappings.modules.test
dao.package=com.koldoh.etmode.modules.test.dao

table.name=t_test
domainObjectName=MyTest

generatorConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
  PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
  "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <properties url="file:///D:/yodean/workspace/etmode/mybatis-generator/generatorConfig.properties" />
    <classPathEntry
            location="D:/yodean/workspace/etmode/mybatis-generator/mysql-connector-java-5.1.30.jar"/>
    <context id="my" targetRuntime="MyBatis3">
        <commentGenerator>
            <property name="suppressDate" value="false"/>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>

        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/etmode?useUnicode=true" userId="root"
                        password="xxxxxx"/>


        <javaModelGenerator targetPackage="${model.package}"
                            targetProject="D:/yodean/workspace/etmode/src/main/java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>

        <sqlMapGenerator targetPackage="${xml.mapper.package}"
                         targetProject="D:/yodean/workspace/etmode/src/main/resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>

        <javaClientGenerator targetPackage="${dao.package}"
                             targetProject="D:/yodean/workspace/etmode/src/main/java" type="XMLMAPPER">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>

        <table tableName="${table.name}" domainObjectName="${domainObjectName}"
               enableCountByExample="false" enableUpdateByExample="false"
               enableDeleteByExample="false" enableSelectByExample="false"
               selectByExampleQueryId="false">
        </table>

    </context>
</generatorConfiguration>

generator.bat

java -jar mybatis-generator-core-1.3.5.jar -configfile generatorConfig.xml -overwrite
pause

最后别忘了建表t_test.sql

DROP TABLE IF EXISTS `t_test`;
CREATE TABLE `t_test` (
  `id` int(255) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) DEFAULT NULL,
  `user_name` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

参考资料：
http://www.mybatis.org/generator/
http://www.cnblogs.com/pixy/p/5038275.html
http://www.voidcn.com/blog/tianwei7518/article/p-6329286.html
http://bbs.520it.com/forum.php?mod=viewthread&tid=266

Compass模块使用

学习Sass，就是学习语法，学习Compass就是在用库的。使用compass，就是在使用compass给我们提供的库：variables，mixins，functions。
犹如JavaScript之于jQuery

Compass介绍

compass有以下模块：

  • Browser Support

    设置对浏览器的支持情况，$supported-browsers列出所有你想支持的浏览器，$browser-minimum-versions，支持浏览器的最低版本。

  • CSS3

封装了CSS3的mixin。主要子模块有：Appearance、Background Clip、Background Origin、Background Size、Border Radius、Box、Box Shadow、Box Sizing、CSS 、Regions、CSS3 Pie、Columns、Filter、Flexbox、Font Face、Hyphenation、Images
、Inline Block、Opacity、Selection、Shared Utilities、Text Shadow、Transform
、Transition、User Interface

  • Helpers
    函数库

  • Layout
    布局相关的

  • Reset
    样式重置

@import "compass/reset";

这样所有的样式都被重置了,等价引用

@import "compass/reset/utilities";
global-reset();

作为一个有极客精神的人，如果不想重置所有样式，按需重置，怎么处理？
通过mixin函数就可以做到。

@import "compass/reset/utilities";
nested-reset();
reset-box-model();
reset-table();
reset-html5();
...
  • Typography
    文本布局相关，Links链接样式；Lists列表样式；Text 文字显示；
    Vertical Rhythm 设置行高；
  • Utilities
    其他mixin

Compass插件normalize使用

1 . 安装插件

gem install compass-normalize

2 . 使用插件

  • 在config.rb添加引用
require 'compass-normailze'
  • css文件调用

a. 重置所有样式

@import "normalize"; //重置所有样式

b. 按需重置

@import "normalize-version";
@import "normalize/base";
@import "normalize/html5";
@import "normalize/links";

参照网站：
http://xhope.top/?p=893
http://compass-style.org/reference/compass/

sass语法，compass命令使用

省略sass/compass安装的过程^_^

sass

1. 常用命令

sass main.scss //打印到控制台

sass main.scss main.css //输出到main.css中

sass-convert main.scss main.sass// scss sass相互转化

2. 中文编译问题

sass文件中，代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错,需要修改ruby对中文的支持。

  • 找到ruby的安装目录，里面也有sass模块，找到文件engine.rb。如这个路径:C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb(用everything搜索engine.rb)

  • 在这个文件里面engine.rb，添加一行代码：
    Encoding.default_external = Encoding.find(‘utf-8’)
    放在所有的require XXXX 之后即可。

3. sass语法

1.文件导入

sass文件名规则，文件名_variables.scss
导入的时候只需要这么写：

import 'variables'

可以看到不需要下划线和后缀，sass编译器认为variables == _variables.scss

2. 变量

变量的声明：

    $baseSize:62.5%;
    $baseColor: #f0f;

变量的使用

html {
    font-size: $baseSize;
    color: $baseColor;
}

3. mixin

mixin声明

@mixin col-6 {
    width: 50%;
    float: left;
}


@mixin col($width: 40%) {
    width: $width;
    float: left;
}

@mixin col-sm($width: 50%) {
    @media (min-width: 768px) {
        width: $width;
        float: left;
    }
}

mixin使用

div.content {
   /*@include col-6();*/
   //@include col(); //无参数括号可以省略
   @include col-sm();

   &:hover {
        background-color:#f5f5f5;
   };

    @at-root //编译后寻址路径不再是：div.content .content-title{}
   .content-title {
        color: #0f0;
        font-size: 2em;
   }
}

4. extend

extend使用

//编译到css中
/* .error { 
    color: red;
} */

//不会编译到css中
%error {
    color: red;
}

.serious-error {
    @extend %error;

    border: 1px solid red;
}

compass

1. 文件配置config.rb

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

2. compass常用命令

compass create myproject //创建compass项目

compass compile //编译

compass watch //监听文件修改，及时编译，需要配置文件

参考资料
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.ruanyifeng.com/blog/2012/11/compass.html

http://www.imooc.com/learn/371
http://www.imooc.com/learn/364