这个是一个简单插件demo，可以直接下载改改就能使用

新建目录

为插件创建一个空的文件夹，在该文件夹下创建：

• src文件夹
  • main.js 入口文件（必须有）
  • components 放组件（必须有）
  • assets 用来放css，图片，icon等静态资源
  • utils 放一些js公用方法或其他配置项之类的js
• package.json文件：和正常vue项目的package.json没区别

image.png

重点说下components和main.js

components文件

我们没开发一个组件，都需要在components下新建一个文件夹，同时新建一个index.js 和 index.vue

image.png

index.js

这个文件的内容大差不差

• import 组件名字 from "./index.vue";
• export default 组件名字;

下面是mengInput的index.js代码

import mengInput from "./index.vue";
export default mengInput;

下面是mengNav的index.js代码

import mengNav from "./index.vue";
export default mengNav;

index.vue

这个就是正常的vue组件，template script style 都正常写，但是一定要记得写name属性：

• 这个name 就是后期，在真正的项目中使用该组件时的名字

<template>
     <input type="text" placeholder="请输入内容">
</template>
<script>
export default {
    name: "meng-input",
    data() {
        return {};
    },
    created() {},
    methods: {},
};
</script>
<style lang="less" scoped>
input{
    width: 300px;
    height:40px;
    border:1px solid #f24b4b;
    padding:0 10px;
}
</style>

main.js 文件

import Vue from "vue";
//引入自定义css，也可以像element-ui一样，这里不引入，在项目中引入的时候引入
import './assets/zzcommon.less'

//引入自己封装的js文件，在项目中可以通过this.mengFunc.方法名调用
import mengFunc from './utils/mengFunc';
Vue.prototype.mengFunc = mengFunc;

//element-ui  如果插件没有使用element-ui  可以不用安装和引用
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

//引入自己封装的组件
import mengInput from './components/mengInput'
import mengNav from './components/mengNav'
const components =[
    mengInput,
    mengNav,
];
//安装自己封装的组件，以便于项目中不用引入就可以正常使用
components.install = function (Vue, opts = {}) {
  components.forEach((element) => {
    Vue.component(element.name, element);
  });
};
if (typeof window !== "undefined" && Vue) {
  Vue.use(components);
}
export default components;