1、新建一个空项目并运行
vue create test(项目名)
2、封装组件---在src目录下新建文件夹 package----用来存放要上传的组件
-
待封装的组件放到package目录下，可多个
image.png - 注意：(组件写好后最好先本项目里引用一下，看组件是否显示成功)
- 在package目录下新建index.ts 利用Vue提供的公开方法install 配置注册组件，代码如下：
// 引用组件
import tqyButton from '@/package/tqy-button/index.vue'
import tqyInput from '@/package/tqy-input/index.vue'
//组件都写在这个数组中方便管理
const componentList = [tqyButton, tqyInput]
// 批量注册
const install = (Vue: any) => {
componentList.forEach(com => {
Vue.component(com.name, com)
})
}
// 暴露出去
export default install
3、组件打包
在test项目的配置文件package.json中添加一条脚本 "package": "vue-cli-service build --target lib ./src/package/index.ts --name tqy-ui --dest tqy-ui"
- --target lib 关键字 指定打包的目录
- --name 打包后的文件名字
-
--dest 打包后的文件夹名称
image.png
执行打包命令: npm run package
-
打包后 项目中生成一个 tqy-ui的文件（里面是打包后的js、css文件）
image.png
4、发布到npm
在tqy-ui文件夹下初始化一个package.json文件， 进入tqy-ui目录下，执行命令：npm init -y
-
执行完后后 tqy-ui目录下多出一个package.json文件
image.png -
package.json 配置组件的一些基本信息 可按照官方规范来配置
image.png
推送到npm仓库
- 注册npm账号（官网上注册）
- 设置npm源（大部分人为了下载速度快，用的淘宝镜像源，这里需要还原成npm仓库地址，否则可能有问题）
npm config set registry=https://registry.npmjs.org
- 添加npm用户，进入tqy-ui目录，执行命令：npm adduser 输入账号、密码等 (之前设置过得，可不用再次设置)
npm adduser
- 发布npm 执行命令
npm publish
- 注意：发布失败可能是名字重复，名字重复可在 tqy-ui/package.json里修改name
5、引用并使用
- 如果引用失败 又确实安装上了 ，在test/scr/shims-vue.d.ts中添加declare module 'tqy-ui';
declare module 'tqy-ui';
