总结vue-cli二次封装iview和element组件

    由于网上的开源组件库组件精美，但是适配范围太窄了，对于项目的要求又不是很符合，所以要去二次封装一下组件。需要组件网站链接下面自取
element
iview-ui
下面是我自己用脚手架vue-cli封装一个table组件的封装过程和心得，做一次记录，希望能帮助到你
vue-cli安装使用教程

1.vue-cli创建项目

vue create x-compound-table

2.安装iview组件，可以全局安装，也可以你选用什么组件就局部安装什么组件

/* 全局安装 */    
npm install view-design --save

/* 在 webpack 入口页面 main.js 中如下配置 */
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);

// 局部安装
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：
npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}
然后这样按需引入组件，就可以减小体积了：

import { Button, Table } from 'view-design';
Vue.component('Button', Button);
Vue.component('Table', Table);

按需引用仍然需要导入样式，即在 main.js 或根组件执行 
import 'view-design/dist/styles/iview.css';

3.开发自己的组件，就是你自己按需求开发，至于怎么使用iview和element组件开发，你可以点进去看它们的官网，很好学的，完成后下一步

这个我开发完成的组件，1.0.0版，还是有很多不完善的地方 想用的可以直接npm x-compound-table
源码地址在BelieverCH上,可能现在初步想使用你要看一下源码才行，看src/view/about.vue,里面传递的静态数据和方法

4。然后我们要把这个项目的目录修改一下，尽量设置我这样等级分明好辨认

其中新建了两个index.js文件，
最里面的src/components/xCompoundTable/index.js
这个单个组件的注册文件，也是入口文件。我现在是一个组件一个文件夹，存放每个组件单独的开发目录，例如xCompoundTable，里面就会有一个组件的入口文件index.js，内容如下，注册了组件：

import xCompoundTable from './comp/xCompoundTable.vue'

xCompoundTable.install = function (Vue) {
  Vue.component(xCompoundTable.name, xCompoundTable)
}

export default xCompoundTable

外面的src/components/index.js
这个是一个 index.js 整合所有组件，并对外导出

// 导入单个组件
import xCompoundTable from './xCompoundTable/index'

// 以数组的结构保存组件，便于遍历
const components = [
  xCompoundTable
]

// 定义 install 方法
const install = function (Vue) {
  if (install.installed) return
  install.installed = true
  // 遍历并注册全局组件
  components.map(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具备一个 install 方法
  install,
  // 组件列表
  ...components
}

到这里组件就已经开发完毕

插一个步骤，做不做都行，只是为了测试
先新建一个页面，里面就直接引用 当然也要在 /main.js 中引入该组件
import xCompoundTable from './components/index.js'

5.基于此，在 package.json 里的 scripts 添加一个 lib 命令

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
  }
}

然后执行 npm run lib 命令，编译组件

6.要完善你的 package.json

{
  // name: 包名，该名不能和已有的名称冲突
  "name": "x-compound-table",
  "description": "对iview表格的重新封装及组合拓展",
  // version: 版本号，不能和历史版本号相同,每次加0.0.1或者0.1或者1，看你项目改动大不大
  "version": "1.0.0",
  // 一定要是 false
  "private": false,
  // main: 入口文件，应指向编译后的包文件
  "main": "lib/x-compound-table.umd.min.js",
  // 作者
  "author": "Believer<xch-believe@qq.com>",
  // license：开源协议
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com:BelieveXIA/x-compound-table.git"
  },
  "bugs": {
    "url": " https://github.com/BelieveXIA/x-compound-table/issues"
  },
  "homepage": " https://believexia.github.io/x-compound-table/",
  "keywords": [
    "table",
    "vue",
    "compound table",
    "iview ui"
  ],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name x-compound-table --dest lib ./src/components/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "view-design": "^4.3.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

7.发布

1.npm 登录
2.没有就注册，npm 官网
3.npm login
4.npm publish
5.然后就是去npm官网看看，或者等十几分钟，直接npm install xxxx
6.大功告成