Lunaria 项目启动与配置教程

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

Lunaria 项目的目录结构如下：

lunaria/
│
├── src/                        # 源代码目录
│   ├── components/              # 通用组件
│   ├── pages/                  # 页面组件
│   ├── utils/                  # 工具函数
│   ├── App.vue                  # 根组件
│   └── main.js                 # 入口文件
│
├── public/                     # 公共文件目录
│   ├── index.html               # 页面入口文件
│   └── ...                      # 其他静态资源
│
├── assets/                     # 静态资源目录
│   ├── images/                  # 图片资源
│   ├── styles/                 # 样式资源
│   └── ...                      # 其他资源
│
├── .env.*                       # 环境变量配置文件
├── .eslintrc.js                 # ESLint 配置文件
├── .gitignore                   # Git 忽略文件
├── .prettierrc                  # Prettier 配置文件
├── package.json                 # 项目依赖及脚本配置
├── package-lock.json            # 依赖锁定文件
└── README.md                    # 项目说明文件

目录详细介绍

• src/: 存放项目源代码，包括Vue组件、工具函数等。
• public/: 存放项目的公共文件，如HTML入口文件和静态资源。
• assets/: 存放项目的静态资源，如图片、样式表等。
• .env.*: 环境变量配置文件，用于配置不同的开发环境。
• .eslintrc.js: ESLint 配置文件，用于代码格式化。
• .gitignore: Git 忽略文件，用于指定不被Git管理的文件。
• .prettierrc: Prettier 配置文件，用于代码风格统一。
• package.json: 项目依赖及脚本配置文件。
• package-lock.json: 依赖锁定文件，确保项目依赖的一致性。
• README.md: 项目说明文件，描述项目的基本信息和使用方法。

2. 项目的启动文件介绍

项目的启动文件是 src/main.js，其主要功能如下：

• 引入Vue框架和App组件。
• 使用Vue创建一个应用实例，并将其挂载到 #app 元素上。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

3. 项目的配置文件介绍

项目的配置主要通过以下文件进行：

• .env.*: 用于配置不同环境下的变量，如API地址、端口等。
• package.json: 包含项目的名称、版本、描述、依赖、脚本等信息。

例如，.env.development 文件可能包含如下配置：

VUE_APP_API_URL=http://localhost:3000/api
VUE_APP_PORT=8080

这些环境变量可以在项目代码中通过 process.env.VUE_APP_API_URL 等方式访问。