vue封装（简单）自定义组件使用

1、使用 webpack-simple 模板，没有vue-router的中间件，不需要路由时推荐使用，同时 webpack-simple 没有格式的检测，

新建项目

1. vue init webpack-simple
2. 然后再 npm install 初始化

在新建的项目的src目录下新建一个目录（components）

目录下存放自定义组件

组件封装好后在组件目录（components）下新建一个index.js文件，为组件库的入口文件

src/components/index.js

// 导入封装的组件
import xxBtn from './xx-btn.vue'
//安装组件
const components = {
  install(Vue) {
    Vue.component(
      'xxBtn', xxBtn //  key 名，value 组件
    )
  }
}
// 判断环境支持挂载组件
if(typeof windwo !== 'undefined' && window.Vue) {
  window.Vue.use(comment)
}
 
// 导出组件库
export default xxBtn 

修改package.json文件

 
{
  "name": "xx-btn", // 发布的模块名称，发布线上后，可以通过npm install xx-btn来引用该模块
  "description": "test npm", // 组件库描述
  "version": "1.0.0", // 版本号
  "author": "xxx", // 作者
  "license": "MIT", // 代码授权许可
  "private": false, // 公开项目，因为组件包是公用的，所以private要改为false
  
  "scripts": { // 运行命令
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  
  "main": "dist/xx-btn.min.js", // 打包后的入口文件，若不配置，则在其他项目中就无法使用import xx from '包名'来引入组件，只能以包名作为起点来指定相对路径
  "keywords": [ // 关键词，可以通过npm搜索你填写的关键词找到你的模块
    "components"
  ],
  
  "files": [ // 指定打包后发布到npm的文件，没指定则不传，package.json是默认上传的
    "dist",
    "src/components"
  ],
  //可以省略
  "bugs": { // 填写一个bug提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽
    "url": "https://github.com/xx/xx-btn/issues"
  },
  "repository": { // 指定代码所在的仓库地址
    "type": "git",
    "url": "https://github.com/xx/xx-btn.git"
  },
  ...
}

修改webpack.config.js文件

导出打包后的组件

entry: "./src/components/xx-btn/xx-btn.js", // 入口文件，之前自定义的js文件
output: { // 修改输出文件到 dist 下 
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: "xx-btn.min.js", // 生成的文件名，与之前在webpack中打包后的入口文件名一样
  library: "xx-btn", // 指定的使用require时的模块名
  libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
  umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},

编译打包，生成的文件在dist目录下

npm run build

测试插件

npm pack
在当前目录下生成一个 xx-btn-1.0.0.tgz 的文件

打开一个vue项目，将压缩文件放到项目某个目录下，执行命令
npm install 路径\xx-btn-1.0.0.tgz
路径是指压缩包所在的绝对路径，文件名必须是压缩包的全名
在项目中就和平时使用其他组件一样 可以直接使用了

import xxx from "xxx";
  components: {
    xxx,
  },

想要发布到npm，可以去尝试