发布于 由admin

阐述 Vue CLI 的工作原理，包括其插件系统和配置管理。

各位靓仔靓女们，大家好！欢迎来到今天的“Vue CLI 深度解剖”讲座。今天咱们不整虚的，直接扒开 Vue CLI 的皮，看看它到底是个什么玩意儿，怎么做到这么方便快捷地搭建 Vue 项目的。准备好了吗？Let’s dive in!

开场白：Vue CLI 是个啥？

首先，我们得搞清楚 Vue CLI 到底是什么。简单来说，Vue CLI (Command Line Interface) 就是一个 Vue.js 的脚手架工具。你可以把它想象成一个“Vue 项目生成器”，它能帮你快速搭建一个配置好的 Vue 项目，省去了你手动配置 Webpack、Babel 等一堆工具的麻烦。

想象一下，你要盖房子，Vue CLI 就像一个预制板工厂，你只需要告诉它你要盖什么样的房子（选择一些预设的配置），它就能给你提供一套完整的预制板，你只需要把它们拼起来就行了。

Vue CLI 的核心功能：

  • 项目初始化: 通过 vue create my-project 命令，快速创建一个 Vue 项目。
  • 插件系统: 提供丰富的插件，可以扩展项目的功能，比如添加路由、状态管理、单元测试等等。
  • 图形化界面: 提供一个友好的图形化界面，可以管理项目、安装插件、配置参数等等。
  • Presets: 允许你保存常用的配置，下次创建项目时直接使用。
  • 开发服务器: 内置一个开发服务器，支持热重载，方便开发调试。
  • 构建工具: 内置 Webpack，可以打包、优化你的代码。

第一部分：Vue CLI 的工作原理

Vue CLI 的核心工作原理可以概括为以下几个步骤：

  1. 读取配置: 当你运行 vue create my-project 命令时，Vue CLI 首先会读取你的配置，包括你选择的 Preset、安装的插件等等。
  2. 生成项目结构: 根据你的配置，Vue CLI 会生成一个包含各种文件和目录的项目结构，比如 src 目录、public 目录、package.json 文件等等。
  3. 安装依赖: Vue CLI 会根据 package.json 文件中的依赖列表，自动安装项目所需的依赖包，比如 Vue、Vue Router、Vuex 等等。
  4. 配置 Webpack: Vue CLI 会自动配置 Webpack，包括配置 loader、插件、优化选项等等。
  5. 启动开发服务器: Vue CLI 会启动一个开发服务器，并监听文件的变化，当文件发生变化时，会自动重新编译代码并刷新浏览器。

深入 Webpack 配置

Webpack 是 Vue CLI 的核心，让我们稍微深入一下 Webpack 的配置。Vue CLI 允许你通过 vue.config.js 文件来定制 Webpack 的配置。

// vue.config.js
module.exports = {
  // options...
  configureWebpack: {
    // webpack 配置项
    plugins: []
  },
  chainWebpack: config => {
    // 修改 webpack 配置
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改 vue-loader options...
          return options
        })
  }
}
  • configureWebpack: 可以直接修改 Webpack 的配置对象。
  • chainWebpack: 使用 webpack-chain 这个库来修改 Webpack 的配置，更加灵活。

代码示例：配置 Webpack 的 loader

假设你想使用 Sass 来编写样式，你需要配置 Webpack 的 Sass loader。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/.scss$/)
      .use('vue-style-loader')
        .loader('vue-style-loader')
        .end()
      .use('css-loader')
        .loader('css-loader')
        .end()
      .use('sass-loader')
        .loader('sass-loader')
        .end()
  }
}

第二部分：Vue CLI 的插件系统

Vue CLI 的插件系统是其强大的扩展能力的关键。插件可以扩展项目的功能，比如添加路由、状态管理、单元测试等等。

插件的原理：

Vue CLI 插件本质上就是一个 Node.js 模块，它导出一个函数，这个函数接收两个参数：

  • api: Vue CLI 插件 API，可以用来访问和修改项目的配置。
  • options: 插件的配置选项。
// 一个简单的插件
module.exports = (api, options) => {
  // 添加一个命令
  api.registerCommand('hello', () => {
    console.log('Hello, world!');
  });

  // 修改 webpack 配置
  api.chainWebpack(config => {
    // ...
  });
};

常用的插件：

插件名称 功能描述
@vue/cli-plugin-router 添加 Vue Router
@vue/cli-plugin-vuex 添加 Vuex
@vue/cli-plugin-eslint 添加 ESLint 代码检查
@vue/cli-plugin-unit-jest 添加 Jest 单元测试
@vue/cli-plugin-typescript 添加 TypeScript 支持

如何使用插件：

你可以通过 vue add plugin-name 命令来安装插件。例如，要安装 Vue Router 插件，你可以运行以下命令：

vue add @vue/cli-plugin-router

Vue CLI 会自动安装插件，并修改项目的配置，比如添加 Vue Router 的依赖、创建 router 目录等等。

自定义插件：

你也可以编写自己的 Vue CLI 插件，来扩展项目的功能。

  1. 创建一个 Node.js 模块: 创建一个包含 index.js 文件的目录，这个文件就是插件的入口文件。
  2. 编写插件代码: 在 index.js 文件中编写插件代码，使用 Vue CLI 插件 API 来访问和修改项目的配置。
  3. 发布插件: 将插件发布到 npm 上，或者直接在本地使用。

代码示例：一个简单的自定义插件

假设你想创建一个插件，自动在每个 Vue 组件中添加一个 console.log 语句。

// plugins/vue-cli-plugin-log/index.js
module.exports = (api, options) => {
  api.chainWebpack(config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改 vue-loader options...
          options.compilerOptions = options.compilerOptions || {};
          options.compilerOptions.transforms = options.compilerOptions.transforms || [];
          options.compilerOptions.transforms.push(
            require('./transform') // 引入 transform 函数
          );
          return options;
        });
  });
};
// plugins/vue-cli-plugin-log/transform.js
module.exports = function transform(node) {
  if (node.type === 1) { // ELEMENT_NODE
    node.children.unshift({
      type: 2, // TEXT_NODE
      text: 'console.log("Hello from your Vue component!");',
      isComment: true
    });
  }
};

这个插件使用了 vue-template-compiler 的 transform 功能，在每个 Vue 组件的根元素中添加了一段 console.log 代码。

第三部分：Vue CLI 的配置管理

Vue CLI 的配置管理主要涉及到以下几个文件：

  • package.json: 包含项目的基本信息、依赖列表、脚本命令等等。
  • vue.config.js: Vue CLI 的配置文件，可以用来定制 Webpack 的配置、配置开发服务器等等。
  • .env 文件：用于配置环境变量。

package.json 文件

package.json 文件是 Node.js 项目的描述文件，它包含了项目的基本信息、依赖列表、脚本命令等等。

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}
  • name: 项目的名称。
  • version: 项目的版本号。
  • scripts: 定义了可以运行的脚本命令，比如 serve、build、lint 等等。
  • dependencies: 定义了项目运行时依赖的包。
  • devDependencies: 定义了项目开发时依赖的包。

vue.config.js 文件

vue.config.js 文件是 Vue CLI 的配置文件，你可以用来定制 Webpack 的配置、配置开发服务器等等。

// vue.config.js
module.exports = {
  publicPath: '/', // 部署应用包时的基本 URL
  outputDir: 'dist', //  生产环境构建文件的目录
  assetsDir: 'static', //  放置生成的静态资源 (js、css、img、fonts) 的目录
  devServer: {
    port: 8080, //  配置开发服务器端口
    proxy: {
      '/api': {
        target: 'http://localhost:3000', //  配置代理服务器
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // ...
}
  • publicPath: 部署应用包时的基本 URL。
  • outputDir: 生产环境构建文件的目录。
  • assetsDir: 放置生成的静态资源 (js、css、img、fonts) 的目录。
  • devServer: 配置开发服务器。

.env 文件

.env 文件用于配置环境变量。你可以创建多个 .env 文件，比如 .env.development、.env.production 等等，分别对应不同的环境。

// .env.development
NODE_ENV=development
VUE_APP_API_URL=http://localhost:3000/api

在 Vue 组件中，你可以通过 process.env.VUE_APP_API_URL 来访问环境变量。

<template>
  <div>
    API URL: {{ apiUrl }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL
    }
  }
}
</script>

第四部分：Presets

Vue CLI Presets 允许你保存常用的配置，下次创建项目时直接使用。你可以创建一个包含 .vue-cli 目录的 Git 仓库，然后在 .vue-cli 目录中创建一个 presets.json 文件，定义你的 Preset。

// presets.json
{
  "my-preset": {
    "useConfigFiles": true,
    "plugins": {
      "@vue/cli-plugin-babel": {},
      "@vue/cli-plugin-eslint": {
        "config": "airbnb",
        "lintOn": [
          "save",
          "commit"
        ]
      },
      "@vue/cli-plugin-router": {},
      "@vue/cli-plugin-vuex": {}
    }
  }
}

然后，在创建项目时，你可以选择你的 Preset：

vue create my-project --preset git+https://github.com/your-username/your-preset.git

高级技巧：

  • 使用 vue inspect 命令来查看 Vue CLI 的 Webpack 配置。
  • 使用 vue ui 命令来启动 Vue CLI 的图形化界面。
  • 使用 vue invoke 命令来手动调用插件的 install 函数。

总结：

Vue CLI 是一个非常强大的工具，可以帮助你快速搭建 Vue 项目，提高开发效率。通过深入了解 Vue CLI 的工作原理、插件系统和配置管理，你可以更好地利用它来构建你的 Vue 应用。

希望今天的讲座对大家有所帮助。记住，编程之路漫漫，保持学习的热情，才能不断进步！

有问题欢迎随时提问，下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注