一:vue项目创建
1、通过vue create XX 创建 vue项目
注意:选择2.0 或者3.0都可以。按照提示即可
二:插件开发(参考https://cn.vuejs.org/v2/guide...;https://www.cnblogs.com/adouw...)
目录结构:
1、src文件目录改为examples(非必须,为了方便测试)
2、新建packages文件夹(放实际插件代码)
src非必要,按照实际项目目录
ac-textfield\packages\texefield\index.js(局部创建组件,单个install ac-textfield组件)
ac-textfield\packages\index.js(全局引入插件,可能存在多个组件引入)
注意:最终在项目中调用的组件名称是编写插件代码组件的名称,非文件名等。
3、修改vue.config.js文件
4、测试写的插件
ac-textfield\examples\main.js 导入和注册插件库
ac-textfield\examples\App.vue(使用自己编写的插件)
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);
2、新建.npmignore文件,打包需要忽略的文件
3、npm publish (需要用户名密码,目前发布到oppo源)
http://admin.npm.oppoer.me/-/...(oppo npm源)
四:项目中调用插件(vue.use需要在new vue实例之前调用)
activity-admin(普通vue项目)
1、安装编写的插件npm i XXX -D
2、项目中引入
3、使用
browser_pager_render(nuxt.js项目引入插件)
1、安装编写的插件npm i XXX -D
2、front\plugins 目录下新建ac-textfield.js
3、front\nuxt.config.js plugins 配置中添加ac-textfield.js(注意ssr需要设置为false)
4、使用插件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。