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>
参考
