如何上传Vue组件到npm库中

介绍

组件库在当下非常流行。
但是使用组件库和发布组件库就是两回事了
今天我会详细的介绍如何在npm发布自己的组件库，并在项目中使用

---

创建组件库，我们今天借助vue-sfc-rollup这个npm包工具，
这是一个对于我们创建组件非常有用的工具
该软件包为项目创建了一组文件。如其文档
)所述，其创建的文件包括以下内容（SFC代表“单个文件组件”）

• 压缩rollupjs配置
• 带有build / dev脚本和依赖项的相应package.json文件
• 最小的babel.config.js和.browserslistrc文件用于转译
• 打包SFC时汇总使用的包装器
• 样本SFC以启动开发
• 一个示例使用文件，可用于在开发过程中加载/测试您的组件/库

开始

首先全局安装vue-sfc-rollup：

npm install -g vue-sfc-rollup

全局安装后，从命令行进入要在其中放置库项目的目录。进入该文件夹后，运行以下命令来初始化项目。

sfc-init

在提示中选择以下选项：

✔ Is this a single component or a library? › Single Component
✔ What is the npm name of your component? (你的npm包名字)test-vue-component
✔ What is the kebab-case tag name for your component? … test-vue-component
✔ Will this component be written in JavaScript or TypeScript? › JavaScript
✔ Enter a location to save the component files: … ./test-vue-component

配置完成后，进入对应文件夹进行依赖下载

cd ./test-vue-component
npm install

完成后，您可以在选择的编辑器中打开该文件夹。

如上所述，为我们构建了一个示例Vue组件。您可以在/src/lib-components文件夹中找到它。要查看此组件的外观，可以运行npm run serve并导航到http：// localhost：8080 /

发布自带示例包进行测试

npm build

如文档所述：

运行在3个编译后的文件生成脚本结果dist目录，每个的main，module和unpkg性能在你的package.json文件中列出。生成这些文件后，就可以开始了！

运行此命令后，我们准备发布到NPM。在执行此操作之前，请确保您已在NPM上拥有一个帐户（如果需要，可以在此处进行操作）。

接下来，我们需要通过运行以下命令将您的帐户添加到您的终端：

npm adduser

了解package.json

当发布到npm时，我们使用package.json文件来控制发布哪些文件。如果您查看package.json最初设置项目时创建的文件，则会看到类似以下内容的内容：

"main": "dist/test-vue-component.ssr.js",
"browser": "dist/test-vue-component.esm.js",
"module": "dist/test-vue-component.esm.js",
"unpkg": "dist/test-vue-component.js",
"files": [
    "dist/*",
    "src/**/*.vue"
],

下面的部分files告诉npm发布dist文件夹中的所有内容以及文件夹中的所有.vue文件src。您可以根据需要进行更新，但是我们将保留本教程的内容。

因为我们没有使用package.json文件进行任何更改，所以我们准备发布了。为此，我们只需要运行以下命令：

npm publish

就是这样！恭喜你！您现在已经发布了Vue组件库。您可以转到npmjs.com并在注册表中找到它

在vue项目中使用

npm instal test-vue-component
import testVueComponent from 'test-vue-component'
components:{
testVueComponent
}

在codesandbox查看

这样我们就发布了测试组件以及引入了测试组件

其他

编译css以及img，这里需要引入对应的插件

"rollup-plugin-css-porter": "^1.0.2",
"rollup-plugin-img": "^1.1.0"