vue封装组件3种方式

在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包的引入。

最后

以上就是舒心雨为你收集整理的vue封装组件3种方式的全部内容，希望文章能够帮你解决vue封装组件3种方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。