Enhanced-Editing-legacy-version 项目启动与配置教程

1. 项目目录结构及介绍

项目的目录结构如下所示：

Enhanced-Editing-legacy-version/
├── .gitignore
├── .vscode
│   └── settings.json
├── assets
│   └── images
│       └── example.png
├── dist
│   └── index.html
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── Editor.vue
│   ├── main.js
│   ├── App.vue
│   └── utils
│       └── helper.js
└── vue.config.js

以下是对各个目录和文件的简要说明：

• .gitignore：配置 Git 忽略的文件和目录。
• .vscode：Visual Studio Code 的配置文件。
• assets：存放项目资源文件，如图片等。
• dist：构建后的静态文件目录。
• package-lock.json：锁定安装的依赖包版本。
• package.json：项目配置文件，定义项目的依赖和脚本。
• public：存放公共文件，如入口 HTML 文件。
• src：源代码目录，包含组件和 JavaScript 文件。
• vue.config.js：Vue CLI 的配置文件。

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 实例，并挂载到 DOM 的 #app 元素上。它是项目启动的核心文件。

3. 项目的配置文件介绍

项目的配置文件为 vue.config.js，以下是该文件的内容：

module.exports = {
  // 基本路径
  publicPath: '/',
  // 构建时的输出目录
  outputDir: 'dist',
  // 放置静态资源的目录
  assetsDir: 'static',
  // html的输出路径
  indexPath: 'index.html',
  // 文件名哈希
  filenameHashing: true,
  // eslint-loader 是否在保存的时候检查
  lintOnSave: process.env.NODE_ENV !== 'production',
  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,
  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],
  // 生产环境 sourceMap
  productionSourceMap: false,
  // 跨域设置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null // 设置代理
  }
}

该文件用于配置 Vue CLI 的各种参数，如基本路径、输出目录、静态资源目录、HTML 输出路径、文件名哈希、ESLint 检查、是否使用包含运行时编译器的 Vue 核心构建等。通过修改这个文件，可以自定义项目的构建过程和开发服务器配置。