Vue

vue插件封装的步骤

2021-01-26  本文已影响0人  糖小羊儿

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

新建目录

为插件创建一个空的文件夹,在该文件夹下创建:

image.png

重点说下components和main.js

components文件

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

image.png

index.js

这个文件的内容大差不差

下面是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属性:

<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;

上一篇 下一篇

猜你喜欢

热点阅读