引言

Vue CLI 是 Vue 官方提供的命令行工具，它极大地简化了 Vue 项目搭建的过程。通过 Vue CLI，开发者可以快速搭建一个符合现代前端开发规范的项目结构，并自动配置了一系列的开发工具，如 Babel、Webpack、ESLint 等。本文将深入解析 Vue CLI 的各个文件及其配置技巧，帮助开发者更好地理解和使用 Vue CLI。

Vue CLI 文件结构解析

Vue CLI 创建的项目通常包含以下文件和目录：

  • node_modules: 存放项目依赖的第三方模块。
  • src: 项目源码目录，包括组件、页面、路由、Vuex 等文件。
  • public: 公共资源目录，如静态文件和 HTML 文件。
  • package.json: 项目配置文件，描述了项目依赖、脚本等信息。
  • vue.config.js: Vue CLI 配置文件，可以自定义webpack配置等。
  • .browserslistrc: 指定浏览器兼容性配置。
  • .editorconfig: 编辑器配置文件。
  • .eslintignore: ESLint 忽略文件。
  • .eslintrc.js: ESLint 配置文件。
  • .gitignore: Git 忽略文件。
  • .prettierrc: Prettier 配置文件。

核心文件讲解

1. index.html

index.html 是项目的入口文件，通常包含以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue CLI 项目</title>
</head>
<body>
  <div id="app"></div>
  <!-- 引入 Vue 和项目入口文件 -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script src="./src/main.js"></script>
</body>
</html>

2. main.js

main.js 是项目的入口文件，负责创建 Vue 实例并挂载到 DOM 上：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

3. App.vue

App.vue 是项目的根组件，通常包含以下内容：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 样式 */
</style>

Vue CLI 配置技巧

1. 使用 vue.config.js 自定义配置

Vue CLI 允许开发者通过 vue.config.js 文件自定义 webpack 配置。以下是一些常见的配置项：

module.exports = {
  // 基本路径
  publicPath: '/',
  // 输出文件目录
  outputDir: 'dist',
  // 放置静态资源的目录
  assetsDir: 'static',
  // 构建时的源码目录
  sourceDir: 'src',
  // 是否自动在 HTML 文件中注入资源（如：js 和 css）
  autoImport: false,
  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,
  // 生产环境 source map
  productionSourceMap: false,
  // 是否为 Babel 或 TypeScript 使用 thread-loader
  parallel: require('os').cpus().length > 1,
  // 是否使用运行时编译器
  runtimeCompiler: true,
  // webpack 配置
  configureWebpack: config => {},
  // webpack 链接配置
  chainWebpack: config => {},
  // PWA 插件相关配置
  pwa: {},
  // 第三方插件配置
  pluginOptions: {}
}

2. 使用插件扩展功能

Vue CLI 支持使用插件扩展功能。以下是一些常用的插件：

  • vue-router: Vue 路由插件，用于配置路由。
  • vuex: Vuex 状态管理插件，用于管理应用状态。
  • axios: HTTP 客户端插件，用于发送 HTTP 请求。
  • element-ui: Element UI 组件库插件，提供丰富的 UI 组件。

3. 使用预处理器和加载器

Vue CLI 支持 Babel 和 TypeScript，可以方便地使用预处理器和加载器。以下是一些常用的预处理器和加载器：

  • Babel: 转译 JavaScript 代码，支持 ES6+ 新特性。
  • TypeScript: TypeScript 是 JavaScript 的超集，提供类型检查和编译功能。
  • Sass/Less/Stylus: CSS 预处理器，提供更丰富的 CSS 语法。
  • Vue-loader: Vue 单文件组件加载器，支持.vue 文件。

总结