组件封装及发布（npm）使用

November 08, 2023 3559

1、初始化项目 :

1
vue create 项目名

2、src目录建立package文件夹，用来存放我们的组件

3、创建组件文件夹，并且编写组件内容

1
2
3
4
5
6
7
8
9
10
11
12
 这里的name,就是我们使用组件时的标签
 name: 'Hellow',
 props: {
   buttonColor: {
	type: String,
	default: ''
},
   buttonBgc: {
       type: String,
       default: ''
   }
 },

​

4、验证是否成功

  1. 在app.vue中将刚才写好的switch组件引入(或者main.js引入)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <template>
      <wmr :buttonColor="'#fff'" :buttonBgc="'red'"></wmr>
    </template>

    <script>
    import Wmr from './package/hellow/index.vue';

    export default {
      name: 'App',
      components: {
        Wmr
      }
    }
    </script>

5、页面如果可以实现, 证明写的没有问题, 下一步是我们将自己的组件打包发布到npm上面

  1. 首先在之前创建好的package文件夹下创建统一入口index.js

  2. 开发插件, 使用install 方法

    1
    2
    3
    4
    5
    import Hellow from "./hellow/index.vue";
    Hellow.install = function(Vue) {
        Vue.component(Hellow.name, Hellow);
    };
    export default Hellow;

6、将组件库进行打包

  1. 打开package.json文件, 增加打包命令lib

    1
    2
    3
    4
    5
    6
    "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint",
       "lib": "vue-cli-service build --target lib --name buttons --dest lib ./src/package/index.js"
     },

  2. 在终端输入 npm run lib ,结果: 会在项目中输出一个静态文件夹，文件夹名（lib）及打包后静态文件名（buttons）都是由打包命令配置

7、配置package.json

正常的话页面会展示咱们的组件。现在是不是有点element-ui的使用样子了。但是element的引入方式是 import kyswitch from “kyswitch “ 这个怎么做到呢？ 接下来咱们继续配置package.json

  1. 基础配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
       
    "name": "kyswitch", // npm packages 的包名字
    "version": "1.0.4", // 当前库的版本 每次更新npm库版本的时候需要修改
    "private": false, // 这个是私有还是公有
    "author": "Mr.xu",
    "repository": "", // 这个是源码地址，一般是个git地址
    // 重要的来了，main是库的入口文件。为什么我们能在 main.js中直接 这么引用呢，
    // 就是因为有 main这个字段。
    // 否则我们得 import kyswitch from "kyswitch/lib/kyui.common.js" 这样引入
    "main": "lib/kyui.common.js",
    "style": "lib/kyui.css", // 样式的入口文件
    "keywords": [  // 这个是关键字 方便查找我们的组建
      "vue开关",
      "switch"
    ],
    "files": [  // 上传哪些文件到npm的白名单
      "lib",
      "package"
    ]

  2. 发布指定文件夹（我们发布组建的时候只希望发布lib package 文件夹其他的不需要，这怎么设置呢，有两种方式）

    第一种是package.json配置白名单 只上传哪些，上面有提到（白名单）

    第二种在根目录建立文件夹.npmignore，这个叫黑名单是告诉哪些不要上传（黑名单）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    .DS_Store
    node_modules/
    examples/
    packages/
    public/
    src/
    vue.config.js
    babel.config.js
    *.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

8、注册npm账号

  1. 再发布之前得需要有npm的账号，去注册一个账号，之后再项目根目录终端：注意如果你是注册了淘宝镜像，请先切回源镜像npm ：npm config set registry https://registry.npmjs.org

    1
    2
    3
    4
    npm login
    username:
    password:
    email:

  2. 输入完成之后 检查一下有没有登录成功。终端输入下面命令 会返回你的账号，说明登录成功

    1
    npm whoami

  3. 执行命令，将组件发布到npm

    1
    npm publish

  4. 发布成功了，等2-3分钟，在npm官网刷新一下看看能不能看到自己的库（Packages项）

9、上传成功后如何在别的项目中使用

打开终端 输入命令 cnpm install –save wmr_buttonss依赖库、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <wmr :buttonColor="'#fff'" :buttonBgc="'green'"></wmr>
</template>

<script>
import Wmr from 'wmr_buttonss';
import 'wmr_buttonss/lib/buttons.css'

export default {
  name: 'App',
  components: {
    Wmr
  }
}
</script>

10、注意点

  1. npm切换淘宝镜像下载包的时候,要确保cnpm中包是否更新

    1
    2
    3
    https://npmmirror.com/
    全名搜索名称
    点击sync同步更新