MarkovJuniorWeb 项目启动与配置教程

1. 项目目录结构及介绍

MarkovJuniorWeb 项目的目录结构如下：

MarkovJuniorWeb/
├── public/                   # 公共静态文件目录
│   ├── css/                  # CSS 文件目录
│   ├── img/                  # 图片文件目录
│   └── js/                   # JavaScript 文件目录
├── src/                      # 源代码目录
│   ├── assets/               # 资源文件目录
│   ├── components/           # Vue 组件目录
│   ├── App.vue               # 主组件
│   ├── main.js               # 入口文件
│   └── ...
├── .gitignore                # Git 忽略文件列表
├── package.json              # 项目依赖和配置文件
├── package-lock.json         # 项目依赖锁定文件
├── README.md                 # 项目说明文件
└── ...

public/

公共静态文件目录，包含 CSS、图片和 JavaScript 文件等。

src/

源代码目录，包含项目的所有 Vue 组件和 JavaScript 代码。

.gitignore

Git 忽略文件列表，用于指定 Git 忽略提交的文件或目录。

package.json

项目依赖和配置文件，用于定义项目的名称、版本、依赖等。

package-lock.json

项目依赖锁定文件，用于锁定项目的依赖版本，确保项目在不同环境中依赖一致。

README.md

项目说明文件，用于介绍项目的基本信息和如何使用。

2. 项目的启动文件介绍

项目的启动文件为 src/main.js。

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

Vue.config.productionTip = false

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

该文件是 Vue 应用的入口文件，它导入了 Vue 和主组件 App.vue，然后创建了一个 Vue 实例并挂载到 DOM 中的 #app 元素上。

3. 项目的配置文件介绍

项目的配置文件为 package.json 中的 scripts 部分。

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

scripts

该部分定义了项目的命令行脚本。

• "serve"：启动开发服务器。
• "build"：构建生产环境的代码。
• "test:unit"：运行单元测试。
• "test:e2e"：运行端到端测试。

使用 npm run 命令加上对应的脚本名称即可执行相关操作。例如，启动开发服务器可以运行 npm run serve。