devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

npm（六）：使用Vue CLI构建 lib 发布npm包全流程_vue-cli-service build

作者：小丑西瓜9 | 2024-02-07 17:53:56

赞

踩

vue-cli-service build

目录

一. 环境准备

1.1 关于一些Vue CLI 版本和node版本要求，你可以看一下官方文档：

1.2 安装Vue CLI

二. 初始化项目

2.1 创建项目

2.2 修改 package.json

2.3 打包脚本配置

2.3.1 构建目标 | Vue CLI

2.3.2 添加一个main字段设置出口文件路径

2.3.3 scripts添加一个打包脚本配置，通过下面的命令将一个单独的入口构建为一个库：

2.4 组件导出

2.4.1 src/components/HelloWorld/index.js 文件，实现对外提供引用

npm脚本对应为：

2.4.2 整合所有的组件，对外导出，即一个完整的组件库

npm脚本对应为：

2.5 初始打包测试

三. 组件编写与调试

3.1 测试全局注册Vue插件是否成功

3.2 样式

3.2.1 组件样式是否是起到了作用域隔离？

3.2.2 防止外部样式意外修改组件内样式

3.2.3 如何修改组件内部样式？

3.2.4 如何使用 less、sass、stylus

3.2.5 如何向所有 Sass/Less 样式传入共享的全局变量

3.3 静态资源

3.3.1 添加 image、iconfont 等静态资源

3.3.2 引用静态资源

3.3.3 查看结果

3.3.4 解决图片资源显示问题

3.3.5 问题解决：

四. 发布

五. 使用

5.1 引入

5.2 使用

系列文章：

npm（一）：从npm CLI说起

npm（二）：剖析 package.json

npm（三）：npm包发布、更新、废弃

npm（四）：剖析npm包版本管理机制

npm（五）：组件发布npm包全流程 (使用rollup打包工具)

npm（六）：使用Vue CLI构建 lib 发布npm包

剖析npm依赖管理

webpack高级应用篇（十二）：创建 library

一. 环境准备

1.1 关于一些Vue CLI 版本和node版本要求，你可以看一下官方文档：

安装 | Vue CLI

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。