编写一个 vue 组件发布至 npm

转载：https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/%E7%BC%96%E5%86%99%E4%B8%80%E4%B8%AAvue%E7%BB%84%E4%BB%B6%E5%8F%91%E5%B8%83%E8%87%B3npm.html#%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE

初始化项目

创建项目（这里以文件夹为 mycomponent 为例）：

vue create mycomponent

选择配置

初始化项目配置

初始化项目配置

进入项目 npm i 安装依赖

#清理项目文件夹

  1. 删除src/assets文件夹
  2. 删除src/components文件夹
  3. 删除src/views/About文件
  4. src/router/index.js文件修改如下： 
    import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../views/Home';
Vue.use(VueRouter)

const routes = [{
  path: '/',
  name: 'Home',
  component: home
}]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

     

  5. src/views/Home.vue修改如下： 
    <template>
  <div class="home">
  </div>
</template>

<script>

export default {
  name: 'Home',
}
</script>

     

  6. src/App.vue修改如下： 
    <template>
  <router-view/>
</template>

     

  7. sublic/index.html修改如下： 
    <!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

     

开发组件前的准备

  1. 现在src下的文件只是用来展示我们写的组件（做测试用）

  2. 在根目录新建文件夹 myComponents，在此文件夹下进行开发组件

  3. 根目录新建vue.config.js配置：

    const path = require('path');
function resolve(dir) {
  return path.resolve(__dirname, dir)
}

module.exports = {
  /* 模板-src文件夹下用于展示demo内容 */
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
  },
  
  configureWebpack: {
    /* 配置别名 */
    resolve: {
      extensions: ['.js', '.vue', '.json'], // 排除文件类型
      alias: {
        '@': resolve('myComponents'), // 要编写组件的文件夹
        'assets': resolve('src/assets'),
        'views': resolve('src/views'),
      }
    },
    output: { // 暴露默认导出配置
      libraryExport: 'default'
    }
  },

  productionSourceMap: false, // 关闭文件映射，避免生产环境F12看到源码

  css: {
    extract: false, // 是否将css提取至独立的css文件中，false 则 js 控制不需要用户导入 css
  },
}

     

pages: 用于展示demo

configureWebpack：配置文件别名与导出配置

css.extract：配置css导入方式

#编写组件文件

在开始之前先看看使用组件的时候，一般会做两步（element 为例）：

import ElementUI from 'element-ui';
Vue.use(ElementUI);
  1. 为什么要 use()?

use 方法其实就是调用 ElementUI 下 install 方法 (ElementUI.install)

如果插件是一个对象，就需要提供一个 install 方法。

use() 调用 ElementUI.install 时会传入两个参数：第一个则是 Vue，第二个是可选对象

  1. 接下来在 myComponents 下创建 index.js 与 src/index.vue

创建组件文件夹

index.js 编写 install 方法并且暴露出去：

import componet from './src/index.vue';
componet.install = Vue => {
  Vue.component(componet.name, componet);
};
export default componet;

import 引入自己写好的组件，利用 install 传入的 Vue 组件全局组件。

src/index.vue 则是我们的组件：

<template>
  <div class="my-component">
    {{test}}
  </div>
</template>
<script>
export default {
  name: "myComponent",
  data() {
    return {
      test: "我的组件",
    };
  },
};
</script>
<style lang="less" scoped>
.my-component{
  font-size: 25px;
}
</style>

 

测试组件

#全局注册

在项目根目录 src/main.js 中引入：

import test from '@/index'; // 这里@ 别名指向的是 myComponents 文件夹
Vue.use(test);

在项目根目录 src/views/Home.vue 中使用：

<template>
  <div class="home">
    <my-component/>
  </div>
</template>

<script>

export default {
  name: 'Home',
}
</script>

注意

这里组件名使用的是 my-component 组件内的 name 的名字，要么都驼峰，要么都带中划线。发布组件时最好在文档中说明清楚

#按需引入

<template>
  <div class="home">
    <test/>
  </div>
</template>

<script>
import test from '@/index'; // 这里@ 别名指向的是 myComponents 文件夹
export default {
  name: 'Home',
  components: {
    test
  }
}
</script>

发布至 npm

#打包

配置 package.json

"scripts": {
  "lib": "vue-cli-service build --target lib --name myCom --dest lib myComponents/index.js"
}

--target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式;

--name: 打包后的文件名;

--dest：输出目录文件夹名称，默认 dist。这里改成 lib;

[entry]：入口文件，默认为 src/App.vue。这里指定编译 myComponents/index.js。

打包后 lib 文件夹下：

  • xx.common.js 给打包器用的 CommonJS 包
  • xx.umd.js：直接给浏览器或 AMD loader 使用的 UMD 包
  • xx.umd.min.js：压缩后的 UMD 构建版本

#package.json 修改

package.json 文件:

"main": "lib/xxx.umd.min.js", // 设置入口文件
"private": false, // 设置为公开库
"keywords": [], // 设置搜索关键词
"description": "描述",
"author": "作者",
"name": "包的名称", // 在 npm 官网上存在相同的名称则会报错无法上传，会提示你没有权限修改此库
"version": "0.1.0", // 版本，每次上传的版本号不能相同，所以每次上传都要手动升级版本号

 

配置 .npmignore

.npmignore 文件中设置忽略上传的文件夹，只有 package.json、README.md 才是需要发布的。README 中写清组件的用法、参数、如何引用、事件等等。

src/
myComponents/
public/
vue.config.js
babel.config.js

发布

首先 npmjs.com 上需要有一个账号

如果设置了淘宝镜像需要改回来，npm config set registry http://registry.npmjs.org

最后npm publish发布组件到 npm 官网

 

posted on 2022-05-09 18:41  刘世涛6192  阅读(238)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 刘世涛6192
Powered by .NET 8.0 on Kubernetes