vue2-example

创建项目和目录解构

https://cn.vuejs.org/v2/guide/plugins.html

创建项目vue create vue2-example

• vue version->vue2
• babel
• css预处理器->dart sass
• 不选eslint

创建组件目录: 在项目根目录下创建modules/my-ui文件夹

Button组件

推荐以目录的形式创建组件 modules/my-ui/Button/index.vue

<template>
    <button 
        :class="['my-btn',type]"
        @click="btnClick($event)">
        <slot>默认按钮</slot>
    </button>
</template>

<script>
export default {
    name:'MyButton',
    props:{
        type:String
    },
    methods:{
        btnClick(e){
            this.$emit('click',e)
        }
    }
}
</script>

<style lang="scss" scoped>
    .my-btn{
        height:34px;
        padding: 0 15px;
        border:1px solid #ddd;
        background-color: #fff;

        &.primary{
            border: 1px solid #ddd;
            background-color: blue;
            color:#fff
        }

        &.success{
            border: 1px solid #ddd;
            background-color: green;
            color:#fff
        }

        &.danger{
            border: 1px solid #ddd;
            background-color: red;
            color:#fff
        }
    }

</style>

Input组件

modules/my-ui/Input/index.vue

<template>
    <input type="text" class="my-input" :placeholder="placeholder" :value="value"/>
</template>

<script>
export default {
    name:'MyInput',
    props:{
        placeholder:String,
        value:String
    }
}
</script>

<style lang="scss" scoped>
    .my-input{
        height:34px;
        padding: 0 15px;
        border:1px solid #ddd;
        background-color: #fff;
    }

</style>

导出自定义的UI组件

modules/my-ui/index.js

import Vue from 'vue';
import Button from './Button';
import Input from './Input';

// ========2.解构方式加载组件 start============
const MyButton = {}
const MyInput = {}
MyButton.install = Vue => Vue.component(Button.name,Button);
MyInput.install = Vue => Vue.component(Input.name,Input);
export {
    MyButton,
    MyInput
}
// ========解构方式加载组件 end============


// ========按需加载============
const MyUI = {};
const COMPONENTS = [
    Button,
    Input
]
MyUI.install = function(Vue,options){
    console.log(options)
    // Vue.component
    // Vue.prototype.$http=
    if(options && options.components){
        const components = options.components;
        components.forEach(componentName => {
            COMPONENTS.forEach(component => {
                if(componentName === component.name){
                    console.log(component);
                    // Vue.component 注册组件
                    Vue.component(component.name,component);
                }
            });
        });
    }else{
        // 遍历所有组件，注册
        COMPONENTS.forEach(component => {
            Vue.component(component.name,component); 
        });

    }
}
export default MyUI;
// ========按需加载============

3中方式加载自定义组件到main.js

import Vue from 'vue'
import App from './App.vue'
// import MyUI from '../modules/my-ui'
import '../modules/my-ui/common.css' //引入全局样式
//========= 2.通过解构的方式加载UI组件 start==========
import {MyButton, MyInput} from '../modules/my-ui' 
Vue.use(MyButton);
Vue.use(MyInput);
//========= 通过解构的方式加载UI组件 end==========

//=========  1.按需加载 推荐写法========= 
// Vue.use(MyUI,{
//   components:[
//     'MyButton',
//     'MyInput'
//   ]
// })
// ==================================== 

//======= 3.全局加载=========
// Vue.use(MyUI);
//=======  全局加载=========

Vue.config.productionTip = false

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

使用自定义的组件

App.vue

<template>
  <div id="app">
    <my-button type='success' @click="output">我的按钮</my-button>
    <my-input value='123'/>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  methods:{
    output(e){
      console.log('click',e)
    }
  }
}
</script>

<style lang="scss">

</style>