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

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

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

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

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

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

示例：安装 ElementUI

安装：yarn add element-ui

引入，在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中使用：

<template>
  <div>
    <Button>Button</Button>
  </div>
</template>

<script>
import { Button } from 'element-ui';

export default {
  components: {
    Button
  }
};
</script>

更多配置参考 官方文档

示例：安装 dayjs

安装依赖：yarn add dayjs，无需重启服务

在组件中引入后即可直接使用：

<template>
  <div>
    {{time}}
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  computed: {
    time() {
      return dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

示例：安装 Stylus

安装 stylus 和 stylus-loader：yarn add stylus-loader stylus，要重启服务才会生效

完成，可以直接使用了！

<template>
  <div class="wrapper">
    <div class="box">Test</div>
  </div>
</template>
<style lang="stylus" scoped>
$color = #42b983
.wrapper {
  .box {
    font-size: 100px;
    color: $color;
  }
}
</style>