Node-npm包(原npm实现和vue组件)

NPM
基本流程
npm init
会有交互式创建
步骤会生成一个package包管理json

/**
1 package名字是什么
2 版本
3 描述
4 入口 默认index.js
5 测试命令
6 git地址
7 关键字
8 作者名字
9 开源证书
10 是否确认
*/
{
  "name": "node_test_name",
  "version": "1.0.0",
  "description": "这是一个测试node文件的package描述",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "这是关键字"
  ],
  "author": "qinfugui",
  "license": "ISC"
}

创建npm账号 去npm官网
修改镜像成源npm nrm use npm
npm login登录
npm publish 提交包
修改
修改版本号 再进行 npm publish
删除 npm unpublist 是作者 小于24小时 并且没有别的包依赖它 并且每周下载量小于300 并只有一个维护者
VUE

git地址 把几个文件删了 只有几个步骤
具体实现参照nodejs
1创建一个vue2项目 方便打包
2将组件引入查看是否能用

3在src下面创建package文件夹
4把组件放到package文件夹里
5在package文件夹创建index.js 将组件挂在到vue上

//组件
import qScrollFull from "./scroll/index.vue";
//声明数组
const npmArray = [qScrollFull];
//循环挂载组件
const install = function (Vue) {
  npmArray.forEach((item) => {
    Vue.component(item.name, item);
  });
};
//暴露出去 后期Vue.use调用
export default install;

6打包 在根目录的package.json --"scripts"里添加

//--target lib 打包目录
//--name  qfg-scroll-full 打包后的名字
//--dest qfg-npm 打包后的文件夹名称
 "packageBuild":"vue-cli-service build --target lib ./src/package/index.js --name qfg-scroll-full --dest qfg-npm"

运行打包
打包完了 有一个qfg-npm --dest后面的名字 展开里面是–name定义的名字格式
进入qfg-npm文件夹

7 初始化qfg-npm文件夹里package.json文件

npm init -y

scr/qfg-npm/package.json
package.json

{
  "name": "qfg-scroll-full", //npm包名字
  "version": "1.0.0",//版本
  "description": "",
  "main": "qfg-scroll-full.common.js",//指向
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],//关键词
  "author": "",
  "license": "ISC"
}

8-1上传npm 没有账号点击这里npm地址
用户名不能是单一类型
密码最好也不是
注册时填完邮箱会发邮箱一个一次性密码 输入之后确定就可以
8-2 路径 根目录 打包的 --dest名字的目录
将cnpm pnpm yarn 等一些镜像改回npm
根目录/qfg-npm/ cmd指令

npm config set registry=https://registry.npmjs.org

8-3第一次打包需要输入用户名密码和邮箱

npm addusername

密码输入时候光标是不跟着聚焦的 所以一定要输入对
9 README.md
创建一个README.md文件
##是名称
…是内容…

		## 简介
		```
		这是一个全屏滚动插件
		```

10 发布 根目录/qfg-npm/ cmd指令 可能会先打包再输入账号和密码 没关系

npm publish

##对应的就是NPM YARN USAGE TYPESCRIPT
…对应的是$ npm install xxx 。 import xxxx from ‘xxx’

没有写README.md 只写了package.json里的关键词 就会是这个鬼样子
*****相同的名字 一天只能上传一次
*****403基本是npm包名字已经有人注册过了 所以你不能使用一样的
11使用
直接复制右侧图片上的 install 在项目根目录cmd 执行

12main.js

import qfgScrollFull from "qfg-scroll-full-npm";
import "qfg-scroll-full-npm/qfg-scroll-full.css";
Vue.use(qfgScrollFull);

App.vue
qScrollFull package文件夹index.js遍历的name 也就是组件内部声明的name属性

<qScrollFull :scrollLen="3" :time="0.3">
      <template slot="qScrollItem1">123</template>
    </qScrollFull>

3个链接参考
npm官网
bilibili大佬
全屏滚动