从零开始撸一个Vue3.0组件库-并上传到NPM上

创建Vue3.0项目

我们使用Vue-CLI来创建一个新的Vue项目，并起名为like-ui。

npm install -g @vue/cli
vue create like-ui

项目的基础配置选择如下：Babel、CSS预处理器、ESLint。Vue版本选择3.0

WX20210917-143854@2x

在选择CSS预处理器版本时，我选择SCSS（dart-sass），因为node-sass是出奇的难装，有过经历的都知道。

WX20210917-143923@2x

最后这是我的所有选择配置。

编写组件

可以看到项目的src/components文件夹下面已经有一个HelloWorld组件，让我们修改一下目录结构。把HelloWorld组件移入新创建的li-hello-world文件夹中并改名为index.vue。

然后再写一个组件，新创建文件夹li-button，创建index.vue，简单写个按钮组件。

<template>
  <div>
    <slot/>
  </div>
</template>

<style scoped>
  div {
    width: 150px;
    height: 40px;
    line-height: 40px;
    border: 2px solid #999;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: blue;
  }
</style>

到这，我们就有两个组件了。

注意：要把HelloWorld组件中的name属性去掉，后面我们统一采用li-xxx的文件夹名称来给组件进行命名。也可以不去掉，后面在引入组件时注意使用组件的name的而不是文件夹名。

组件安装入口文件

在src/components下创建index.js文件

import liButton from './li-button/index.vue';
import liHelloWorld from './li-hello-world/index.vue';

const components = {
  liButton,
  liHelloWorld,
};

function install(Vue) {
  const keys = Object.keys(components);
  keys.forEach((name) => {
    const component = components[name];
    Vue.component(component.name || name, component);
  });
}

export default {
  install,
  ...components,
};

后面所有新增加的组件都要在index.js进行引入安装

测试组件

接下来测试我们的两个组件是否能跑通

在src/main.js中引入组件

import { createApp } from 'vue';
import App from './App.vue';

import likeUI from './components/index';

createApp(App).use(likeUI).mount('#app');

引入好后，在App.vue中进行使用

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <liHelloWorld msg="Hello 傲夫靠斯" />
  <li-button>点我-傲夫靠斯</li-button>
</template>

然后，运行项目

npm run serve

可以看到页面，组件展示正常

打包发布

打包组件库

接下来，把写好的组件打包，并发布到npm上，让别人也能使用

在package.json文件script中增加build:like-ui命令，来打包我们的组件库

{
  "name": "like-ui",
  "version": "0.1.0",
  "private": false,
  "main": "lib/like-ui.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:like-ui": "vue-cli-service build --target lib --dest lib src/components/index.js"
  },
  ...
}

将private设置为false，否则无法发布到npm
将name修改为我们的组件库的名字
version为组件库的版本，每次打包发布注意都要更新
增加main为lib/like-ui.umd.min.js，我们组件库打包好的入口文件。
build:like-ui命令中
- --target 允许将项目中的任何组件构建为库或Web组件。
- --dest 打包后的输出文件夹
- 最后就是我们组件库的入口文件src/components/index.js

配置完成后，进行打包

npm run build:like-ui

打包成功后

发布到npm

登陆NPM，输入账号密码

npm login

发布

npm publish

发布成功后可以到www.npmjs.com/查看

在实际项目中使用

安装组件库

npm install like-ui

引入使用，main.js

import { createApp } from 'vue'
import App from './App.vue'

import likeUI from 'like-ui'
import 'like-ui/lib/like-ui.css'

createApp(App).use(likeUI).mount('#app')

App.vue

<template>
  <li-button>like UI</li-button>
  <li-hello-world msg="hello like UI"></li-hello-world>
</template>

最后

学会的小伙伴儿，给个点赞、评论、关注把。

获取源码：点我点我，回复like-ui