/Blog-Vue

Blog project for Vue

Primary LanguageVue

YanLin-Blog-Vue3

使用Vue3的前后端分离的个人博客

在线演示

后端API 地址

主要技术栈

Vue3全家桶

使用

展开查看使用

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

目录

博客功能

页面

  • Home 主页
  • News 新闻页
  • Biography 时间线页
  • Download 下载页面
  • Contsat 联系页面
  • About 关于页面
  • 404 错误页面

效果展示

PC端

展开查看详细

主页
主页

新闻页
新闻页

时间线
时间线

下载页
下载页

收集表单
联系页

关于
关于页

移动端

展开查看详细

主页
主页

新闻页
新闻页

时间线
时间线

下载页
下载页

收集表单
联系页

关于
关于页

文件树

.
├─preview                               #预览图
│  ├─landscape
│  └─portrait
├─public                                #静态资源
│  ├─images
│  │  ├─background
│  │  │  └─article
│  │  └─icon
│  ├─img
│  │  └─封面
│  ├─live2d                             #live2D模型
│  │  └─bilibili-live
│  │     ├─22
│  │     └─33
│  └─style                              #某些静态样式
└─src                                   #主要代码目录
    │  App.vue
    │  main.js
    ├─assets
    │  ├─config
    │  │   ├─particlesjs-config.json    #粒子系统配置
    │  │   └─waifu-tips.json
    │  └─live2d
    ├─components                        #组件
    │  │  Live2D.vue                    #live2D的组件
    │  │  MyLogo.vue
    │  │  Particle.vue                  #粒子背景组件
    │  ├─About
    │  ├─Biography
    │  ├─Contact
    │  ├─Download
    │  ├─Home
    │  ├─News
    │  └─Subpage
    ├─pages                             #页面
    │  ├─About.vue
    │  ├─Biography.vue
    │  ├─Contact.vue
    │  ├─Download.vue
    │  ├─Home.vue
    │  ├─News.vue
    │  └─NotFound.vue
    ├─router                            #Vue-router
    │  └─index.js
    └─store                             #Vuex
       ├─heardStatus.js
       ├─index.js
       ├─videoInfo.js
       └─windowSize.js

License

Yan_Lin