自定义简单组件并发布到npm库
一、注册npm账号
上npm官网注册账号并进行邮箱验证(必须验证,否则无法上传)
二、创建vue项目
1、我们使用 vue init webpack-simple ntc-kkfileview 命令创建一个简易项目(因为创建的是组件,所以不需要那么多配置,配置多了修改起来也麻烦,webpack-simple足够了)
如上图,一路回车,即可创建一个简易轻量级的vue项目专供组件使用。
2、修改项目目录
如图所示,新增index.js文件(用于打包时将组件抛出)、新增components文件夹和vue组件,注意文件层级。
三、封装组件及各参数配置
1、编写组件(ntc-kkfileview.vue),注意name的参数配置,该值将作为组件名被调用
<template>
<div class="ntc-kkfileview">
</div>
</template>
<script>
export default {
name: 'ntc-kkfileview',
data () {
return {
}
},
props: {
fileUrl: {
type: String,
default: ''
}
},
mounted() {
if(this.fileUrl){
var url = this.fileUrl; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));
}else{
alert("请输入正确的文件路劲")
}
},
}
</script>
<style lang="scss">
.ntc-kkfileview{
}
</style>
2、在App.vue中预览使用
<template>
<div>
<ntc-kkfileview :fileUrl='fileUrl'/>
</div>
</template>
<script>
import NtcKkfileview from './components/ntc-kkfileview'
export default {
components:{
NtcKkfileview
},
data () {
return {
fileUrl: 'hello 你好'
}
}
}
</script>
<style>
</style>
3、添加index.js内容
import NtcKkfileview from './src/components/ntc-kkfileview'
import _Vue from 'vue'
// if (typeof window !== 'undefined' && window.Vue) {
// window.Vue.component('yyl-npm-practice', Main)
// }
// Main.install = function(Vue){
// Vue.component(Main.name, Main)
// }
// 因为使用 window.Vue.component('yyl-npm-practice', Main) 的时候 外部引用的时候 有可能会覆盖该组件,导致组件无法正常使用;使用下面的的定义方式后, 在.vue 环境下 使用方式不变, 在只引用 ys-expression.js 环境下 需在 new Vue() 之前加 window['ys-expression'].default.install();
NtcKkfileview.install = Vue => {
// 这一步判断window.Vue是否存在,因为直接引用vue.min.js, 它会把Vue绑到Window上,我们直接引用打包好的js才能正常跑起来。
if (!Vue) {
window.Vue = Vue = _Vue
}
Vue.component(NtcKkfileview.name, NtcKkfileview)
}
export default NtcKkfileview;
4、修改package.json参数配置
这里主要是两个参数的修改和注意
private:是否私有,此处值一定为false,否则无法上传npm
main:指定打包后的入口文件,我们通常会将文件放在同一目录下,require会自动查看该目录的package.json文件,然后加载main指定的入口文件,若没有main字段或不存在package.json文件,则会加载该目录下的index.js或index.node文件
5、修改 webpack.config.js(entry和output)
修改打包入口和出口,区分开发环境和生产环境
main.js 是npm run dev 的入口,就是App.vue, 用于调试/测试我们开发的组件; index.js是ntc-kkfileview.vue, 就是我们开发的组件,我们打包到生产环境打包就只是单纯的 ntc-kkfileview.vue 组件,不包含app.vue,这样npm 下载下来的才是单独的组件。
这里进行一个优化将devtool: '#eval-source-map’注释,生产环境的时候, 我们就不调试了,也不需要.map文件,那就先把这个 devtool删了,然后放最后,如上图,只要在开发环境的时候才启用这个调试。
6、修改index.html的js引用路径
因为我们修改了output 的 filename,所以引用文件的名字也得变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ntc-kkfileview</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/ntc-kkfileview.js"></script>
</body>
</html>
注:运行项目(npm run dev)之前,请记得npm i和npm build,修改配置后,若不build,有可能会报错
至此,组件封装结束,在App.vue里面调用该组件,并做测试,调试。
四、打包上传npm库
在项目目录下执行:npm login
注:用户名和密码不要输错了,特别是密码;再就是地址,若安装了淘宝镜像,极有可能是淘宝地址,需更改:
此时执行npm config get registry和npm config set registry=http://registry.npmjs.org命令即可
npm run build打包
特别提醒,上传前请确认已打包,否则。。。
上传publish 发布
npm publish
出现此画面后登录npm账号即可查看自己库中的组件
出现上图则代表上传成功,已可npm下载使用,若版本更新,请记得一定要修改package.json中的版本号,否则上传报错。
常见报错及解决方案
1、版本重复
解决方案:修改package.json中的版本号重新上传即可。
2、包名重复
解决方案:修改package.json、webpack.config.js等配置文件中的包名。
3、npm邮箱未验证
解决方案:换个npm账号或去npm官网验证邮箱
4、未知问题(仅做参考)
无法理解的问题(+_+)
解决方案:
1、查看npm邮箱验证
2、发布前未npm run build
3、重启电脑(解决90%的问题)
5、库的地址不对(淘宝镜像)
解决方案:执行npm config get registry和npm config set registry=http://registry.npmjs.org
6、npm账号未登录
解决方案:npm login
7、引入sass版本不对,导致在使用lang="scss"语句时报错(比较坑)
这种情况我多数是在创建组件项目时未勾选sass,自己手动安装node-sass导致
解决方案:手动安装node-sass默认是最新版本,但有时考虑到vue-cli的版本,需要降低node-sass和sass-loader的版本(卸载已有版本,重新npm指定版本),如下图(已降低版本)