image.png
vue.config.js相关配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
pages: { // 入口文件的相关配置
index: {
entry: 'examples/main.js', // 把src改为examples这里入口文件也要跟着改
template: 'public/index.html',
filename: 'index.html'
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages/') // 在根目录下加了新的文件webpack不会去打包所以要增加进去
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
})
packages目录下文件
image.png
packages/index.js
// 导入组件
import demoComponent from './demo-component/index.js'
export default demoComponent
packages\demo-component
index.js
import demoComponent from './src/demo-component'
// 为组件提供 install 安装方法，供按需引入
demoComponent.install = function (Vue) {
Vue.component(demoComponent.name, demoComponent)
}
// 默认导出组件
export default demoComponent
src/demo-component.vue
<template>
<div>
这是demo-component.vue{{ msg }}
</div>
</template>
<script>
export default {
name: 'demoComponent',
props: {
msg: {
type: String,
required: true
}
}
}
</script>
测试
examples\main.js
import demo from '../packages/index'
console.log(demo)
createApp(App).use(store).use(router).use(demo).mount('#app')
局部组件就可以引用
打包上传到npm
配置编译
package.js 中新增一条编译为库的命令
在库模式中，Vue是外置的，这意味着即使在代码中引入了 Vue，打包后的文件也是不包含Vue的。
以下我们在 scripts 中新增一条命令 npm run lib
- –target : 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
- –dest : 输出目录，默认 dist 。这里我们改成 lib
- [entry] : 最后一个参数为入口文件，默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。
"script": {
"lib": "vue-cli-service build --target lib --name jaydemoComponent --dest lib packages/index.js"
}
包名注意事项
把包名中的标点符号去掉并与现有的包进行比较，相同则不允许发布
例如：react-native已经存在，那么诸如
reactnative
react_native
react.native
就不可以再发布了
注：包版本不一定要增量，可以是任意不曾使用过的版本号
被划了作用域的包默认是私有的，所以要通过—access=public让它变为公有的包：
npm publish --accesss=public
添加.npmignore 文件，设置忽略发布文件
我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。
# 忽略目录
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
登录到 npm
首先需要到 npm 上注册一个账号，注册过程略。
如果配置了淘宝镜像，先设置回npm镜像：
npm config set registry=https://registry.npmjs.org/
然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。
npm login
发布到 npm
执行发布命令，发布组件到 npm
npm publish
执行后显示发布成功即可在npm官网上找到自己的包，如果没有发布成功，有可能是包名称和社区其他包重复了，改个名字即可。
被划了作用域的包默认是私有的，所以要通过—access=public让它变为公有的包
