vue封装组件3种方式

3 篇文章 0 订阅
1 篇文章 0 订阅

在package.json中配置打包路径:

1、在scripts中定义打包指令;
指令说明: --target lib 关键字 指定打包的目录
–name 打包后的文件名称
–dest 打包后的文件夹的名称
例如:“sf_common_build”: "node build/build.js --target lib ./src/ui/index.js --name qf-ssf --dest com_ss

3种方式:
1、npm本地file引用:
在项目控制台下输入 npm install …/common/
这时修改common项目下面的任意代码都会实时生效,不用打包,不用更新引入包,也不用重启。而且在package.json中有引入记录。
如:
“vue_common”: “file:…/vue_common_name”,
“vue_common_git”: “git+https://gitee.com/XXXXX/vue_common.git#master”,

2、link引用:
首先在组件文件下的控制台输入npm link ; 然后在项目控制台下输入 npm link XX组件文件名。
这就将这个公共的项目通过软连接的方式引入到项目里面来了。
这时修改组件项目下面的任意代码都会实时生效,不用打包,也不用重启了。在package.json中没有引入记录。

3、npm package(目前两种:a、不打包可以有多个组件, b、打包的话只能有一个组件?)
在http://www.npmjs.com注册一个账号
进入common的控制台,输入命令npm login,按照提示输入刚注册的账号密码
输入命令 npm publish 即可

在项目控制台下输入npm install common --save
注意:每次改动代码再次发布时,需要修改package.json文件中的版本号,不然发布不成功。
开发project1和project2的程序猿只需关注自己项目的业务功能,公共的common有更新时,执行命令npm install common就可以了。切记频繁改动common包时,project1和project2需要频繁更新common包的引入。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值