vue组件库创建与发布（1）-仿写elementUI

1. 项目搭建

直接采用vue-cli去搭建这个项目 目前的项目结构为

image.png
--components为组件放置位置
--example为该组件的示例
--router为路由
--src中创建了一些工具
--util为工具类
--index为打包的入口
--main为运行项目入口

2. 项目npm发布

1. 在main.js中 引入component组件，样式文件和图标文件，并且export出去。 这样可以全局引入所有组件。

import './styles/font/icon.scss';
import "./styles/reset.scss";
import "./styles/index.scss";


import Button from './components/button/index'
import ButtonGroup from './components/button-group/index'

const components = [
  Button,
  ButtonGroup
]

const install = function(Vue, opts = {}) {
  components.forEach(component => {
    Vue.use(component);
  });
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}


export {
  install,
  Button,
  ButtonGroup
}

2. 在vue-cli中，可以修改入口文件，构建项目

   
   image.png

3. 我们在package.json中script增加一个命令。"lib": "vue-cli-service build --target lib ./src/index.js"

4. 在npm run lib之后我们会形成lib文件夹，里面很多根据不同协议打包之后文件。

5. npm包需要告诉用户文件入口 在package.json中增加"main": "./dist/wviewcomp.umd.min.js"。