vue插件开发

87 阅读1分钟

一:vue项目创建

1、通过vue create XX 创建 vue项目 image.png 注意:选择2.0 或者3.0都可以。按照提示即可

二:插件开发

(参考cn.vuejs.org/v2/guide/pl…www.cnblogs.com/adouwt/p/92…

目录结构:

image.png

1、src文件目录改为examples(非必须,为了方便测试)

2、新建packages文件夹(放实际插件代码)

src非必要,按照实际项目目录

ac-textfield\packages\texefield\index.js(局部创建组件,单个install  ac-textfield组件)

ac-textfield\packages\index.js(全局引入插件,可能存在多个组件引入)

注意:最终在项目中调用的组件名称是编写插件代码组件的名称,非文件名等。

image.png

3、修改vue.config.js文件

image.png

4、测试写的插件

 

ac-textfield\examples\main.js 导入和注册插件库

image.png ac-textfield\examples\App.vue(使用自己编写的插件)

image.png

5、ac-textfield 目录下 npm run serve 运行

三:插件发布

1、Package.json

private改为false;

main:main属性主要使用在引用或者开发某个依赖包的时候需要此属性的支持,不然工程中无法用import导入依赖包;

不使用main属性的话我们可能需要这样写引用:require("some-module/dist/app.js"

main值生成方式:npm run  lib); image.png

2、新建.npmignore文件,打包需要忽略的文件

3、npm  publish (需要用户名密码)

四:项目中调用插件(vue.use需要在new vue实例之前调用)

1、安装编写的插件npm  i  XXX  -D

2、项目中引入

image.png

3、使用

image.png