Education-Clock 项目启动与配置教程

1. 项目目录结构及介绍

Education-Clock/
├── docs/             # 项目文档
├── src/              # 源代码目录
│   ├── assets/       # 静态资源，如图片、样式表等
│   ├── components/   # Vue组件
│   ├── views/        # 页面视图
│   ├── router/       # 路由配置
│   ├── store/        # Vuex状态管理
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── .env.*            # 环境变量配置文件
├── package.json      # 项目依赖和配置
├── README.md         # 项目说明文件
└── ...

• docs/: 存放项目相关文档。
• src/: 源代码目录，包含所有的开发文件。
  • assets/: 存放静态资源，如图片、CSS样式表等。
  • components/: 存放Vue组件，用于构建页面的可复用部分。
  • views/: 存放页面文件，每个文件代表一个页面。
  • router/: 存放路由配置文件，定义了应用的路由规则。
  • store/: 存放Vuex状态管理文件，用于集中管理应用的状态。
  • App.vue: 根组件，所有页面和组件都将在这个组件中渲染。
  • main.js: 项目的入口文件，用于创建Vue实例并挂载根组件。

2. 项目的启动文件介绍

项目的启动文件是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库、根组件App.vue、路由配置router和状态管理store。
• 创建Vue实例，并将路由和状态管理器注入。
• 使用render函数渲染根组件，并挂载到页面的#app元素上。

3. 项目的配置文件介绍

项目的配置文件主要包含环境变量配置，如.env.development和.env.production。以下是.env.development的示例内容：

# .env.development

VUE_APP_TITLE=Education-Clock
VUE_APP_API_URL=http://localhost:3000

• VUE_APP_TITLE: 设置项目的标题，可以在应用中通过process.env.VUE_APP_TITLE访问。
• VUE_APP_API_URL: 设置开发环境下的API地址，同样可以在应用中通过process.env.VUE_APP_API_URL访问。

确保所有环境变量的前缀为VUE_APP_，这样它们才能在Vue应用中被正确识别和使用。