fix: 修改配置

This commit is contained in:
NICE CODE BY DEV 2024-02-19 14:20:56 +08:00
parent 94f44c5f6f
commit c44b0f7c21
9 changed files with 692 additions and 1 deletions

View File

@ -2,7 +2,6 @@
text-align: center;
}
#root .dumi-default-doc-layout > main {
max-width: none;
}
#root .dumi-default-sidebar {

4
.dumi/tsconfig.json Normal file
View File

@ -0,0 +1,4 @@
{
"extends": "../tsconfig.json",
"include": ["**/*"]
}

View File

@ -0,0 +1,144 @@
---
nav:
title: 文章
path: /blog
order: 999
category: Components
title: changelog 日志自动生成插件
group: 2018年
---
## changelog 日志自动生成插件
该工具针对一些需要手动输入更新日志的项目,实现自动化输出更新日志,并且对更新日志进行内容格式化,便于后期维护,目前主要有以下几个功能模块。
1. cz -- 定制化 git 提交
2. log -- 自动生成 CHANGELOG.MD 日志文件
3. lint -- 校验 commit 信息
安装依赖包
```js
npm install @nicecode/changelog --save
// or
yarn add @nicecode/changelog --save-dev
```
## 一、cz 模块
### 1. 安装 commitizen 依赖包
> cnpm i commitizen --save-dev
### 2. 在 package.json 中加入以下内容
```json
{
...
"config": {
"commitizen": {
"path": "@nicecode/commit"
}
},
}
```
### 3. 在 package.json 中创建以下 script 命令
```json
{
"cz": "git add . && git cz"
}
```
按照提示正确输出 commit 信息内容,如下示例:
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29fc6a92aa7b4af0b3dcb937670e4a28~tplv-k3u1fbpfcp-zoom-1.image)
## 二、log 模块
### 1. 安装 conventional-changelog-cli 依赖包
```js
cnpm i conventional-changelog-cli --save-dev
```
### 2. 创建以下命令
```json
{
...
"script": {
"log": "conventional-changelog --n node_modules/@nicecode/changelog -i CHANGELOG.md -s -r 0",
}
}
> 结尾数字若为 1 ,生成当前版本的变化情况,若为 0 生成所有的日志文件。
```
### 3. 示例
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38cb1858823a43f098b087ccde98be99~tplv-k3u1fbpfcp-zoom-1.image)
## 三、lint 模块
### 1. 安装 husky commitlint 依赖
```shall
cnpm i husky commitlint @nicecode/commit-lint --save-dev
```
### 2. 在 package.json 中引入以下配置
```json
{
...
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
}
```
### 3. 在项目根路径下创建 .commitlint.js 或者 commitlint.config.js
具体配置可以参考 commitlint 官方,例子:
```js
module.exports = {
extends: ['@nicecode/commit-lint'],
};
```
## 建议
可以搭配 **husky****lint-stage** 效果更佳。它能在你每次提交代码前校验你的代码格式并修复错误的代码格式,具体配置可以参考当前根目录下的 package.json 和 .eslintrc.
## Q&A
### 1. No files added to staging! Did you forget to run git add
应该没有文件内容变动还执行 git add . 提交导致的。试着对项目进行更改再保存试试。
### 2. 提交后输入更新日志命令CHANGELOG.MD 内容没有更新?
只有每次版本迭代的的时候才会更新这一次的日志信息。可以尝试打个标签最为封版。
### 3. mac 无法运行 git 命令,报错?
可以试试安装 xcode.
> xcode-select --install
### 4. 打印日志没有版本号?
版本号目前支持的格式为 vX.X.X👀 格式对吗?
### 5. js 如何读取 md 文件?
如果该项目使用了 webpack可以使用 markdown-loader.
```
第一次写工具库,难免有瑕疵,欢迎大家 pr但是还请口下留情😄
喜欢的话给个 star吧
```

View File

@ -0,0 +1,176 @@
---
nav:
title: 文章
path: /blog
order: 999
category: Components
title: changelog 日志自动生成工具升级啦~
group: 2020年
---
# changelog 日志自动生成工具升级啦~
19 年我发了一篇文章[changelog 日志自动生成插件](https://juejin.cn/post/6844903767876304904),里面介绍了我开源的一套【auto changelog、commit-lint】规范化代码提交的工具插件合集。
但是由于是第一次发布一些开源的项目,难免开发方案不是很丝滑,用起来也不是很柔顺。
所以基于这些问题,用 lerna 对这个工具进行了一次升级。大概内容如下:
```js
jimi-web-changelog/cz --> @nicecode/commit // git 格式化 cli 提交插件
jimi-web-changelog/lint --> @nicecode/commit-lint // git 提交 lint 校验插件
jimi-web-changelog --> @nicecode/changelog // 日志自动生成插件
```
## CZ 模块配置优化
[官方文档](https://nicecoders.github.io/#/changelog/commit)
### 原配置
```js
// 1、安装依赖
cnpm i commitizen jimi-web-changelog --save-dev
// 2、在 package.json 中添加
{
...
"config": {
"commitizen": {
"path": "./node_modules/jimi-web-changelog/lib/cz"
}
},
...
}
```
### 新配置
```js
// 1、安装依赖
cnpm i commitizen @nicecode/commit --save-dev
// 2、在 package.json 中添加
{
...
"config": {
"commitizen": {
"path": "@nicecode/commit"
}
},
...
}
```
## lint 模块配置优化
[官方文档](https://nicecoders.github.io/#/changelog/commit-lint)
### 原配置
```js
1. 安装依赖
cnpm i husky commitlint jimi-web-changelog --save-dev
2. 在 package.json 中引入以下配置
{
...
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
...
}
3、根目录下 .commitlint.js
modules.exports = Object.assign({}, require('jimi-web-changelog/lib/lint'), {
rules: {
'subject-empty': [2, 'never'],
'type-empty': [2, 'never'],
'type-enum': [2, 'always',
[
'新功能',
'修复',
...
]
]
}
}
```
### 新配置
```js
// 1. 安装依赖
cnpm i husky commitlint @nicecode/commit-lint --save-dev
// 2. 在 package.json 中引入以下配置
{
...
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
...
}
// 3、根目录下 .commitlint.js
modules.exports = {
extends: ["@nicecode/commit-lint"]
}
```
## changelog 模块配置优化
[官方文档](https://nicecoders.github.io/#/changelog)
### 原配置
```js
// 1、安装依赖
cnpm i conventional-changelog-cli jimi-web-changelog --save-dev
// 2、在package.json 中添加命令
{
...
"script": {
"log": "conventional-changelog --config node_modules/jimi-web-changelog/lib/log -i CHANGELOG.md -s -r 0",
}
...
}
```
### 新配置
```js
// 1、安装依赖
cnpm i conventional-changelog-cli @nicecode/changelog --save-dev
// 2、在package.json 中添加命令
{
...
"script": {
"log": "conventional-changelog --n node_modules/@nicecode/changelog -i CHANGELOG.md -s -r 0",
}
...
}
```
## 后记
[nicecoder 团队](https://github.com/nicecoders) 目前 4 人,致力整合一套提高工作效率和代码规范的工具库,目前我们的计划的和已完成的有以下几个板块:
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/285c6e21eb954428bf0adf67e737ae96~tplv-k3u1fbpfcp-watermark.image)
期待你的加入:[nicecoder](https://github.com/nicecoders)
### 相关链接
[@nicecode/tools 常用函数库](https://nicecoders.github.io/#/tools)
[nicecode 官网](https://nicecoders.github.io/#/)
[nicecode github 地址](https://github.com/nicecoders)

136
docs/blog/firstPage.md Normal file
View File

@ -0,0 +1,136 @@
---
nav:
title: 文章
path: /blog
order: 999
category: Components
title: 用Vue高仿qq音乐官网-pc端
group: 2017年
---
## 用 Vue 高仿 qq 音乐官网-pc 端
一直想做一个 vue 项目 然后呢 我就做了
## 效果预览
部分地方不全部根据原版,也有自由发挥的,目前功能模块比较简陋,如果加载太慢,可以下载下来再本地运行
> [网易云音乐 API](https://github.com/Binaryify/NeteaseCloudMusicApi)
> 项目地址:[github](https://github.com/j710328466/vue-qqmusic)
> 预览地址:[demo](http://182.254.147.168:8564/#/)
## Build Setup
```
# install dependencies
cnpm i
(可以用cnpm或yarn更方便快捷你值得拥有)
# serve with hot reload at localhost:8564
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# 网易云API部署 listen localhost:3000
npm run start
```
## 技术栈
- vue(数据绑定)
- vue-router
- vuex(管理组件状态,实现组件通信)
- webpack(打包工具)
- scss原来想用 stylus,回头看看我都快写完了...
- axios我等下要重点讲这\*\*\*\*
- 组件库: element-UI(本来想用 muse-UI,感觉那个更 cool下次吧..)
- API: 网易云音乐 API(仿 qq 音乐我用网易云音乐的东西,你怕不怕...)
## 核心功能组件的实现
### 搜索功能
![](https://ooo.0o0.ooo/2017/06/14/594135198d975.gif)
### 播放功能
![](https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif)
   (播放页面正在完善中,样式只是大概,待细化...)
### 跳转功能
![](https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif)
(目前子目录只开通歌手列表)
## 自己挖的坑,自己埋
### vuex 的模块应用
- 一开始我并没有使用 vuex因为我觉得目前这个项目比较小并不需要它来管理数据毕竟 vuex 针对大项目来说确实很好用,但是后来考虑到如果后期该项目我还要 维护,数据量一大,还是要重新分类数据,所以中途某些地方插入了 vuex 的使用,这就很大一部分影响了项目进行的进度。(目前只用到 action 和 state
### qq 音乐的轮播图
- 不用说qq 音乐这个网站的页面我是真的挺喜欢,不光是他的设计,页面的布局也很美观,在控制台调试的时候可以看看它的结构,非常有层次而富有美感,即使加上 一层 margin,padding 也不会有违和感。这就造就了它的轮播图结构比较麻烦,不是说做不出来,因为这是第一次上传的项目,我想先将大概的结构完善一下,后期再 维护,所以我就选用了 element-UI 里面的跑马灯式轮播图组件,大体来说,除了部分瑕疵以外,还是高度还原了原版轮播图的。
### axios 后端数据获取时产生的跨域问题
- 重点来了,这个是我在该项目中花了最多时间的地方,相信很多同学使用 axios 都碰到过我这个问题,目前我这里使用了三种方法处理该问题,请大家针对自己的项目问题对号入座
- 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。
①. 针对本地相同端口服务器之间的跨域
- 这是我刚开始碰到问题时使用的第一种,这个时候你只需要找到 build 文件中的 dev-server找到引用 express 的位置,给它加上一个头文件:
```
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Credentials", true)
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "X-Requested-With")
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8")
next()
})
```
> ![](https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg)
- 然后它就会报错~,具体原因是你同一个端口申请相同端口的东西,不好意思,那不叫跨域...
<br>
②. 针对本地不同端口的服务器之间的跨域
- 就是将上面的头文件放在当前项目申请的服务器的那个 api 中。
<br>
③. 针对本地服务器对域名服务器访问的跨域问题
- 找到当前项目 congfig 文件夹下 index.js 文件,然后在文件中将 proxyTable 内容改为:
```
proxyTable: {
'/api': {
target: '[1]',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
```
> 就是你当前想访问的 api 地址,项目中访问的时候就只要用/api 做反向代理即可
## 终于
- 这是我第一个用 vue 撸的项目,可能功能有点简陋,很多地方有待提高,不过这次实践让我对组件化的理解有了一定的提升,后期会继续加入其它功能模块的,文中有用词不对的地方,欢迎大家指出,项目有什么 bug也希望大家多多提 issue
- 如果对你有帮助,给个 star 吧

90
docs/blog/sshLoginECS.md Normal file
View File

@ -0,0 +1,90 @@
---
nav:
title: 文章
path: /blog
order: 999
category: Components
title: 如何终端 ssh 免密登录 ECS
group: 2018年
---
## 如何终端 ssh 免密登录 ECS
你是不是登录自己的远端服务器还是在使用输入账号密码?那么问题来了:
1. 密码忘了咋办!
1. 比较复杂的密码输入起来浪费时间!
1. ip 地址忘了咋整!
1. ...
## 第一步:查看本机是否有 id_rsa.pub 文件
```javascript
cat ~/.ssh/id_rsa.pub
```
如果输出为空,就在下一步创建一下
## 第二步:创建 id_rsa.pub 文件
如果本机已经存在该文件,就直接跳到第三步
###
### 先登录 git 账号
```javascript
git config --globaluser.name "XXX"
git config --global user.email "XXX@163.com"
```
###
### 生成 ssh 相关文件
```javascript
ssh-keygen -t rsa -C "XXX@163.com"
```
##
## 第三步:授权到远端 Ecs
### 复制本地端的 id_rsa.pub
注意应该是以 ssh-rsa 开头到 XXXXX.XXXXX.XXXX 结束的一段,这个可能是个会导致错误的点,建议如果你登录失败的时候可以回来看看这边是不是错了
###
### 登录远程 Ecs创建 authorized_keys 文件
在 .ssh 文件夹下创建 authorized_keys 文件,并将之前复制的 id_rsa.pub 内容粘贴进去
```javascript
# 参考代码
cd ~/.ssh
touch authorized_keys
vim authorized_keys
```
###
### 更改授权 (可选)
```javascript
# 设置所有人可以读写及执行
chmod 777 ~/.ssh
# 设置拥有者可读写
chmod 600 ~/.ssh/authorized_keys
```
> 这一步可以按自己的需要来设置
## 最后:就可以免密登录啦~
现在打开本机的终端terminalzsh 输入下面的代码就可以实现免密登录啦
```javascript
ssh ${用户名}@${ip地址 或者 域名}
```

118
docs/blog/trivisCIIntro.md Normal file
View File

@ -0,0 +1,118 @@
---
nav:
title: 文章
path: /blog
order: 999
category: Components
title: travisCI 持续集成 gh-page 并部署
group: 2018年
---
## travisCI 持续集成 gh-page 并部署
我们大多数公司在做项目时,应该都碰到过,当代码被 push 上 git 或者是 svn 时,过几分钟就可以在线上实时看到我们的项目,就像看到亲生儿子一样,但是肯定很多人不知道这是怎么实现的(如果你知道,那可以不用往下看了,点个赞就去吃饭吧...),所以今天我就来给大家介绍一下其中的一款 travis-CI请记住它的 face
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f71251406fc86~tplv-t2oaga2asx-image.image)
持续集成Continuous integration的核心思想代码先自动化测试用例通过后集成到主干。它细分的话有两个概念
- 持续交付
- 持续部署
> 简单来说持续部署是持续交付的下一步,持续交付是测试阶段,部署就是测试通过阶段。,这个就有很多东西展开了,求我我就告诉你...
## 准备
- GitHub 账号(作为一个合格的程序员,你没有真的好吗?)
- travis-CI 平台接入
- GITHUB_TOKEN
- 给我点赞...
## 第一步
登录 CI 官网,然后连接自己的 gitHub这个时候 Legacy Services Integration 应该默认显示了几个自己 gitHub 的项目
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f6c4922b8c7a6~tplv-t2oaga2asx-image.image)
如果显示不全,可以按左边的 sync 同步一下
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f6c6433ce6888~tplv-t2oaga2asx-image.image)
然后第一张图每个项目的边上有一个 switch 开关,你想要让哪个集成就打开哪个吧(不截图了,我懒...
## 第二步
进入自己的 gh 主页依次GitHub settings -> developer settings -> Personal access tokens勾选权限自由发挥你要全勾也行...
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f6d80fb076590~tplv-t2oaga2asx-image.image)
将生成的 token 复制备用
## 第三步
回到 CI打开你打开开关的那个项目的 settings看到你很绕我就放心了...),进入配置页面,在 Environment Variables 里填入以下内容:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f6f783dbe0143~tplv-t2oaga2asx-image.image)
> 分别对应git 项目、项目分支(我这里的分支是 gh-pages、token、Git-email、Git-username
## 第四步
在项目根目录配置个文件叫 .travis.yml,打包项目以 vue-cli 为例,内容如下:
```
language: node_js
# nodejs版本
node_js:
- '8.9.1'
# S: Build Lifecycle
install:
- npm install
script:
- npm run build
# 这个是不是看着很熟悉?
after_script:
- cd ./dist
- git init
- git config user.name "${USER_NAME}"
- git config user.email "${USER_EMAIL}"
- git add .
- git commit -m "nicecoders.github.io"
- git push --force --quiet "https://${test_token}@${GH_REF}" master:${P_BRANCH}
# E: Build LifeCycle
# 只对某个分支行为生效
branches:
only:
- master
```
## 第四点五步
打开 CI进入自己构建项目的那个页面打开 job log感受那生怕 error 的快感!(都是泪...
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f702606d46967~tplv-t2oaga2asx-image.image)
当然如果你通过的话,就会有一个 passing 在你的项目标题旁边。
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f7035a73791e3~tplv-t2oaga2asx-image.image)
每次看到这个我都激动的热泪盈眶...
## 第五步
看一下自己在 git 上的项目,是不是出现了这个分支,并且已经自动部署好了?成功的截图。
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f706697e8aeb8~tplv-t2oaga2asx-image.image)
### 部署好的页面
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/13/163f708677ae9c6d~tplv-t2oaga2asx-image.image)
## 后记
现在,你可以疯狂的 push 代码了,其他的事交给 CI 去做就行。
好了,码了这么久的字,你是不是应该:
点个赞?
个赞?
赞?
👍
原文链接:<https://j710328466.github.io/>

View File

@ -14,6 +14,10 @@ group:
可能是因为手机插件类似 ADB 将弹框事件拦截了,关闭或加入白名单就好了
## 适配类问题
<https://github.com/qq34347476/Resource>
## 通过浏览器打开 https 后,无法再次打开 http 链接?
请将下面这串代码删除,删干净一点:

20
docs/tools/record.md Normal file
View File

@ -0,0 +1,20 @@
---
nav:
title: 工具
path: /tools
group:
title: 录屏
order: 4
---
## 软件推荐
obs: 开源软件,后续好好研究一下,也有 mac 版本
<https://obsproject.com/zh-cn/download>
## 常见问题
1. 英伟达显卡不支持
将流媒体的导出格式改为软件,有两个地方:视频编码器,和直播编码器