Bxmo-blog

介绍

用 Vue3+Typescript 写一个博客

软件架构

软件架构说明

前端

使用 UI： Ant-Design-Vue - 按需引入

Vue-Router

Vuex

Typescript

babel

eslint - 仅使用了防止错误的推荐规范以及结尾必须加分号。

commit 规范

依照文章

husky

lint-staged

commitlint

commitizen

conventional-changelog

安装教程

```
cd frontend
```
```
npm install
```

使用说明

热启动
```
npm run serve
```

部署说明

部署项目，你首先需要在机器上安装 docker 和 docker-compose 。

对于前端，你需要先进行构建发布

cd frontend
npm run build
cd ..

本前端项目采用 Docker + Nginx 方式部署

cd deploy

请检查 docker-compose.yml 文件，请将 volumes 设置成你的目录，以 bxmo-blog 为基准

version: "3"

services:
  nginx: #服务名称
    image: nginx:latest
    container_name: bxmo-blog-frontend
    ports:
      - 80:80
    volumes: # 相对路径
      - ../frontend/dist:/usr/share/nginx/html
      - ./default.conf:/etc/nginx/conf.d/default.conf
    privileged: true

然后，确保你在 bxmo-blog 目录。

docker-compose up -d

项目将在 localhost 或 localhost:80 地址上部署。

如果 docker-compose up -d 提示已有容器，则应当输入
docker-compose up -d --force-recreate
来进行构建

如果你嫌麻烦，我也提供了一个脚本来帮助你进行构建部署前端，通过这种方式，可以直接在对应目录依次执行 npm run build + docker-compose up -d。

# /bxmo-blog
cd ./deploy
bash deploy.sh

终止

docker container stop bxmo-blog-frontend

删除

docker container prune # 这个命令实际上会删除所有终止的容器

进入容器

docker exec -it bxmo-blog-frontend bash

自构建部署

推荐使用我写的 Docker 镜像 - xmolan:ubuntu:0.1 ，

构建执行 shell命令 。

cd frontend
npm install --production
sudo npm run build
sudo cp -af dist/. /var/www/html

Git Commit 规范

支持 Angular 的 Commit message 格式。

用 npm run commit 代替 git commit ，帮助输入规范化的 commit 内容。

git add .
npm run commit

生成 CHANGELOG

npm run changelog

tree-lock / bxmo-blog