搭建vue组件，并发布到npm

我将以一个vue2.0的组件为例，为大家详细的讲述下组件创建以及发布的过程

目录

创建一个vue项目

修改项目目录

开始开发vue组件 

本地测试组件 

打包编译 

执行编译命令

发布前的准备工作

登录到私服 

发布到私服

引用测试 

本地调试npm包

---

创建一个vue项目

vue create vue-loading-icon

按照脚手架提示进行安装 

 显示如下信息即为安装成功

修改项目目录

在项目根目录下创建packages文件夹

将src文件夹改名为examples

修改vue.config.js文件，若根目录下没有此文件，请手动添加

1.  
   const { defineConfig } = require('@vue/cli-service');
2.  
   const path = require('path');
3.  
    
4.  
   function resolve(dir) {
5.  
   return path.join(__dirname, dir)
6.  
   }
7.  
    
8.  
   module.exports = defineConfig({
9.  
   transpileDependencies: true,
10.  
    pages: {
11.  
    index: {
12.  
    entry: 'examples/main.js',
13.  
    template: 'public/index.html',
14.  
    fileName: 'index.html'
15.  
    }
16.  
    },
17.  
    chainWebpack: config => {
18.  
    config.module
19.  
    .rule('js')
20.  
    .include.add(resolve('packages')).end()
21.  
    .use('babel').loader('babel-loader').tap(options=>{return options});
22.  
    },
23.  
    // css: { extract: false }
24.  
    })

开始开发vue组件 

在packages文件夹下写你想要开发的组件源码

我的packages的目录结构是这样的

LoadingA/main.vue如下：

1.  
   <style scoped lang="less">
2.  
   .loader01 {
3.  
   box-sizing: border-box;
4.  
   width: 56px;
5.  
   height: 56px;
6.  
   border: 8px solid var(--color);
7.  
   border-right-color: transparent;
8.  
   border-radius: 50%;
9.  
   animation: loader-rotate 1s linear infinite;
10.  
    }
11.  
    .loader01::after {
12.  
    content: "";
13.  
    width: 8px;
14.  
    height: 8px;
15.  
    background: var(--color);
16.  
    border-radius: 50%;
17.  
    position: absolute;
18.  
    top: -1px;
19.  
    left: 33px;
20.  
    }
21.  
     
22.  
    @keyframes loader-rotate {
23.  
    0% {
24.  
    transform: rotate(0);
25.  
    }
26.  
    100% {
27.  
    transform: rotate(360deg);
28.  
    }
29.  
    }
30.  
    </style>
31.  
     
32.  
    <template>
33.  
    <div class="loader01" :style="pStyle"></div>
34.  
    </template>
35.  
     
36.  
    <script>
37.  
    export default {
38.  
    props: {
39.  
    color: String,
40.  
    speed: Number,
41.  
    },
42.  
    data() {
43.  
    return {
44.  
    pStyle: {
45.  
    '--color': '#2595f1',
46.  
    },
47.  
    };
48.  
    },
49.  
    mounted() {
50.  
    this.setStyle();
51.  
    },
52.  
    methods: {
53.  
    setStyle() {
54.  
    if (this.color) this.$set(this.pStyle, "--color", this.color);
55.  
    },
56.  
    },
57.  
    };
58.  
    </script>

 LoadingA/index.js如下：将您的组件注册

1.  
   import LoadingA from './src/main.vue';
2.  
    
3.  
   DsTree.install = function(Vue) {
4.  
   Vue.component(LoadingA.name,LoadingA);
5.  
   }
6.  
    
7.  
   export default LoadingA;

批量导出组件

packages/index.js如下：

1.  
   import LoadingA from './LoadingA/index.js';
2.  
   import LoadingB from './LoadingB/index.js';
3.  
    
4.  
   let components = [
5.  
   LoadingA,
6.  
   LoadingB
7.  
   ]
8.  
    
9.  
   const install = function (Vue) {
10.  
    if (install.installed) return;
11.  
    components.map(component=> Vue.component(component.name,component))
12.  
    }
13.  
    if (typeof window !== 'undefined' && window.Vue) {
14.  
    install(window.Vue);
15.  
    }
16.  
     
17.  
    export default {
18.  
    install,
19.  
    LoadingA,
20.  
    LoadingB
21.  
    }

本地测试组件 

接下来，就可以在本地进行组件的测试了，您可以在您的examples文件夹下，创建一个vue文件，然后引用此组件，进行组件的测试，我是在App.vue中引用了组件

App.vue内容如下：

1.  
   <template>
2.  
   <div id="app">
3.  
   <div class="load-list">
4.  
   <div class="load-box load01">
5.  
   <div class="name">loading-A</div>
6.  
   <div class="demo">
7.  
   <loading-a/>
8.  
   </div>
9.  
   </div>
10.  
    </div>
11.  
    </div>
12.  
    </template>
13.  
     
14.  
    <script>
15.  
     
16.  
    import LoadingA from '../packages/src/LoadingA.vue'
17.  
    export default {
18.  
    name: 'App',
19.  
    components: {
20.  
    LoadingA
21.  
    }
22.  
    }
23.  
    </script>
24.  
     
25.  
    <style>
26.  
    *{
27.  
    margin: 0;
28.  
    padding: 0;
29.  
    box-sizing: content-box;
30.  
    }
31.  
    .load-box{
32.  
    width: 200px;
33.  
    height: 132px;
34.  
    border: solid 1px #cdcdcd;
35.  
    }
36.  
    .load-box .name{
37.  
    width: 100%;
38.  
    text-align: center;
39.  
    border-bottom: solid 1px #cdcdcd;
40.  
    height: 32px;
41.  
    line-height: 32px;
42.  
    flex-shrink: 0;
43.  
    flex-flow: 0;
44.  
    }
45.  
    .load-box .demo{
46.  
    height: 100px;
47.  
    display: flex;
48.  
    justify-content: space-around;
49.  
    align-items: center;
50.  
    }
51.  
     
52.  
    </style>

打包编译 

本地测试完成够，就可以进行打包编译了，请您在package.json文件中的script中增加一行代码

"build-lib": "vue-cli-service build --target lib --name load --dest lib packages/index.js"

执行编译命令

接下来，我们执行下编译命令

npm run build-lib

 等待命令执行完成后，项目根目录下会生成一个lib的文件夹

生成文件结构如下：

如果您想生成内联样式，则需要在vue.config.js中增加

css: { extract: false } 

还要在package.json中设置入口文件

"main": "lib/index.umd.min.js",

发布前的准备工作

首先，你需要确定你要发布的npm源

之后你需要在项目根目录下创建一个.npmignore的文件

文件中写明你要忽略的文件，一般保留只需要保留README.md,lib和package.json即可，我的文件是这样写的

1.  
   examples/
2.  
   packages/
3.  
   public/
4.  
   node_nodules/
5.  
   preview/
6.  
   vue.config.js
7.  
   postcss.config.js
8.  
   babel.config.js
9.  
   .gitignore
10.  
    jsconfig.json
11.  
    package-lock.json
12.  
    *.map

另外，你需要将你项目的package.json文件中的 private设置为false

private:false

编写README.md文件，这里边的内容是其他人引用你的包的使用说明哦

登录到私服 

npm login

根据命令提示，输入用户名，密码，以及绑定的邮箱

发布到私服

npm publish

 稍等几秒钟后，您就可以到npm官网上搜索下您发布的包啦。

到这里，整个发布流程就差不多了，但是您还是需要在做下引用测试哦

引用测试 

在项目中按照使用说明进行操作，安装依赖包,使用组件测试是否正常发布，并可用即可

本地调试npm包

在你的npm源码项目中，也就是vue-loading-icon这个项目根目录下执行

npm link

创建一个软链，相当于全局安装了一个 vue-loading-icon依赖

在测试项目根目录下，也就是 vue-comp-demo中执行

npm link vue-loading

执行上述操作后，在npm包中修改了内容，重新编译后，即可实时的反应到引用的项目下，无需发布到npm中，待调试完成后，就可以发不到npm上了 

这篇好文章是转载于：学新通技术网