Vue组件封装上传npm

A Vue.js project

构建项目

├── src/                           // 源码目录
│   ├── ejtColmenu.vue             // 列控制组件代码
│   ├── ejtPagination.vue          // 分页组件代码
│   ├── index.js                   // 挂载插件
├── index.html                     // 入口html文件
├── package.json                   // 项目配置
├── package-lock.json              //
├── README.md                      // 项目描述
├── webpack.config.js              // 打包配置

开发组件并在src/index.js中挂在

发布到npm

修改 webpack.config.js 文件

module.exports = {
    entry: './src/index.js',
    output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'ejtPlugin.js', //打包后名称
    library: 'ejtPlugin', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  }...

修改 package.json 文件

// 发布开源需要将这个字段改为 false
"private": false,

// import 时检索的路径
"main": "dist/ejtPlugin.js",

发布

npm run build                // 打包项目
npm login                    // 登陆
npm publish --access=public  // 发布

组件使用

安装组件

npm install ejt-plugin   // npm 安装
yarn add ejt-plugin      // yarn安装

引入组件 App.vue 中

import Vue from 'vue'
import ejtPlugin from 'ejt-plugin'
Vue.use(ejtPlugin)

使用组件-标签方式

<njt-colmenu></njt-colmenu>
<njt-pagination></njt-pagination>

组件参数文档.