正文开始

Vue 开发插件

我们可以先查看某视频剪辑软件的插件的开发规范

我们开发的之后期望的结果是支持进口、需求或者直接使用脚本标签的形式引入，就像这样：

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

从“unisoft-ui”导入UniSoftUI//或者const CustomUI=require(' unisoft-ui ')；//或者脚本src='http: '/script vue。使用(UniSoftui)；回到顶部

构建一个 Vue 项目

开发组件我们使用网络包-简单模板：

vue init网络包-简单项目-名称

ps:这里我选择了使用厚颜无耻因为之后开发组件会用到

目录结构如图：

源码目录 套餐///组件目录 开关///组件（以转换为例) uni-switch.vue //组件代码 指数。js /挂载插件 App.vue //页面入口 main.js //程序入口 指数。js /(所有)插件入口index.html/入口超文本标记语言文件

开发单个组件：

先看一下目标效果：

开始开发：

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

uni-switch.vue组件：

模板div class=' uni-switch ' div class=' wrapper ' span slot/slot/span div : class='[{ closed :选中}、"开关盒"]" @ click=' handleChange(value)' span : class=' { closed :选中}"/span/div输入类型=" checkbox " @ change=" handleChange " : true-value=" active value " : false-value=" inactiveValue " : disabled=" disabled " : value=" value "//div/div/模板脚本导出默认值{ name: 'UniSwitch '，data(){ return } }，prop : { value : { type :[布尔值，字符串，数字]，默认值333330} }，methods: { handleChange(值){这个.$emit('input '，这个检查过了吗？这个。activevalue :这个。inactive value)；} } }/scriptindex.js:

//UniSwitch是对应组件的名字，要记得在摩尔开关文件中还是名字属性哦从""导入单一开关./uniswitch。vue '；UniSwitch。install=Vue=Vue。组件(UniSwitch。名称，UniSwitch)；导出默认单一开关好了基本完成了，但是为了将所有的组件集中起来比如我还有选择、输入、按钮等组件，那么我想要统一将他们放在一个文件这中便于管理

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

从""导入单一开关./packages/switch/index '；从""导入UniSlider ./packages/slider/index '；从""导入未编号的行“/包/数量-增长/索引”；"进口"。/公共/scss/复位。CSS//.如果还有的话继续添加const components=[ UniSwitch，UniSlider，UniNumberGrow //.如果还有的话继续添加]const install=function (Vue，opts={ }){ components。map(组件={ Vue。组件(组件。名称、组件)；})}/* 支持使用标签的方式引入*/if(窗口类型！=="未定义"窗口Vue) {安装(窗口. vue)；}导出默认值{安装、UniSwitch、UniSlider、UniNumberGrow //.如果还有的话继续添加}好了到这里我们的组件就开发完成了；下面开始说怎么打包发布到新公共管理上

发布到 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文件。默认情况下，我们的导入将指向此文件路径3360path.resolve (_ _ dirname，/dist ')，publicpath :'/dist/'，filename:' custom-ui.js '，library3360' custom-ui '，//在使用require时指定模块名libraryTarget: 'umd '。//libraryTarget会生成不同UMD的代码，只能是commonjs标准，AMD标准，或者通过脚本标签引入的umdnameddefine: true。//将命名umd构建过程中的amd模块。否则，使用匿名定义}、//.省略这里的代码}然后修改package.json文件：

//要发布开源，需要将此字段改为false' private' : false。//这是指导入自定义ui时会检索到的路径‘main’3360‘dist/unisoft-ui . js’，发布命令只有两个步骤：

Npm登录//登录npm发布//并发布

完成后，我们可以在项目中安装和使用它

在项目中使用unisoft-ui

在你自己的项目中使用unisoft-ui，并首先从npm安装它

npm安装unisoft-ui -S

在mian.js中引入

从“unisoft-ui”vue导入unisoftui。使用(unisoftui)在组件中使用：

template div id=' app ' h1 { { msg } }/h1 uni-switch v-model=' is switch ' span class=' text ' { { switch text } }/span/uni-switch/div/template script导出默认{ name: ' app，data(){ return { msg : ' wele com to unisoft-ui '，isSwitch: false，}，computed : { switch text(){ return this is switch？开“:”关；} }，}/script Note :在发布npm包之前，我们应该进行修改。gitignore和ignore dist，因为我们的打包文件也需要提交；每次转到npm时，都需要更改package.json中的版本号和版本字段

摘要

以上是由边肖介绍，NPM出版的关于包装Vue组件的教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！