vue组件开发,可以全面在第三方框架引入

发布者: xiaozhimn

vrep-cli vue组件开发工具,使用webpack打包,组件开发完成后可以通过npm发布,可以在任意第三方框架例如:angular,vuejs,react,jquery等项目中使用,并且可以完成双向消息通讯,今天就为大家介绍下使用vrep-cli开发一个简单的vue组件
并发布到npm上,最后在angular项目中进行使用的案例。

第一步: 安装vrep-cli脚手架工具

npm install -gd vrep-cli

第二步: vrep-cli的命令行

  vrep-cli -h

  Usage: vrep-cli [options]

  Options:

    -V, --version         output the version number
    -c,--create <string>  创建一个组件
    -r,--remove <string>  删除一个组件
    -h, --help            output usage information

第三步:创建一个myslider组件

vrep-cli -c myslider
创建完成目录结构如下:

c1

目录结构说明:

assets 目录存放图片等静态资源。
dis 目录使用 npm run build 打包好的组件以及依赖文件存放目录
index.html 当前组件的测试模版,可以使用 npm run dev 直接运行
main.js 组件打包的入口文件
webpack.config.js 打包的默认配置文件,一般不需要开发者手动修改
myslider.vue文件 vue工程的模版文件核心组件开发文件, 包含 template, script, style

以上组件生成好以后可以直接使用 npm run dev进行运行,不需要做任何改动,开发者在开发组件的时候基本只需要编写 .vue文件
组件开发完成后,需要发布注意需要对package.json进行小小的修改如下:

c2

讲作者信息写成你自己在 npmjs.com上面注册的账号,随后使用 npm publish进行发布,这里请参考网上发布模块的相关文章。

第四步: 在angular项目中进行安装vue组件

跳转到angular项目的根目录,执行 npm install myslider 安装成功

第五步: 在angular项目中使用
c3

1. 首先引入dis中打包好的vue组件脚本文件 main.js
2. 在页面上定义一个节点并增加一个唯一 id 例如 <div id="myslider"></div>
3. 
var S = Vrep.use("myslider");//引用vue组件对象, Vrep为组件内集成的全局变量
S.init({
   ele: "myslider",
   username: "xiaozhimn",
   success: function() {
       alert("good1");
   }
}).show();
使用init对组件进行初始化,参数将为vue组件的props传递参数,从而对组件内部进行数据传入。注意 ele参数为必填项,值为定义的节点id,最终使用show方法进行挂载到当前定义的节点上。

4. 组件通讯
我们可以通过: Vrep.getInstance("myslider") 获取vue组件的实例,从而可以操作组件内,的数据以及methods上定义的方法,来改变组件内的数据状态。 例如: Vrep.getInstance("myslider").username = "hahaha!";

最后如果一个项目引入多个组件平台的vue组件,可以通过打包方式将这些组件合并并去掉重复引入。

相当给力吧!

73赞

Fluently

大佬 牛逼!

时间:9/12/2018, 5:18:14 PM

回复