使用Verdaccio创建一个本地私有库,并应用

安装verdaccio              npm install -g verdaccio

直接verdaccio启动  

 

 可以先右上角登录

 然后先使用 npm create vite@latest 然后创建属于自己的一个vue3项目   vite-project(随便起了个名)

npm i 一下

npm run dev  跑起来看看

然后创建下列文件夹

style/indsx/scss
.u-title {color: red;}

utitle/index.vue
<template><div class="u-title"><i class="icon"></i><em>{{ title }}</em></div></template><script lang="ts" setup>interface PropsType {title?: string;}const props = withDefaults(defineProps<PropsType>(), {title: "默认标题",});console.log(props);</script><style scoped lang="scss">@import "../style/index.scss";</style>

index.ts
import uTitle from "./utitle/index.vue"
import "./style/index.scss";import { App } from "vue";
const Components = {uTitle,
};
const registerComponents = (app: App<Element>) => {Object.keys(Components).forEach((key: any) => {app.component(key, (Components as any)[key]);});
};
export { uTitle };  //到时候提供局部引入
export default registerComponents;  //默认导出

 vite.config.ts配置添加一下

vite.config.ts
export default defineConfig({plugins: [vue()],build: {rollupOptions: {external: ["vue"], //将vue作为外部项目引入
            output: {globals: {vue: "Vue",},},},//库发布构建
        lib: {entry: "./packages/index.ts",name: "ums-ui",},},
})

 然后是package.json

package.json "name": "vite-project","private": false,"version": "0.0.2","type": "module","module": "./dist/vite-project.umd.cjs","main": "./dist/vite-project.js","description": "这是第一次的测试搭建自己的依赖ui库","exports": {".": {"import": "./dist/vite-project.js","require": "./dist/vite-project.umd.cjs"},"./*": "./*"},"files": ["dist/*"],"style": "./dist/style.css",

 npm run build

就会生成dist文件夹

直接发布      npm publish --registry http://localhost:4873

访问     http://localhost:4873   就有相应的包组件  

新建一个项目应用试试

1.  npm i ums-ui@latest --registry http://localhost:4873

2. 

3.