# vue3-vite-blog

**Repository Path**: ceartmy/vue3-vite-blog

## Basic Information

- **Project Name**: vue3-vite-blog
- **Description**: 博客
Vue 3.x + TypeScript + Vite +
Pinia + element-plus + Tailwind +sass +esnext
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://www.ceart.top
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-05-03
- **Last Updated**: 2023-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 开发进行中, ESNEXT, Pinia, vite, element-plus

## README




![](https://img.shields.io/badge/build-passing-brightgreen) ![](https://img.shields.io/badge/progress-100%25-blue) ![](https://img.shields.io/badge/维护状态-长期维护-green)


**个人博客(Vue 3/Vite/TypeScript)**

[个人博客:ceart.top](https://www.ceart.top)

`@功能`

- [x] 登录/注册
- [x] 文章
- [x] 作品集
- [x] 标签云
- [x] 留言板
- [x] 点赞
- [x] 流量/访客/用户信息
- [x] 换肤
- [x] pwa 断网访问

## 目录结构指南
### 代码相关目录
````js
`vue3-vite-blog`
├──`app` 前端文件与接口文件
├──`lib` Node端文件
（app应该前端框架、前端模块、后端接口业务代码，另见其他章节）
├──`index.js` 主程序入口
├──`(其他).js` 其他同级别程序的入口
（最上级的文件夹只能有入口程序，其他功能性文件应该收入到`lib`）
````
### 配置目录
````js
`vue3-vite-blog`
├──`config` 项目有关的配置文件夹
├──`config.example` 项目有关的示例配置文件夹
（配置统一使用`config.*.json`格式，示例文件使用`jsonc`格式用于注释）

├──`.eslintrc.js` ESLint配置
├──`jsconfig.json` VSCode的JS项目配置
├──`package.json` 项目信息
├──`-lock.*` NPM、PNPM、YARN的锁定（如有更新直接提交覆盖）
├──`postcss.config.cjs` PostCSS配置
├──`tailwind.config.cjs` Tailwind配置
└──`vite.config.js` Vite配置
````
### 开发相关目录
````js
`vue3-vite-blog`
├──`.vscode` VSCode配置
│   ├──`extensions.json` 需要安装启用的VSCode插件
│   ├──`launch.json` 编辑配置
│   └──`settings.json` 调试启动配置
├──`bash` Linux系统脚本
│   └──`install` 初始安装CentOS的脚本
│       ├──`0-all.sh` 离线安装全部需要的程序
│       └──`(其他)` 其他视情况使用
└──`docs` 文档文件夹
````

## 部分截图
<img src="https://gitee.com/ceartmy/vue3-vite-blog/raw/master/docs/images/home.png" width="100%" />
<img src="https://gitee.com/ceartmy/vue3-vite-blog/raw/master/docs/images/link.png" width="100%" />
<img src="https://gitee.com/ceartmy/vue3-vite-blog/raw/master/docs/images/works.png" width="100%" />
<img src="https://gitee.com/ceartmy/vue3-vite-blog/raw/master/docs/images/about.png" width="100%" />


## 相关文档
### vue3.x
- https://vue3js.cn/
### vite
- https://cn.vitejs.dev/guide/
### typescript
- https://www.tslang.cn/docs/handbook/basic-types.html
### Tailwind
- https://www.tailwindcss.cn/docs/responsive-design
### sass
- https://www.sass.hk/docs/
### element-plus
- https://element-plus.gitee.io/zh-CN/component/button.html
### Font Awesome
- https://fontawesome.dashgame.com/
- https://fontawesome.com/icons?d=gallery&m=free
- http://www.fontawesome.com.cn/faicons/
### ES6
- https://es6.ruanyifeng.com/#docs/intro
### node
- http://nodejs.cn/api/
### pinia
- https://pinia.web3doc.top/introduction.html

### 其他配置
- robots.txt
- pwa 断网访问
- chrome浏览器网址：chrome://apps/

## 踩坑记录
### 1.Pinia 报错 getActive Pinia was called with no active Pinia？
- 问题原因：在全局store还没有挂载到app上的时候，就引入进来了，这时候里面useStore在全局代码下就调用了，这样导致了pinia实例还没挂载。所以不能在全局下调用store = useStore();
- 解决方案: 见store/init.ts

### 2.npm下载不了vite-plugin-imagemin
- yarn add vite-plugin-imagemin -D
### 3.getCurrentInstance().$refs.hssMd打包完获取不到dom
- const hssMd = ref<HTMLElement | null>(null)