JS:NPM发布一个Vue组件UI库并使用CDN引入使用

简介: JS:NPM发布一个Vue组件UI库并使用CDN引入使用

NPM CDN : https://www.jsdelivr.com/

一、发布一个Vue组件

1、使用webpack-simple 模板项目初始化

vue init webpack-simple moment-ui
cd moment-ui
cnpm i

2、新建组件

将新建的组件放在plugin文件夹中

src/plugin/Button.vue

<template>
  <div>Button</div>
</template>
<script>
export default {
  name: "MoButton",
};
</script>
<style lang="scss" scoped>
</style>

3、注册组件

src/plugin/index.js

import Button from "./Button.vue";
const components = [Button];
// 注册组件
const install = function (Vue, options) {
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};
/* 支持使用标签的方式引入 Vue是全局变量时,自动install */
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  ...components,
};

4、修改配置项

webpack.config.js

module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry:
    process.env.NODE_ENV == "development"
      ? "./src/main.js"
      : "./src/plugin/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "moment-ui.js",
    library: 'moment-ui', // 指定的就是你使用require时的模块名
    // CMD只能在 Node 环境执行,AMD 只能在浏览器端执行,UMD 同时支持两种执行环境
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  // 此处省略其他默认配置
}


5、修改package.json


// 设置为公开包

"private": false,


// 检索路径

"main": "dist/moment-ui.js",



6、发布到npm


如果没有账号注册 https://www.npmjs.com/


# 登录

npm login


# 发布

npm publish



主页:https://www.npmjs.com/package/moment-ui


二、使用示例

1、CDN方式使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment-ui@1.0.2/dist/moment-ui.js"></script>
  </head>
  <body>
    <div id="app">
      <mo-button></mo-button>
    </div>
    <script>
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

2、Vue项目中使用

# 创建测试项目
vue init webpack-simple vue-demo-test
cd vue-demo-test
cnpm -i
# 下载测试, 淘宝等镜像可能没有及时同步,使用npm地址
npm install moment-ui --save

src/main.js

// src/main.js
import Vue from 'vue'
import MomentUI from 'moment-ui'
import App from './App.vue'
// 注册
Vue.use(MomentUI)
new Vue({
  el: '#app',
  render: h => h(App)
})

src/App.vue

<template>
  <div id="app">
    <mo-button />
  </div>
</template>
<script>
export default {
  name: "app",
};
</script>
<style>
</style>

参考

vue组件篇(2)—封装组件并发布到npm

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
13天前
|
缓存 搜索推荐 索引
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
在鸿蒙应用开发中,Image 组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
61 7
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
|
5天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
15天前
|
自然语言处理 开发者
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容,你将学习如何使用 Text 组件显示文本、格式化文本样式,以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。
45 4
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
|
27天前
|
JavaScript 安全 测试技术
vue封装组件发布到Npm
【10月更文挑战第17天】
|
22天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
20 4
|
1月前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
25天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
1月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
110 0
|
1月前
Element-UI组件的使用
【10月更文挑战第1天】
34 0
|
29天前
|
云安全 网络安全 CDN
阿里云CDN遇到攻击?别慌,教你如何应对!
阿里云CDN遇到攻击?别慌,教你如何应对!

推荐镜像

更多