Vue 组件封装 并使用 NPM 发布的教程

Posted 2021-01-12 aillabig

正文开始

 

Vue 开发插件

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

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

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

?

1 2 3 4

import UniSoftUI from ‘unisoft-ui‘; // 或者 const CustomUI = require(‘unisoft-ui‘); // 或者 <script src="..."></script> Vue.use(UniSoftUI);

回到顶部

 

构建一个 Vue 项目

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

vue init webpack-simple <project-name>

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 组件:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<template>  <div class="uni-switch">  <div class="wrapper">   <span><slot></slot></span>   <div :class="[{closed: !checked}, ‘switch-box‘]"    @click="handleChange(value)">   <span :class="{closed: !checked}"></span>   </div>     <input   type="checkbox"   @change="handleChange"   :true-value="activeValue"   :false-value="inactiveValue"   :disabled="disabled"   :value="value"/>  </div>  </div>   </template>   <script>  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);   }  }  } </script>

index.js:

?

1 2 3 4

// 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 文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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 这个文件;

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// ... 此处省略代码 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 文件:

?

1 2 3 4

// 发布开源因此需要将这个字段改为 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 中引入

?

1 2	import UniSoftUI from ‘unisoft-ui‘ Vue.use(UniSoftUI)

在组件中使用:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<template>  <div id="app">  <h1>{{msg}}</h1>  <uni-switch v-model="isSwitch">   <span class="text">{{switchText}}</span>  </uni-switch>  </div> </template>   <script>  export default {  name: ‘app‘,  data() {   return {   msg: ‘welecom to unisoft-ui‘,   isSwitch: false,   }  },  computed: {   switchText() {   return this.isSwitch ? ‘开‘ : ‘关‘;   }  },  } </script>

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