7-2 Element UI及Vuex-自定义全局组件(插件)

目录：

• 简介
• 自定义全局插件

一、简介

全局组件(插件)：就是指可以在main.js中使用 Vue.use()进行全局引入，然后在其他组件中就都可以使用了，如 vue-router等

import VueRouter from 'vue-router'  //只在main.js入口文件导入并使用即可

Vue.use(VueRouter )

普通组件(插件)：每次使用时都需要引入，如 axios 等

import axios from 'axios'   //任何组件都需要导入

这边需要参考 Vue.js教程中的插件来学习：插件

借用插件中的自定义插件的要求，详细还看插件的api文档，上面红色字体有。

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者属性。如: vue-custom-element

2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch

3. 通过全局混入来添加一些组件选项。如 vue-router

4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

二、自定义全局插件

2.1、初始化项目

>vue init webpack-simple vue-cli-demo

>cd vue-cli-demo

>npm install

2.2、目录结构

vue-cli-demo   //项目名
    |-node_modules 
    |-src
        |-assets  
            |-logs.png
        |-components  //手动创建我们需要
            |-user  //user文件夹中创建全局组件
               |-index.js   //创建一个js文件，文件名自定义，最好叫 index.js
               |-Login.vue  //创建全局组件
        |-App.vue
        |-main.js   
    |-.babelrc
    |-editorconfig
    |-.gitignore
    |-index.html   
    |-package.json   
    |-package-lock.json
    |-README.md
    |-webpack.config.js 

2.3、创建 Login.vue组件

<template>
  <div id="login">
    {{msg}}
  </div>
</template>

<script>
  export default {
    data(){
      return {
        msg: "用户登录"
      }
    }
  }
</script>

<style scoped>
  #login{
    color: red;
    font-size: 20px;
    text-shadow: 2px 2px 5px #000;
  }
</style>

接下来，我们看看Vue.use(plugin)官方的使用方法： Vue.use(plugin)

2.4、编写 index.js

import Login from './Login.vue'


export default {
  installed: function(Vue){ //Vue参数是构造器
    Vue.component('Login',Login);  //注册我们需要定义的全局组件
  }
}

2.5、main.js导入

import Vue from 'vue'
import App from './App.vue'
.....
//导入自定义全局组件(插件)
import Login from './components/user'   //写全了：'./components/user/index.js'

//使用
Vue.use(Login);

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

2.6、组件中使用，如App.vue

<template>
  <div id="app">

    <!--导入全局组件Login，直接用就可以了-->
    <Login></Login>

  </div>
</template>

<script>
  //js代码
</script>

<style> 
  /css
</style>