前言

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

1.准备工作

在我们了解Vue以插件的形式注册全局组件之前，我们先做好准备工作，搭建一个vue2的项目。

1.安装Vue CLI

安装Vue CLI npm install -g @vue/cli
检查是否安装成功vue -v

2.搭建vue项目

创建vue项目，vue create 项目名，例如：vue create vue2-demo
让你选择创建的模式 default是默认模式
选择你项目中需要用到的工具

(*) Babel 用是把项目中es6代码转成es5 用来去兼容低版本浏览器
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router 管理项目中的路由
(*) Vuex 管理项目中的共享数据状态
(*) CSS Pre-processors css处理器 sass less css处理器
(*) Linter / Formatter 对项目中的代码进行格式化的还有格式化校验校验代码格式规范
( ) Unit Testing
( ) E2E Testing

请选择vue的版本
你是否使用 history 作为你的路由模式
你想要选择那个CSS处理器
你的代码校验要使用哪种校验规范
你选择在什么情况下触发格式校验
你选择 Babel, ESLint 生成的配置信息放哪
是否将你刚才的一系列选择来保存一下下次可快速创建全新的项目
请选择你的包管理

安装完成后cd进你的项目，例如本文cd vue2-demo
跑起来npm run serve

2.解决每个项目第一行波浪线问题

打开项目后，我们发现每个文件的第一行都报红色波浪线，这让我们看起来很不舒服，以为是报错。
跟着本文安装的，我们需要找到.eslintrc.js文件在其中parserOptions中添加这行代码requireConfigFile: false,即可解决第一行报红波浪线问题。
如果不是本文安装的，则找到package.json文件，在其中parserOptions中添加这行代码requireConfigFile: false,即可解决第一行报红波浪线问题。

3.调整项目内容

将App.vue中代码改成如下

<template>
  <div id="app">app</div>
</template>

将router文件夹下index.js改成

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

将views文件下文件清空
将components文件夹清空
再次运行npm run serve，看看是否能跑起来。

4.开发插件

在components文件夹下面创建一个common文件夹，里面用来存放我们编写的全局组件，在common文件夹下创建一个index.js文件，在common文件夹下面创建一个fcButton文件夹，在fcButton文件夹里面创建一个index.vue文件，在index.vue中输入如下代码：

<template>
  <div>123</div>
</template>

这时我们发现报如下问题Component name "index" should always be multi-word.eslint 我们需要找到.eslintrc.js文件在其中加入如下代码：

rules: {
    "vue/multi-word-component-names": [
      "error",
      {
        ignores: ["index"], //需要忽略的组件名
      },
    ],
  },

这时不报上面的问题了，开始报Delete ␍eslint,

我们还是需要在刚刚.eslitrc.js文件中加入如下代码：

rules: {
    "prettier/prettier": ["error", { endOfLine: "auto" }],
}

问题解决完了，现在开始编写fcCard组件。
2. 在fcCard文件夹下的index.vue中,我们需要给组件取一个组件名，用来当后面的全局组件名称，编写代码如下：

<template>
  <div class="fcButton">
    <button>{{ title }}</button>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "fcButton",
  props: {
    title: {
      type: String,
      default: "确定",
    },
  },
};
</script>

<style lang="scss" scoped>
.fcButton {
  width: 72px;
  height: 36px;
  margin: 10px;
}
button {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-color: #f0f020;
  border: 1px solid #f0f020;
  cursor: pointer;
}
</style>

在common文件夹下面创建fcCard文件夹，在fcCard文件夹下面创建index.vue，给组件命名为fcCard，在里面编写如下代码：

<template>
  <div class="fcCard">
    <p class="title">{{ title }}</p>
    <div class="box">
      <img :src="srcImg" alt="" />
      <div class="box-btn">
        <button class="btn">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "fcCard",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    srcImg: [String],
  },
};
</script>

<style lang="scss" scoped>
.fcCard {
  width: 100%;
  height: 100%;
  margin: auto;
  width: 520px;
  height: 360px;
  background: #ccc;
  .title {
    height: 52px;
    margin: 0;
    background-color: #eee;
    font-size: 24px;
    line-height: 52px;
    text-align: center;
  }
}
.box {
  position: relative;
  img {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    margin-left: calc(50% - 50px);
    margin-top: 50px;
  }
}
.box-btn {
  text-align: center;
  margin-top: 72px;
  .btn {
    width: 72px;
    height: 36px;
    border-radius: 4px;
    border: #fff;
    background-color: rgba(250, 246, 31, 0.852);
  }
}
</style>

在common文件夹下的index.js里面引入刚刚编写的fcButton和fcCard组件，编写代码如下：

// 1.引入要注册的全局组件
import fcButton from "@/components/common/fcButton/index.vue";
import fcCard from "@/components/common/fcCard/index.vue";

// 2.将组件放入components数组中
const components = [fcButton, fcCard];

const install = function (Vue) {
  // 3.遍历components
  components.forEach((component) => {
    // 4.注册的名字为引入全局组件中的name
    Vue.component(component.name, component);
  });
};

// 导出install
export default install;

在mainjs中引入common文件夹中的index.js文件，编写如下代码：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import common from "./components/common";

Vue.config.productionTip = false;
// 通过Vue.use使用全局插件common
Vue.use(common);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

5.使用插件

App.vue中使用全局注册组件，编写如下代码：

<template>
  <div id="app">
    <fcCard :srcImg="require('@/assets/bg.png')" />

    <fcButton title="取消" />
    <fcButton />
    <fcCard title="充值" :srcImg="require('@/assets/bg2.png')" />
  </div>
</template>

运行结果图如下：

最后

以上就是本人的以插件的形式注册全局组件，希望对你有用。