Blankie 项目启动与配置教程

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

Blankie 项目的目录结构如下：

blankie/
├── .gitignore
├── .vscode/
│   └── settings.json
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   │   └── ...
│   ├── components/
│   │   └── ...
│   ├── App.vue
│   ├── main.js
│   └── ...
├── package.json
├── README.md
└── ...

• .gitignore: 指定在Git版本控制中需要忽略的文件和目录。
• .vscode/: Visual Studio Code编辑器的配置文件夹。
• public/: 存放公共静态文件，如网页的入口文件index.html。
• src/: 源代码目录，包含项目的主要文件。
  • assets/: 存放静态资源，如图片、样式表等。
  • components/: 存放Vue组件。
  • App.vue: 主Vue组件，是应用的根组件。
  • main.js: 应用的入口文件，用于创建Vue实例。
• package.json: 定义项目依赖和脚本。
• README.md: 项目说明文件，通常包含项目信息和安装指南。

2. 项目的启动文件介绍

项目的启动主要通过package.json文件中的脚本实现。以下是package.json中的启动脚本示例：

"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"
}

• "serve": 用于启动开发服务器。执行npm run serve会启动一个本地服务器，通常用于开发和测试。
• "build": 用于构建生产环境的代码。执行npm run build会对项目进行打包，生成可供部署的静态文件。
• "test:unit": 用于运行单元测试。
• "test:e2e": 用于运行端到端测试。

3. 项目的配置文件介绍

项目的配置主要通过vue.config.js文件进行，该文件是Vue CLI项目的可选配置文件。以下是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 // 设置代理
  }
}

此配置文件提供了项目的公共路径、输出目录、静态资源目录、HTML输出路径等配置项，以及开发服务器的相关设置。开发者可以根据项目的实际需求进行相应的调整和配置。