一.前端工具库制作

1.打包自定义工具库

安装node
创建项目
注意：文件夹名必须为中文

npm init -y

下载依赖包

npm i webpack webpack-cli -D

配置webpack.config.js

const path = require('path')
module.exports = {
    mode:'development',
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'zp-myLib-utils.js',
        library:'zpUtils',//向外暴露的对象名称
        libraryTarget:'umd'//打包生成库可以通过esm/conmonjs/require.js的语法引入
    }
}

在入口js暴露功能

//src/index.js
//测试index.js暴露是否成功
export function test(){
    document.write('测试自定义包')
    console.log('test()')
}

//引入其他文件再暴露
//1.目标文件中暴露数据  export数据
//第一种写法
import { call } from './function/call'
export { call }
//第二种写法：
export { call } from './function/call'

配置打包命令

"scripts":{
    "build:watch":"webpack --watch"
}

对项目进行打包

npm run build:watch

测试自定义包

//test/index.html
<body>
    <script src="../dist/zp-myLib-utils.js"></script>
    <script>
        //zpUtils为webpac.config.jsk中output的library暴露名称
        zpUtils.test()
    </script>
</body>

2.发布到npm中央仓库

1.完善package.json

- name:必须是唯一的名称(在npm仓库中没有同名)
- main:必须指定为打包生成的js文件
- keywords:指定一些方便别的程序员搜索当前库的关键字

{
  "name": "zp-public-utils",//要改
  "version": "1.0.0",
  "description": "",
  "main": "dist/zp-myLib-utils.js",//要改
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["utils","array","objject","axios","function"],//可修改
  "author": "",
  "license": "ISC"
}

2.npm 配置

1.不能使用淘宝镜像，要使用npm源地址
2.查看配置 npm config list
3.注册npm账号 用户名/密码/邮箱（需要验证）
4.npm login 登陆用户  输入账号密码
5. 登陆成功后 npm publish上传
6. 强制删除已发布的库 npm unpublish --force (必须在72小时内 否则不能再删除)

二.前端组件库制作

1.配置npm

1.设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org
2.设置回原本的源，用来发布npm包
npm config set registry https://registry.npmjs.org
3.查看npm当前设置的源
npm config get registry 或者 npm config list
4.切换为yarn自带的镜像源：
yarn config set registry https://registry.yarnpkg.com

2.发布npm包

1.创建自己的[npm]账号
2.创建npm账号成功后，登录邮箱验证邮箱地址（这一步很重要，确认邮箱后才能发布）
3.修改自己项目的package.json文件（vite加vue3可以这样配）
    version:"0.0.1" 属性是发布的版本号，一般第一次发布都是0.0.1。
    main:'/dist/zp-baseui.umd.js' 属性是你默认到处的入口文件，默认是index.js。
    name:"modify-elem" 属性是你发布后的npm包名。
    "private": false,//私有的还是公用的 打包库要是 false
    "files": ["dist/*"],//检测 dist 目录下所有文件  指定需要发布的文件
    "exports":{//输出 //非必须
        //. 表示所有类型
        ".":{
            "import":"./dist/zp-baseui.es.js",
            "require":"./dist/zp-baseui.umd.js"
        }
    },
4.在项目根目录下创建index.js，在index中导出你想要导出的内容
5.打开命令行输入npm login 或 npm adduser 登陆
        输入：username  Password  Email
6.输入命令npm publish 发布，npm搜索你发布的包名就有了
7.你每次修改了源码后，如果要让别人可以得到最新的效果。\更新 package.json 里的 version ，然后重新 npm publish

vue2打包库配置

{
  "name": "shsnc-com",//打包库得名称
  "version": "0.1.0",//打包库得版本
  "private": false,//库打包必须设置为false否则发布不到npm  私有还是公用
  "main": "dist/myLib.umd.min.js",//入口文件  默认index.js
  "author": {//作者名
    "name": "zp"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    //指定打包文件入口为packages/index.js  打包后文件名前缀加myLib
    "lib": "vue-cli-service build --target lib --name myLib packages/index.js",
  },
}

文件介绍

.npmignore上传npm包忽略掉上传的文件也可以在package.json文件中指定检测的file文件

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

.gitignore 忽略掉上传git的文件

3.组件开发及文档编写流程

VuePress简介（编写vue组件文档）VuePress创建文档

注意：如果自己已有创建项目  则从第3步开始操作
"scripts": {
    "docs:dev": "vuepress dev docs",//本地启动个人站点
    "docs:build": "vuepress build docs",//对站点进行打包
  }

初始化组件库文档结构
编写组件文档
在github上创建个人站点
将文档部署到github.io

4.在github上建仓库和部署站点

4.1.在github上创建个人站点

先访问githubDocs
点击左侧菜单的 GitHub Pages 找到并点击 GitHub Pages 快速入门
创建仓库登陆github点击 + 中的New repository
输入 username.github.io 作为存储库名称 (用户名.github.io)

1652603606(1).png 5. 查看github给我们分配的站点地址（setting/Pages） 1652604064(1).png 6.创建一个名为 index.md

**提示：**  如果存在 `index.html`，则将使用它而不是 `index.md`。 
如果没有 `index.html` 或 `index.md`，将使用 `README.md`

7.在github上新建一个文件

1652604449(1).png

1652604769(1).png

4.2 将文档站点部署到github.io

查看你github名下拥有的仓库

1652605277(1).png 1. 创建一个组件库仓库

1652605509(1).png

2. 拷贝一个当前仓库的地址

1652605641(1).png

3. 初始化git

git init

4. 将本地仓库和远程仓库绑定

git remote add origin https://github.com/zp987827507/shsncCom.git

5. 提交代码到远程仓库

git add .
git commit -m "feat:save"
git push -u origin master

在 .vuepress的config.js中配置base（base地址改了后要修静态资源地址）

base:'/shsncCom/'

7.1.x 版本创建 deploy.sh 脚本

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f https://github.com/zp987827507/shsncCom.git master:gh-pages

cd -

补充版本 2.x 看部署vuepress
在package.json中添加命令

"scripts": {
    "deploy":"bash deploy.sh"
  },

9.部署

npm run deploy

git命令


git branch                                                                      
git branch -a
git remote rm origin  //解绑git地址
git add .
git commit -m 'deploy'
git push
git push origin master //push到master分支

git push -u origion master  首次推送时加参数 -u ，以后就不需要指定远端分支

首先查看代理，报错也是显示代理错误（若是有返回值,则取消代理）
git config --global http.proxy
git config --global https.proxy
//取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

git log --oneline  获取版本号
git merge 另一个要合并分支的版本号    合并分支 
没有冲突就直接提交到本地了  直接 git push 就可以提交到远程分支

git clone -b +分支 + 地址 拷贝远程代码到本地

git revert -n 0228ca1  回滚到上一个版本   回滚完  看下有没有冲突  没有冲突直接提交

10.别人拉取你的代码

1.如果是ssh的则需要添加他给你的ssh的Key 然后就可以git clone 1652928913(1).png 2.如果用公钥 https的则不需要配置

前端配置总结