综合技术

手把手教你封装 Vue 组件并使用 NPM 发布

微信扫一扫,分享到朋友圈

手把手教你封装 Vue 组件并使用 NPM 发布
0

Vue 开发插件

我们可以先查看Vue的插件的 开发规范

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:

ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni

import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 
Vue.use(UniSoftUI);

构建一个 Vue 项目

开发组件我们使用 webpack-simple 模板:

vue init webpack-simple 

ps: 这里我选择了 use sass 因为之后开发组件会用到

目录结构如图:

├── src/                           // 源码目录
│   ├── packages/                  // 组件目录
│   │   ├── switch/                // 组件(以switch为例)
│   │   ├── uni-switch.vue        // 组件代码
│   │   ├── index.js               // 挂载插件
│   ├── App.vue                    // 页面入口
│   ├── main.js                    // 程序入口
│   ├── index.js                   // (所有)插件入口
├── index.html                     // 入口html文件

开发单个组件:

先看一下目标效果:

开始开发:

在 packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码,继续在 switch 文件夹中新建 uni-switch.vue 和 index.js 文件

uni-switch.vue 组件:

  
export default { name: "UniSwitch", data() { return {} }, props: { value: { type: [Boolean, String, Number], default: false }, activeValue: { type: [Boolean, String, Number], default: true }, inactiveValue: { type: [Boolean, String, Number], default: false }, disabled: { type: Boolean, default: false } }, computed: { checked() { return this.value === this.activeValue; } }, methods: { handleChange(value) { this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue); } } }

index.js:

//  UniSwitch 是对应组件的名字,要记得在 moor-switch.vue 文件中还是 name 属性哦
import UniSwitch from './UniSwitch.vue';
UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
export default UniSwitch;

好了基本完成了,但是为了将所有的组件集中起来比如我还有 select、 input、 button 等组件,那么我想要统一将他们放在一个文件这中便于管理

所以在 App.vue 同级目录我新建了一个 index.js 文件

import UniSwitch from './packages/switch/index';
import UniSlider from './packages/slider/index';
import UniNumberGrow from './packages/number-grow/index';
import './common/scss/reset.css'
// ...如果还有的话继续添加

const components = [
  UniSwitch,
  UniSlider,
  UniNumberGrow
  // ...如果还有的话继续添加
]

const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  UniSwitch,
  UniSlider,
  UniNumberGrow
  // ...如果还有的话继续添加
}

好了到这里我们的组件就开发完成了;下面开始说怎么打包发布到 npm 上

发布到 npm

打包之前,首先我们需要改一下 webpack.config.js 这个文件;

// ... 此处省略代码
const NODE_ENV = process.env.NODE_ENV
module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
  output: {
    // 修改打包出口,在最外级目录打包出一个 index.js 文件,我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'custom-ui.js',
    library: 'custom-ui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  // ... 此处省略代码
}

然后, 再修改package.json 文件:

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/unisoft-ui.js",

发布命令只有两步骤:

npm login   // 登陆
npm publish // 发布

完成之后我们就可以在项目中安装使用了

在项目中使用unisoft-ui

在自己的项目中使用unisoft-ui, 先从 npm 安装

npm install unisoft-ui -S

在 mian.js 中引入

import UniSoftUI from 'unisoft-ui'
Vue.use(UniSoftUI)

在组件中使用:

  

{{msg}}

{{switchText}}
export default { name: 'app', data() { return { msg: 'welecom to unisoft-ui', isSwitch: false, } }, computed: { switchText() { return this.isSwitch ? '开' : '关'; } }, }

注意: 在发布npm包之前要先修改 .gitignore 去掉忽略 dist, 因为我们打包的文件也需要提交;每次上到 npm 上需要更改版本号,package.json 里的 version 字段

阅读原文...


博客园-原创精华区

马斯克:别急,我还在

上一篇

MYSQL timestamp NOT NULL插入NULL的报错问题

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
手把手教你封装 Vue 组件并使用 NPM 发布

长按储存图像,分享给朋友