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

  Button



export default {
  name: "MoButton",
};

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方式使用

  
    
    
    Document
    
    
  

  
    
      
      
      
    

    
      new Vue({
        el: "#app",
      });
    
  

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

  
    
  



export default {
  name: "app",
};

参考 vue组件篇（2）—封装组件并发布到npm