手把手做一个基于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>