chuck-vue2-test v1.0.2

test-vue2-chuck

这是一个基于vue2的插件、组件、指令、混入开发的demo示例，用于开发学习使用。

安装

npm i chuck-vue2-test

vue项目全局引用

• 在main.js中

...
import chuckVue2Test from 'chuck-vue2-test'
Vue.use(chuckVue2Test)
...

vue项目局部使用

<template>
  <div id="app">
    <Example />
    <hr />
    <Example2 :msg="msg" @custom-event="customEvent"/>
    <hr />
    <img :src="logo" />
    <hr />
    <div>{{ str | reverse}}</div>
    <hr />
    <input type="text" v-autoFocus>
    <hr />
    <button v-clickCopy="copyInfo">一件复制</button>
    <hr />
    <button @click="historyBack()"> 返回</button>
    <hr />
    <!-- <button @click="$hello">全局方法</button> -->
  </div>
</template>
<script>
  import { Example, Example2, reverse, autoFocus, clickCopy, mixins as hb  } from 'chuck-vue2-test'

  export default {
    name: "app",
    data(){
      return {
        logo: require('./assets/logo.png'),
        str: '1234567',
        msg: '我是传递到Example2的数据',
        copyInfo: '我是复制的信息'
      }
    },
    components: {
      Example,
      Example2
    },
    mixins: [ hb ],
    filters:{
      reverse
    },
    directives: {
      autoFocus,
      clickCopy
    },
    methods:{
      customEvent(v){
        console.log(v)
      }
    }
  };
</script>

脚手架github地址

https://github.com/chuckchen88/webpack-vue2-template