npm制作属于自己的组件库

1.组件位置( /packages )
遵守一个组件一个文件夹规则
目录结构如下

组件内的index是按需引入。packages内的index是全部引入。

各个文件代码如下:

/packages/cad/src/main.vue

<template>
  <div>
    这里是一个组件
  </div>
</template>
<script>
  export default {
    name:"Cad"
  }
</script>
====================================
/packages/cad/index.js

import Cad from './src/main';

Cad.install = function(Vue) {
  Vue.component(Cad.name, Cad);
};

export default Cad;
====================================
/packages/index.js

import Cad from './cad/index.js';
import Uve from './uve/index.js'
const components = [
    Cad,Uve
]

const install = function(Vue) {
    components.forEach(component => {
      Vue.component(component.name, component);
    });
};

  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
  }

export default { 
    Cad,
    install,
    Uve
}

2.修改package.json配置文件

其中:
name:包的名字
version:版本号
private:权限(需要false)
main:包打包后的入口文件
homepage:网站
description:简介
keywords:关键词
重点: scripts中的 lib
其字段分别为打包模式,包名,打包到哪儿去,打包的入口文件

3.操作流程
npm login //登录
npm run lib //打包
npm publish //上传

4.注意事项
需要创建.npmignore文件过滤不必要的文件.
每次上传前需要打包.

5.让css文件不单独打包
需创建vue.config.js文件
module.exports = { css:{ extract:false }}

整体测试项目模板:https://github.com/WishMelz/npmPublish

发表评论

电子邮件地址不会被公开。 必填项已用*标注