Vue CLI 项目教程

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

Vue CLI 项目的目录结构如下：

vue-cli/
├── __mocks__/
├── docs/
├── packages/
├── scripts/
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .tidelift.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── appveyor.yml
├── jest.config.js
├── lerna.json
├── package.json
└── yarn.lock

目录介绍

• __mocks__/: 存放模拟数据文件。
• docs/: 存放项目文档。
• packages/: 存放项目包。
• scripts/: 存放脚本文件。
• .editorconfig: 编辑器配置文件。
• .eslintignore: ESLint 忽略配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略配置文件。
• .tidelift.yml: Tidelift 配置文件。
• CHANGELOG.md: 更新日志文件。
• LICENSE: 许可证文件。
• README.md: 项目说明文件。
• appveyor.yml: AppVeyor 配置文件。
• jest.config.js: Jest 配置文件。
• lerna.json: Lerna 配置文件。
• package.json: 项目依赖和脚本配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

Vue CLI 项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些常用的启动命令：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

启动命令介绍

• serve: 启动开发服务器。
• build: 构建生产环境代码。
• lint: 运行代码检查。

3. 项目的配置文件介绍

Vue CLI 项目的配置文件主要包括以下几个：

.eslintrc.js

ESLint 配置文件，用于配置代码检查规则：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

vue.config.js

Vue CLI 的自定义配置文件，用于覆盖默认配置：

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

babel.config.js

Babel 配置文件，用于配置 JavaScript 转译规则：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

通过以上配置文件，可以对 Vue CLI 项目进行详细的配置和优化。