-
为了提高开发效率,一些复杂的功能的实现,往往不是我们从头到尾开发的,而是用别人做好的轮子,加上自己的美化和加工制造出自己的"车子"。
-
这些轮子是以依赖包的形式(模块化开发的时候)引入我们的项目的,开发者一般会附上详细的使用说明文档,我们只要遵循文档的规范和说明,就可以轻松地实现想要的功能。
-
为什么我们非要用别人造好的轮子?
项目复杂度 = 业务复杂度 + 功能复杂度
从开发者的角度,想要降低功能杂度,用别人造好的轮子应该是绝大部分人首选,其他的就先不说了。 -
注册账号:
npm -
确保装了git、nodejs、编译器(我的是Vscode)
-
接着执行以下命令进行初始化,修改一些包的信息
npm init
- 执行后,会生成一个文件:
- 命令进入包内登录你先前注册好的账号:
npm login
- 发布:
npm publish
- 报错了
因为包名被占用了,打开package.json修改name
修改完后,重新执行:
- 然后去官网登陆自己的账号查看
就可以看到刚刚发布的包:
到这一步了,是不是就代表我会了?
简单学习一下如何使用:
在原来的包文件创建一个index.js
// 获取链接参数
export function getQueryFromUrl(key) {
let search = location.search,
obj = {};
search = decodeURIComponent( search.substring(1) );
let arr = search.split('&'),
len = arr.length,
i;
if( len > 0 ) {
for( i = 0; i < len; i ++ ) {
let subArr = arr[i].split('=');
obj[subArr[0]] = subArr[1];
}
}
return obj[key];
}
// 判断是否在微信环境
export function inWeChat(){
var ua = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(ua);
}
// 安卓设备
export function isAndriod() {
let ua = navigator.userAgent;
return /android/i.test(ua);
}
// ios设备
export function isIOS() {
let ua = navigator.userAgent;
return /iphone|ipad|ipod/i.test(ua);
}
接着要修改一下package.json的包版本
然后重新发布:
npm publish
从官网上可以看到这个包已经被更新了
这里我用vue的脚手架快速创建了一个vue项目,接着要在这个项目中安装并使用这个依赖包。
执行命令安装到项目中:
cnpm install tool-methods --save
在项目中可以看到已经安装的依赖包:
使用:
<template>
<div class="hello">
</div>
</template>
<script>
//导入包中的方法
import {getQueryFromUrl} from 'tool-methods';
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted(){
//获取链接上的参数的值
console.log(getQueryFromUrl('flat'))
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
如下图: