VueBlog 开源项目搭建与使用教程

VueBlog 开源项目搭建与使用教程

vueBlogvue + node + express + mongodb 个人博客系统项目地址:https://gitcode.com/gh_mirrors/vue/vueBlog

1. 项目目录结构及介绍

VueBlog 的目录结构如下：

.
├── backend         // 后端服务源码（基于SpringBoot）
│   ├── src
│   │   └── main
│   │       ├── java
│   │       │   └── com
│   │       │       └── example
│   │       │           └── vueblog
│   │       │               ├── config
│   │       │               ├── controller
│   │       │               ├── entity
│   │       │               ├── repository
│   │       │               └── service
│   │       └── resources
│   └── pom.xml
└── frontend        // 前端应用源码（基于Vue.js）
    ├── node_modules
    ├── public
    ├── src
    │   ├── assets
    │   ├── components
    │   ├── views
    │   ├── App.vue
    │   ├── main.js
    │   └── router.js
    ├── package.json
    └── babel.config.js

• backend: 包含后端服务的全部代码，包括业务逻辑、数据库模型、配置文件等。
• frontend: 包含前端应用程序的所有资源，如HTML、CSS、JavaScript以及Vue组件。

2. 项目的启动文件介绍

2.1 后端启动文件

• 主类: 在backend/src/main/java/com/example/vueblog/VueblogApplication.java，包含main()方法，用于启动SpringBoot应用。

package com.example.vueblog;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class VueblogApplication {

    public static void main(String[] args) {
        SpringApplication.run(VueblogApplication.class, args);
    }

}

2.2 前端启动文件

• 前端脚本: 在frontend/package.json中的scripts字段，有命令用于启动前端开发服务器(npm run serve)。

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
},

• 使用npm run serve命令，将启动前端Vue.js的开发服务器。

3. 项目的配置文件介绍

3.1 后端配置文件

• application.properties: 在backend/src/main/resources/application.properties，配置数据库连接、服务器端口等相关设置。

spring.datasource.url=jdbc:mysql://localhost:3306/vueblog?useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root
server.port=8080

3.2 前端配置文件

• vue.config.js: 在frontend/vue.config.js，包含Webpack配置的自定义项，如公共路径、代理设置等。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  devServer: {
    proxy: 'http://localhost:8080', // 设置API请求的代理
  },
};

以上即为VueBlog项目的目录结构、启动文件和配置文件的简要介绍。要运行此项目，确保安装了Node.js 和Java环境，并分别在后端与前端的根目录执行mvn spring-boot:run 和 npm install && npm run serve。更多详细的开发过程和文档，参考项目作者提供的视频教程和文档链接。

vueBlogvue + node + express + mongodb 个人博客系统项目地址:https://gitcode.com/gh_mirrors/vue/vueBlog