前提:1 .会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础。
因为本文主要是讲如何把一个vue组件做成npm包并发布。
分为2大步骤:
一。按照相应格式写我们的vue代码(就如同写一个jquery插件时,有其固定的格式一样)。
二。发布到npm上的流程
<强>一、书写一个vue组件
不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西。
就做一个最简单的vue组件:就是传入用户名字,页面打印出“你好,用户名”的组件。
比如,我的预期目标是其他vue项目中,npm安装本组件后,可以如此使用该组件:
然后网页上会显示:
<强> OJBK,现在开搞:
1。新建一个空文件夹,进入到根目录下。执行
初始化项目,然后会让你填一些项目相关的信息,跟着提示填就是了。没啥说的。注意名字不要和现有的其他npm包重名了,不然一会儿发npm包的时候会失败,可以先去npmjs.com搜一下有没有重名的。
这一步完成后,会生成package.json文件。
2。由于本例是一个vue的组件包,而且使用了es6和webpack,所以在devDependencies字段中,应该至少加入以下依赖:
package.json
这些依赖的用处分别都是啥,自己查。 3。执行npm安装、下载这些依赖包。 4。新建2个文件夹:dist和src,名字按照个人习惯吧。我习惯dist代表发布时的目录,src是开发目录.dist里面的js是到时候通过webpack打包后的文件。待会只会提交dist目录到npm官网上,src不提交。 src里:我们比较常规的写一个vue组件 
& lt;风格范围lang=吧佟北?
@ import“风格/common.less”;
& lt;/style>
& lt; template>
& lt; div类=癿sg-wrapper”比;
& lt; span>你好! & lt;/span>
& lt;跨类="帐户"在{{data.name}} & lt;/span>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“味精”,
数据(){
返回{}
},
道具:{
数据:{
对象类型:
}
},
方法:{
},
创建(){
让=这个;
}
}
& lt;/script> 详解如何制作并发布一个vue的组件的npm包
