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

import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 <script src="/UploadFiles/2021-04-02/...">

回到顶部
构建一个 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 组件:




<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 "htmlcode">

// 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' "htmlcode">

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


在组件中使用:




<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 "color: #ff0000">总结

以上所述是小编给大家介绍的Vue 组件封装 并使用 NPM 发布的教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

        

            
上一篇：详解mpvue小程序中怎么引入iconfont字体图标
            
下一篇：浅谈angular表单提交中ng-submit的默认使用方法