# vue组件库开发

组件库开发的目的：现在公司小项目可能会比较多，虽然之前用过mint-ui（饿了么公司）和iview-ui，但是还有一部分会根据自身需要进行封装增强或则针对业务化公用的封装，这样一来就会存在以下几个问题：

1. 每个项目中都有部分通用公用的组件，要么都copy一次
2. 维护困难，如果有bug或则新增功能，所有项目都需要重新copy一次

如果不分那么细致的话，可以连同工具类一起发布到npm中，只要所有项目依赖该组件库，就能解决上面的维护问题。

依照够用原则，放弃了element ui的构建方式，原因是学习成本比较高，后来发现 iview 组件库的方式和vue-cli生成的配置差不多，就依此为参考进行开发环境的搭建；

## 环境搭建思路
使用vue-cli为基础，安装好后，再修改配置文件；
百度看了好多讲解打包组件的方式，但是都是很简单配置和vue-cli脱节的的开发方式，可能学习成本来说会让人摸不着头脑。 参考了一些开源框架，最后终于大概弄明白了一些概念：

- 开发环境和vue-cli默认生成的配置类似
- 不同的是 组件的打包，要打包成js文件 和 css文件。
- 发布到npm的内容是.npmignore 和 package.json决定的

以上几点明白了。就可以尝试搭建了;

搭建过程请参考:
https://zq99299.gitbooks.io/vue-note/content/chapter/vu_components_lib/

npm相关请参考：
https://zq99299.gitbooks.io/gitbook-guide/content/chapter/node_npm.html#如果出现命令无效


cnpm run build:prodLib
cnpm run build:prodStyl


组件库的图标
前面的版本使用的是icon-font
后来换成了svg

webpack中使用svg的方法
第一步：在阿里巴巴http://www.iconfont.cn 下载所需的svg图标，将所有的svg图标存放在src/icons目录下 注意：这个目录是随意的，但是配置loader时要和存放的目录一致哦
第二步：项目中执行cnpm install svg-sprite-loader --save-dev 安装svgSprite loader
第三步：在build目录下的webpack.base.conf.js文件中修改
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}
为：
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  exclude: [
    path.resolve(__dirname, '../src/icons')
  ],
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}

并添加如下loader
{
  test: /\.svg$/,
  include: [
    path.resolve(__dirname, '../src/icons')
  ],
  loader: 'svg-sprite-loader',
  options: {
    symbolId: 'sv-icon-[name]'
  }
}