怎么使用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);