首页 > 其他分享 >npm包 - 发布vue3组件

npm包 - 发布vue3组件

时间:2024-11-01 11:22:03浏览次数:1  
标签:npm vue v3tt app js build vue3 组件 import

npm包 - 发布vue3组件

 1. 创建VUE3项目

npm create vue

 

2. 在项目中创建 packages 文件夹,创建 index.js , 创建 components 文件夹,创建 PanelCard1.vue 

编辑 PanelCard1.vue

<template>
  <div style="width: 200px; height: 200px; background: grey">
    <button class="btn" @click="handleClick">ssssss</button>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const handleClick = () => {
      alert("sssssssssss,我被点击了,ssssssssssss");
    };
    return {
      handleClick,
    };
  },
});
</script> 
<style scoped>
.btn {
  background: darkgoldenrod;
}
</style>

 

编辑 index.js

import PanelCard1 from './components/PanelCard1.vue'
const myPlugin = {
  install(app) {
    // 配置此应用
    app.component('PanelCard1', PanelCard1)
  }
}
export default myPlugin 

 

3. 创建 build 文件夹,创建 lib.config.js 文件

import {defineConfig} from "vite";
import {resolve} from 'path';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  build: {
    outDir: 'dist',
    lib: {
      entry: resolve(__dirname, "../packages/index.js"),
      name: 'v3tt',
      fileName: (format) => `v3tt-${format}.js`//umd es
    },
    rollupOptions: { //打包
      external: ['vue'],//不打包项
      output: {
        //UMD模式下为那些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  plugins: [
    vue({
      include: [/\.vue$/], //必须打包 包含.vue文件
    })
  ]
})

 

4. 修改src/main.ts

import './assets/main.css'

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

const app = createApp(App)

app.use(createPinia())

import myPlugin from "../packages/index.js";
app.use(myPlugin)


app.mount('#app')

 

 

修改 App.vue

<template>
  <div>
    <PanelCard1></PanelCard1>
  </div>
</template>
<script>
import {defineComponent} from 'vue';

export default defineComponent({
  setup() {
 
  }
})
</script> 

 

5. 修改 package.json

{
  "name": "v3tt",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "author": "lihongyuan",
  "description": "封装vue3组件库",
  "keywords": [
    "vue3",
    "封装组件库"
  ],
  "main": "dist/v3tt-es.js",
  "style": "dist/style.css",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "build:lib": "vite build --config ./build/lib.config.js"
  },

 

6. 编译

npm run build:lib

 

7. 测试 

可使用 本地link方式测试,参考:https://www.cnblogs.com/1285026182YUAN/p/17097318.html

8. 发布

参考:https://www.cnblogs.com/1285026182YUAN/p/17097318.html

9. 其他项目引用 

npm install v3tt

 

main.ts中使用

import v3tt from "v3tt";
import "v3tt/dist/style.css";

app.use(v3tt);

 

页面中使用

<template>
  <div> 
<PanelCard1></PanelCard1>
  </div> </template>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end

引用:https://blog.csdn.net/qq_19650329/article/details/136910074

 

标签:npm,vue,v3tt,app,js,build,vue3,组件,import
From: https://www.cnblogs.com/1285026182YUAN/p/18519790

相关文章

  • Vue3 + Vue Cli 搭建项目(详细)
     搭建:VueCLI5+Vue3+AntDesignVue3VueCLI5:是vue+大量的第三方组件;Vue3:是页面开发基于Vue;AntDesignVue3:是基于Vue3的UI组件;关于UI还有CSS的Bootstrap。 1.本地环境准备按照NodeJS得到npm,使用npm安装vuecli(脚手架),使用vuecli创建项目。VueCLI5......
  • Vue 组件开发:深入理解与实践
    在Vue.js的强大生态系统中,组件开发是构建高效、可维护和可复用用户界面的核心。本文将带你深入了解Vue组件开发的方方面面,从基础概念到实际应用,让你掌握这一关键技能。一、Vue组件基础概念1.什么是组件组件是Vue.js中可复用的最小单位,它将HTML、CSS和JavaScri......
  • Vue组件的动态加载和卸载
            组件的动态注册还是比较容易的,使用<component:is="组件id"></component>即可,但动态卸载有难度,相关文献较少。不过,如果巧妙使用vnode,就能轻松实现!       下图展示了4个代表不同文档材料的Vue组件。为简化起见,每个组件用一个DIV元素表示,其内容为一张图......
  • vue3 类组件装饰器模式配置
    2024年10月31日vue3支持装饰器模式插件借助插件vue-facing-decorator实现类组件装饰器转换npminstall--save-devvue-facing-decorator@rollup/plugin-babel@babel/plugin-proposal-decorators@babel/plugin-proposal-class-propertiesvite.config.ts配置//第一种支......
  • 鸿蒙开发:ArkTS SwipeRefresher 组件
    一、基本概念功能概述SwipeRefresher组件在ArkTS5.0中是一种用于实现下拉刷新功能的重要组件。当用户在屏幕上对包含该组件的区域进行下拉操作时,如果下拉的距离和速度满足一定条件,就会触发一个刷新事件,通常用于重新加载数据,如刷新列表内容、获取最新的信息等。用户体......
  • vue3知识点:reactive对比ref
    @目录二、常用CompositionAPI5.reactive对比ref本人其他相关文章链接二、常用CompositionAPI问题:啥叫“组合式API”?答案:请看官方文档:https://v3.cn.vuejs.org/guide/composition-api-introduction.html5.reactive对比ref从定义数据角度对比:ref用来定义:基本类型......
  • vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
    @目录一、vue2、vue3、vue-cli版本、vue-router版本的关联关系1.说明2.不同版本的vue对应的vue-router版本和vuex版本二、创建Vue3.0工程1.使用vue-cli创建2.使用vite创建一、vue2、vue3、vue-cli版本、vue-router版本的关联关系1.说明1.VueCLI4.5以下,对应的是Vue2;Vue......
  • Vue组件化-插槽Slot
    认识插槽Slot如何使用插槽slot?插槽的默认内容多个插槽的效果具名插槽的使用◼事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用具名插槽:具名插槽顾名思义就是给插槽起一个名字,<slot>元素有一个特殊的attribute:name;一个不带name的slot,会带有隐......
  • Vue3+Elementplus+Univer-Sheet实现在线excel及其需要注意的点
    1、准备项目环境Vue3自行准备node.js环境2、ElementPlus官网官网安装教程自行参照官网3、Univer插件官网1)官网网址2)开始直接点击GetStarted侧边栏点击  后面直接按照教程走即可 4、配置插件需要注意如果上述插件包已经下载并成功引入vue......
  • 微信小程序 video 组件高度自适应实现
    偶然发现微信小程序的video无法像Image对象那样设置mode='widthFix'实现宽度100%高度自适应尝试了各种网上的方案都不可行。要实现高度自适应需要2个条件:知道视频的真实宽,高设置css的aspect-ratio与height在小程序内上传视频调用wx.chooseMedia获取视频......