如何搭建一个vue组件，并发布到npm

最新推荐文章于 2024-06-06 13:17:16 发布

Yushia-Lin

最新推荐文章于 2024-06-06 13:17:16 发布

阅读量901

点赞数 1

分类专栏： Vue 文章标签： vue.js npm javascript

本文链接：https://blog.csdn.net/shrimp6/article/details/127257453

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、准备工作

安装nodejs
全局安装vue脚手架

npm install -g @vue/cli

创建一个vue项目

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

详情可见：Vue + TypeScript 实战（一）项目搭建

2、配置相关文件

2.1 修改文件名

src目录更改为 examples （改成 examples 用作示例展示）
新增 packages 文件夹用于编写存放组件

在这里插入图片描述

2.2 根目录下新建 vue.config.js文件

因为src 目录更名为 examples ，导致项目无法运行
在 vue.config.js 添加以下配置

module.exports = {
    productionSourceMap: false,
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    },
    // 扩展 webpack 配置，使 packages 加入编译
    chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/packages')
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                // 修改它的选项...
                return options
            })

        config.module
            .rule('js')
            .include
            .add('/examples')
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                // 修改它的选项...
                return options
            })
    }
}

3、编写组件代码

首先我们拿一个Button组件来示范，这里只实现一个比较简单的组件。
首先我们先在packages目录下新建一个Button目录，然后src里存放组件的源代码：

<template>
  <div class="x-button">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'x-button',
  props: {
    type: String
  }
}
</script>

<style scoped>
  .x-button {
      display: inline-block;
      padding: 3px 6px;
      background: #000;
      color: #fff;
  }
</style>

我们在在Button的index.js里编写如下代码来作为vue的组件安装：

// 导入组件，组件必须声明 name
import XButton from './src'
// 为组件提供 install 安装方法，供按需引入
XButton.install = function (Vue) {
  Vue.component(XButton.name, XButton)
}
// 导出组件
export default XButton

Button的组件结构如下：
在这里插入图片描述

接下来我们在packages的入口文件中导入组件并安装导出：

// 导入button组件
import XButton from './Button'

// 组件列表
const components = [
  XButton
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (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,
  // 以下是具体的组件列表
  XButton
}

4、测试代码

我们要想看到自己写的组件效果，可以将组件导入到examples目录下的main.js中，其本质就是一个项目的开发目录，我们只需要按照如下方式导入即可：

// examples/main.js
import Vue from 'vue'
import App from './App.vue'

// 导入组件库
import xui from '../packages'
// 注册组件库
Vue.use(xui)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

这种方式是全局导入，至于按需导入，完全可以采用element的方式来配置，对于业务组件来说，一般项目中都是使用的到，所以全局导入比较合适，作为UI库来说，按需导入可能更适合。

接下来我们就可以在项目中使用我们的组件了：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <x-button type="primary">button</x-button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

效果如下：

在这里插入图片描述

5、配置package.json文件

作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
  }

–target lib 关键字指定打包的目录

–name 打包后的文件名字

–dest 打包后的文件夹的名称

其次我们需要编写package文件的description,keywords等,具体介绍如下:

  // 项目名字
 "name": "xui",
 // 项目描述
  "description": "xui中常用组件抽取",
  // 项目版本
  "version": "1.0.2",
  // 项目作者
  "author": "kuangshp <kuangshp@126.com>",
  // 开源协议
  "license": "MIT",
  // 因为组件包是公用的，所以private为false
  "private": false,
  // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
  "main": "lib/xui.umd.min.js",
  // 指定代码所在的仓库地址
  "repository": {
    "type": "git",
    "url": "git+git@git.xxxx.com:maucash/maucash.git"
  },
  // 指定关键词
  "keywords": [
    "vue",
    "maucash",
    "code",
    "maucash code"
  ],
  // TypeScript 的入口文件
  "typings": "types.d.ts",
   // 项目官网的地址
  "homepage": "https://github.com/kuangshp/maucash",

6、 .npmignore 配置文件

之后你需要在项目根目录下创建一个.npmignore的文件
文件中写明你要忽略的文件，一般保留只需要保留README.md,lib和package.json即可，我的文件是这样写的

.DS_Store
examples/
packages/
public/
node_modules/
vue.config.js
postcss.config.js
babel.config.js
.gitignore
jsconfig.json
package-lock.json
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

7、发布

登录到npm，npm账号注册可在官网进行(npm官网)

// 本地编译组件库代码
yarn lib
// 登录
npm login // 输入用户名、密码、邮箱即可登录
 // 发布
npm publish
 // 如果发布失败提示权限问题,请执行以下命令
 npm publish --access public

删除已发布的包

运行 npm unpublish 包名 --force 命令，即可从 npm 删除已发布的包

注意：

npm unpublish 命令只能删除 72 小时以内发布的包
npm unpublish 删除的包，在 24 小时内不允许重复发布
发布包的时候要慎重，尽量不要往 npm 上发布没有意义的包！

8、使用

import vui from '@alex_xu/vui'
import '/@alex_xu/vui/lib/vui.css'
Vue.use(vui)