`vue-g6-editor` 项目教程

1. 项目目录结构及介绍

以下是 vue-g6-editor 的主要目录结构及其功能说明：

vue-g6-editor/
├── public/           # 静态资源目录，包括 favicon 和 index.html 文件
├── src/              # 项目源代码目录
│   ├── browserslistrc  # 浏览器兼容性列表配置
│   ├── env/            # 环境变量配置
│   ├── gitignore       # .gitignore 文件，指定忽略的文件和目录
│   ├── jest.config.js  # Jest 测试配置
│   ├── package.json    # 项目依赖和脚本配置
│   ├── vue.config.js   # Vue CLI 配置文件
│   └── ...             # 其他源代码文件，如 components、router、store 等
└── ...                # 其他项目相关文件，如 README.md、.editorconfig 等

• public: 项目的基础资源文件，包括 HTML 页面模板 index.html。
• src: 主要的代码目录，包含应用的各种组件、路由、状态管理等。
• browserslistrc: 定义支持哪些浏览器，影响构建时 autoprefixer 的设置。
• env: 环境变量文件，可以用来区分开发和生产环境。
• gitignore: 忽略 Git 版本控制的文件或目录。
• jest.config.js: Jest 测试框架的配置文件。
• package.json: 项目依赖和自定义脚本。
• vue.config.js: Vue CLI 的配置文件，用于自定义构建过程。

2. 项目的启动文件介绍

vue-g6-editor 使用 Vue CLI 创建，因此默认的启动文件是位于 src/main.js 中。这是应用程序入口，Vue 实例在这里被创建并挂载到 DOM 上。除此之外，还引入了其他重要组件和全局配置。

// 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');

这里的 App.vue 是应用的顶层组件，router 和 store 分别导入了路由管理和 Vuex 状态管理对象。

3. 项目的配置文件介绍

3.1 vue.config.js

这个文件是用来定制 Vue CLI 服务和构建步骤的。例如，你可以配置输出路径、代理服务器、添加额外的 webpack 配置等。

module.exports = {
  // 输出目录
  outputDir: 'dist',
  // 开发时的静态资源目录
  publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
  // 生产环境是否去除 console.log
  productionSourceMap: false,
  // 配置代理
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

3.2 .browserslistrc

.browserslistrc 文件指定浏览器兼容性。以下是一个例子，它表示支持最新两个版本的 Chrome、Firefox 和 Safari，以及 IE11：

> 0.5%
last 2 versions
not dead
ie 11

3.3 .env 和 .env.* 文件

这些文件用于设置环境变量，通常会包含 API URL、密钥等敏感信息。.env.development 和 .env.production 分别用于开发和生产环境。

例如：

VUE_APP_API_URL=http://localhost:8080/api

通过 process.env.VUE_APP_API_URL 在代码中访问该值。

至此，我们对 vue-g6-editor 的基本目录结构、启动文件和配置文件有了一个概览。要在本地运行项目，只需执行 npm install 安装依赖，然后运行 npm run serve 启动开发服务器。