怎么使用Vue-cli3开发像iview、element那样的组件可下载直接使用

https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html 参考这个就行。

而我这篇文章主要是对里面的相关步骤作一些简单的说明。

1：安装Vue-cli3

2：目录创建：packages 目录用于存放自己定义的组件 examples 用于演示组件

3：创建vue.config.js配置文件，为什么要配置这文件？

因为我们把原来的的src入口目录给改了，所以现在要重新配置新的入口目录为examples

module.exports = {

  // 将 examples 目录添加为新的页面

  pages: {

    index: {

      // page 的入口

      entry: 'examples/main.js',

      // 模板来源

      template: 'public/index.html',

      // 输出文件名

      filename: 'index.html'

    }

  }

}

4：组件开发

组件目录结构：

--- buttom

    -- src

        -- main.vue

    -- index.js

src目录：用于存入源码

index.js：文件定义组件与导出标识。

为每个组件定义一个install方法，这只是一种约束，便于你批量注册组件。

// index.js 文件
import Buttom from './src/main.vue';

Buttom.install = function (Vue) {

    Vue.componet(Buttom.name, Buttom);

};

export default Buttom;

5：组件全局注册

1：需要注意的

Vue.use 注册插件时如果为一个对象那么对象必须要有一个install方法。

packages/index.js 导出的模块为一个对象，里面包含了所有组件和一个install方法，在main.js页面注册插件（Vue.use）时，就用调用 install 方法，

Vue.use调用install方法时会传一个Vue对象过去，这时就会执行注册组件。也就是 const install = function(...) 这段

packages/index.js

import Button from './button';

// 组件

const components = [

    Button,

];

// 注册组件

const install = function (Vue) {

    if (!install.lock) {

        components.forEach(component => {

            Vue.component(component.name, component);

        });

        install.lock = true;

    }

};

if(typeof window !="undefined" && window.Vue) {

    install(window.Vue);   // 注册成插件时 Vue.use 调用这方法时会传用全局对象Vue

}

// 导出组件

export default {

    install,        // 为什么要install 方法，Vue.use 注册插件时 如果为对象时必须要一个install方法

    ...components

}

// main.js 文件
import Plug from '../packages';

Vue.use(Plug);

巴特西

怎么使用Vue-cli3开发像iview、element那样的组件可下载直接使用

最新文章

热门文章