1.创建项目
在文件夹中打开cmd
输入以下命令,新建一个vue
的项目,名称自定义
vue create 项目名(projectName)
在src
的同级目录下新建一个名称为myComponents
的组件库,如图所示
2.配置项目
myComponents
是新增的一个目录,默认不被webpack
处理,所以需要在vue.config.js
里面配置组件库,以便webpack
编译。没有vue.config.js
的话,就在目录下新建一个。并在vue.config.js
填入一下内容
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map'
},
// 扩展 webpack 配置,使 components 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/myComponents')//这里根据你文件夹名称自定义,每个人不一样
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
})
3.编译自定义组件库
-
在
myComponents
文件加下新建一个yl-h5-empty
文件夹(此文件夹即是你对组件的命名),同时,在此文件夹下新建.vue
文件,文件名最好与文件夹yl-h5-empty
命名一致。 -
分别在
myComponents
文件夹和yl-h5-empty
文件夹下新建index.js
文件,这是它们的入口文件,注意路径,不要弄错了。 -
要将所有的静态资源文件等放入
myComponents
文件夹下,比如我就放在了assets
下,因为外部的其他文件是不会被打包上传的。
yl-h5-empty/yl-h5-empty.vue
文件是组件文件,需根据自己情况编写组件代码。
以yl-h5-empty/yl-h5-empty.vue
为例子,yl-h5-empty
文件夹下index.js
的代码如下:import ylH5Empty from './yl-h5-empty' ylH5Empty.install = function(Vue) { Vue.component('yl-h5-empty', ylH5Empty) } export default ylH5Empty
编写
myComponents/index.js
文件,对组件库进行导出:import ylH5Empty from './yl-h5-empty/index' const components = [ ylH5Empty ] // 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 const install = Vue => { // 判断是否可以安装 if (install.installed) return // 遍历注册全局组件 components.map(component => Vue.component(component.name, component)) } // 判断是否是直接引入文件 if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { // 导出的对象必须具有 install,才能被 Vue.use() 方法安装 install, // 以下是具体的组件列表 ylH5Empty }
4.在本地测试组件能否正常使用
如图在本地的src
下的main.js
导入组件并使用,并在App.vue
里面直接使用自己的组件。
并使用npm run serve
运行查看能否运行成功
组件引用成功,接下来就是发布自己的npm包了
5.本地继续配置
在package.json
的sript
命令中新增一条编译组件库的命令,参考vue-cli的配置文档:构建目标 | Vue CLI (vuejs.org)
"lib": "vue-cli-service build --target lib --name landscape-components --dest lib myComponents/index.js"
执行编译命令
npm run lib
编译成功之后会得到一个lib
文件夹
5.1 配置package.json
文件
"name": "yl-h5-empty",//组件名称
"version": "0.0.1",//版本号
"private": false,//原来为true,要改成false,否则发布不出去
"description": "项目H5中使用的Empty组件", //包的描述
"main": "lib/landscape-components.umd.min.js", //入口文件
"keywords": ["empty"],//关键词
"author": { "name": "xxx" }, //作者
5.2 添加.npmignore
文件
这一步比较重要,旨在发布npm
包的时候忽略不必要的文件上传,需要编译上传的只有lib文件夹,package.json,README.md
这三个,其他的都可以忽略。
# 忽略目录
src
myComponents
node_modules
public
utils
# 忽略指定文件
vue.config.js
babel.config.js
*.map
jsconfig.json
6.发布npm包
6.1 注册
需在npm官网(https://www.npmjs.com/)上注册一个账号,记住用户名、密码、邮箱
6.2 本地项目下登录
在进行登录操作之前,先查看一下自己使用的npm源。如果是淘宝源,需要更换为官方源,因为淘宝源是只读源。
npm get registry // 查看源
npm config set registry http://www.npmjs.org // 切换为官方源
或者
npm config set registry https://registry.npmjs.org // 切换为官方源
在项目文件夹下,输入npm login
,依次输入用户名,密码,邮箱进行登录
6.3 发布包
登录成功之后,输入npm publish
进行发布
npm publish
如果收到了npm发来的邮箱,便表示你发布成功啦
到此处,就可以在新项目中运行npm install yl-h5-empty
进行下载使用该组件了。
7. 组件使用
新开项目vue create newProject
,在项目下输入以下命令
npm install yl-h5-empty
同样需要在main.js
里面引用该组件
在app.vue
(需要使用该组件的页面)使用该组件
以上,这样就大功告成啦!