手把手做一个基于vue-cli的组件库（上篇）

const path = require(‘path‘)
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: ‘examples/main.js‘, // 入口
      template: ‘public/index.html‘, // 模板
      filename: ‘index.html‘ // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set(‘@‘, path.resolve(‘examples‘))
      .set(‘~‘, path.resolve(‘packages‘))
// 把 packages 和 examples 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule(‘js‘)
      .include.add(/packages/)
      .end()
      .include.add(/examples/)
      .end()
      .use(‘babel‘)
      .loader(‘babel-loader‘)
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

<template>
  <button class="testBtn">测试按钮</button>
</template>
<script>
export default {
  name: ‘SqButton‘ // 注意这个name是必须的
}
</script>
<style lang="scss" scoped>
.testBtn {
  width: 100px;
  height: 50px;
  margin: 0 10px;
  background-color: #fc297f;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
</style>