Rem-Craft 开源项目教程

1. 项目的目录结构及介绍

Rem-Craft 项目的目录结构如下：

Rem-Craft/
├── assets/
│   ├── css/
│   ├── fonts/
│   ├── img/
│   └── js/
├── components/
│   ├── Header.vue
│   ├── Footer.vue
│   └── ...
├── config/
│   ├── default.json
│   └── production.json
├── public/
│   └── index.html
├── src/
│   ├── api/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── utils/
│   └── main.js
├── .env
├── .gitignore
├── package.json
└── README.md

目录结构介绍

• assets/: 存放静态资源文件，如 CSS、字体、图片和 JavaScript 文件。
• components/: 存放 Vue 组件文件。
• config/: 存放项目的配置文件，如 default.json 和 production.json。
• public/: 存放公共资源文件，如 index.html。
• src/: 存放源代码文件，包括 API、组件、路由、状态管理等。
• .env: 环境变量配置文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/main.js，它是整个应用的入口文件。以下是 src/main.js 的主要内容：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

启动文件介绍

• 导入 Vue 和相关模块。
• 配置 Vue 的 productionTip。
• 创建 Vue 实例并挂载到 #app 元素上。

3. 项目的配置文件介绍

项目的配置文件主要存放在 config/ 目录下，包括 default.json 和 production.json。

config/default.json

{
  "apiUrl": "http://localhost:3000",
  "debug": true
}

config/production.json

{
  "apiUrl": "https://api.example.com",
  "debug": false
}

配置文件介绍

• apiUrl: API 的 URL。
• debug: 是否开启调试模式。

这些配置文件在项目运行时会被加载，根据不同的环境（开发或生产）加载相应的配置。