Feather 项目启动与配置教程

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

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

feather/
├── .gitignore
├── README.md
├── package.json
├── src/
│   ├── assets/
│   │   └── ...
│   ├── components/
│   │   └── ...
│   ├── layouts/
│   │   └── ...
│   ├── pages/
│   │   └── ...
│   ├── plugins/
│   │   └── ...
│   ├── static/
│   │   └── ...
│   ├── styles/
│   │   └── ...
│   ├── templates/
│   │   └── ...
│   └── utils/
│       └── ...
├── themes/
│   └── ...
└── ...

• src/: 是项目的主要目录，包含所有源代码和资源文件。
• src/assets/: 存放项目的静态资源，如图像、字体、样式表等。
• src/components/: 存放可复用的Vue组件。
• src/layouts/: 存放页面布局组件。
• src/pages/: 存放项目中的页面组件。
• src/plugins/: 存放项目中使用的插件。
• src/static/: 存放不会被Webpack处理的静态文件。
• src/styles/: 存放项目的样式文件。
• src/templates/: 存放模板文件。
• src/utils/: 存放项目工具函数。
• themes/: 存放主题相关的文件。

2. 项目的启动文件介绍

项目的启动文件通常是 package.json 文件中定义的脚本。以下是 package.json 中的示例启动脚本：

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

• scripts/dev: 这个脚本是启动开发服务器的命令，通常使用 vue-cli-service serve。
• scripts/build: 这个脚本是构建生产环境版本的命令，使用 vue-cli-service build。

使用以下命令可以启动开发服务器：

npm run dev

或者在Yarn环境中：

yarn dev

3. 项目的配置文件介绍

项目的配置文件可能包含在 vue.config.js 或者 config/ 目录下的文件中。以下是 vue.config.js 的一个基本配置示例：

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 构建时的输出目录
  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 // 设置代理
  },
  // 插件配置
  configureWebpack: () => {},
  // 链接配置
  chainWebpack: () => {}
};

这个配置文件定义了项目的公共路径、输出目录、资源目录、HTML输出路径、文件名哈希处理、ESLint检查、是否使用包含运行时编译器的Vue核心、Babel转换依赖、生产环境SourceMap、开发服务器的配置以及插件和Webpack链式配置。这些配置项可以根据项目的具体需求进行调整。