关于npm:npm开发插件流程和项目中引入插件

64次阅读

共计 1026 个字符,预计需要花费 3 分钟才能阅读完成。

一: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、应用插件

正文完
 0