webpack的基本介绍与使用

最新推荐文章于 2024-07-23 17:25:25 发布
最新推荐文章于 2024-07-23 17:25:25 发布
阅读量389 收藏 16
点赞数 15
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45799465/article/details/140628293
版权

webpack基本介绍及其基础案例

概念

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

基础案例

接下里我将展示一个最基础的案例。

直接运行

首先我们新建一个项目，然后在项目中进行一些基本的操作，然后在文件中引入，看看浏览器能否识别。

utils>count.js 用于定义一个基本的相加函数并返回结果。

pages>index.js 用es6语法引入函数，使用并打印出来。

public>index.htmi 入口文件，用于引入并运行js脚本。

这时候直接运行，浏览器就会报错。因为浏览器识别不了es6语法，因此webpack就派上用场了。

使用webpack打包后运行

初始化项目

 npm init -y

安装webpack依赖

npm install --save-dev webpack webpack-cli

配置webpack文件

在根目录下创建webpack.config.js文件。并填写一些基本的信息。

这里这些配置的信息我先不做过多解释，后面的内容我会对其进行详细解析。

const path = require('path');

module.exports = {
  entry: './pages/index.js', // 指定入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的目录
  }
};
运行webpack

npx webpack

重新运行项目

将打包后的文件地址引入到该文件中。

 可以看到这时候浏览器就已经能够正常的输出打印信息了，这也标志着webpack使用的成功。

webpack五大核心概念及其应用

五大核心概念

Entry（入口）：指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。（从那个文件开始打包）

Output（输出）：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。（输出到哪里如何命名）

Loaders（加载器）：让 webpack 处理那些非 JavaScript 文件（如 CSS、图片、TypeScript 等）。

Plugins（插件）：用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量。（拓展功能）

Mode（模式）：指示 webpack 使用相应模式的内置优化（development开发模式, production生产模式）

Loaders概念应用

编写基本配置文件

这里有两个点需要注意的点：

  1. entry是相对路径
  2. output.path是绝对路径，使用的是node.js中的path语法专门用来处理路径问题。
const path = require('path');

module.exports = {
  // 入口
  entry: './pages/index.js', //相对路径

  // 输出
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: []
  }

  // 插件
  plugins:[],
  
  // 模式
  mode: 'development',

};

处理css文件

下载loader

webpack本身不能够处理css文件，所以我们需要通过loader来帮助webpack解析样式资源。

npm i css-loader style-loader -D

css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块.

style-loader: 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容。

使用loader

创建一个项目，目录如下，并新建一个css文件。

并在入口文件中引入。

在index.html文件中 使用对应的class 

配置webpack文件

这里需要注意的是use里的loader执行顺序是从右到左。

使用效果前后对比

未引入loader时打包报错，终端提示您需要下载一个loader以用于处理css文件。（失败）

引入loader后打包成功，并在页面上对应的div上显示。（成功）

处理less文件

这里的流程同css一样，首先安装依赖，然后编写文件，引入文件，更改webpack配置，最后打包运行。

下载loader
npm i less-loader less -D

less-loader :  负责将 Less 文件编译成 Css 文件。

使用loader

手写less 文件

.box2{
  height: 100px;
  width: 100px;
  background-color: purple;
}
更改webpack配置
const path = require('path');

module.exports = {
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ]
  },

  // 插件
  plugins:[

  ],

  // 模式
  mode: 'development',

};
使用效果前后对比

打包失败

打包成功并正常显示。 

处理sass文件

这里的流程同css一样，首先安装依赖，然后编写文件，引入文件，更改webpack配置，最后打包运行。

下载loader
npm i sass-loader sass -D
使用loader

添加文件（sass,scss）

index.sass

.box3
  width: 100px
  height: 100px
  background-color: hotpink

index.scss

.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}
更改配置
const path = require('path');

module.exports = {
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ]
  },

  // 插件
  plugins:[

  ],

  // 模式
  mode: 'development',

};
使用效果前后对比

处理stylus资源

这里的流程同css一样，首先安装依赖，然后编写文件，引入文件，更改webpack配置，最后打包运行。

下载loader
npm i stylus stylus-loader -D
使用loader

index.stylu

.box5

  width 100px 
  height 100px 
  background-color red
webpack配置
const path = require('path');

module.exports = {
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },

    ]
  },

  // 插件
  plugins:[

  ],

  // 模式
  mode: 'development',

};
使用效果前后对比

处理图片资源

下载loader

在 Webpack4 时，处理图片资源通过 file-loader 和 url-loader 进行处理,

但 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

使用loader
const path = require('path');

module.exports = {
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ]
  },

  // 插件
  plugins:[

  ],

  // 模式
  mode: 'development',

};
使用效果前后对比

图片资源优化
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
  plugins: [],
  mode: "development",
};

parser.dataUrlCondition.maxSize 将小于某个大小的图片转化成 data URI 形式（Base64 格式），这样可以减少请求次数，但相应的打包后的文件体积也将变大。

处理字体图标资源

下载字体图标

这里就不过多赘述了，就是上这个图标库下载一些图标。

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具icon-default.png?t=N7T8https://www.iconfont.cn/

配置webpack

这里需要注意的是 type 属性用的不是asset，而是asset/resource，asset是转bas64 但asset/resource不转，而是直接输出原文件。

const path = require('path');

module.exports = {
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'static/js/main.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ]
  },

  // 插件
  plugins:[

  ],

  // 模式
  mode: 'development',

};
成功示例

更改输出资源的名称和路径

配置webpack
const path = require('path');

module.exports = {
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'static/js/main.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ]
  },

  // 插件
  plugins:[

  ],

  // 模式
  mode: 'development',

};

output.filename   更改入口文件的输出位置

generator.filename  更改某种资源的输出位置

输出文件

可以看到入口文件更改到static>js

图片位置更改为static>imgs

自动清空上次打包资源

webpack配置
const path = require('path');

module.exports = {
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'static/js/main.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist'), //绝对路径
    clean: true,// 自动将上次打包目录资源清空
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ]
  },

  // 插件
  plugins:[

  ],

  // 模式
  mode: 'development',

};

output.clean   清除上一次打包的代码

webpack开发服务器以及自动化

下载命令
npm i webpack-dev-server -D
webpack配置
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
  // 入口
  entry: './index.js', //相对路径

  // 输出
  output: {
    filename: 'static/js/main.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist'), //绝对路径
    clean: true,// 自动将上次打包目录资源清空
  },

  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      }
    ]
  },
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 插件
  plugins:[
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],

  // 模式
  mode: 'development',

};
启动命令
npx webpack serve
 成功示例

大聪明码农徐
关注
  • 15
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
webpack的配置和插件的使用介绍代码
12-25
通过以上内容，你已经了解了Webpack的基本配置和插件使用，但Webpack的功能远不止于此，还包括Source Map、externals、性能分析等高级特性。继续深入学习，可以更好地驾驭Webpack，优化你的前端项目。
webpack配置配置介绍和操作指引
05-27
## 一、Webpack 基本概念 Webpack 是一个静态模块打包器，它会分析你的项目依赖，然后将这些模块打包成静态资源。Webpack 将项目视为一系列可互操作的模块，这些模块可以是 JavaScript 文件，也可以是 CSS、图片、...
webpack-使用webpack-dev-server.rar
04-12
以上就是关于 `webpack-dev-server` 的基本介绍和使用方法。通过熟练掌握这一工具，你可以更高效地进行前端开发，享受无缝的开发体验。在实际项目中，还可以结合其他工具，如 Babel 转换 ES6+ 语法，或者使用 ...
webpack4之SplitChunksPlugin使用指南
08-27
基本使用 在新版本的 Webpack 中，默认对代码进行拆分，拆分的规则是： * 模块被重复引用或者来自 node_modules 中的模块。 * 在压缩前最小为 30kb。 * 在按需加载时，请求数量小于等于 5。 * 在初始化加载时，...
【Webpack】HMR 热更新
小秀的博客
07-20 222
不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会；如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，只会重新编译修改的代码，将新的模块发送到客户端，替换掉旧的模块，不必完全刷新整个应用。HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。时，服务器端会将新的模块发送给客户端，客户端接收到新的模块后会⽤新模块替换旧模块，从⽽实现实时更新。
某矿webpack逆向
screamn的博客
07-23 182
本篇博文的初衷是分享自己学习逆向分析时的个人感悟，所涉及的内容仅供学习、交流，请勿将其用于非法用途！！！任何由此引发的法律纠纷均与作者本人无关，请自行负责！！！推荐文章： WebPack webpack是JavaScript应用程序的模块备份器，可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，备份成符合生产环境部署的前端资源。所有的资源都是通过JavaScript渲染出来的。​ 扣取代码 抓包发现每次请求都需要先请求一个pu
【Vue实战教程】之Vue工程化项目详解
柯晓楠
07-23 545
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。Webpack 可以做到按需加载。遍历源文件 > 匹配规则 > 打包这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。
node后端项目使用webpack打包教程，target: “node“
liangzhenmeng的博客
07-23 638
webpack 能够为多种环境 或 target构建编辑。想要理解什么是target的详细信息。告知 webpack 为目标(target)指定一个环境。默认值为，如果没有找到的配置，则默认为web。
Webpack基础学习-Day01
weixin_38647954的博客
07-19 1066
entry属性是 Webpack 配置中的一个重要部分，它定义了 Webpack 构建的入口点。通过灵活使用字符串、数组和对象类型的entry，你可以实现不同的构建策略和优化代码拆分。结合 Webpack 的其他特性（如插件和优化选项），可以构建高效、可维护的前端项目。输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。output属性是 Webpack 配置中的一个关键部分，它定义了打包后输出文件的相关设置。通过配置output。
看准JS逆向案例：webpack逆向解析
weixin_52392194的博客
07-21 371
当我们发起请求并获得响应时，发现响应数据也经过了加密。最后，我们将上述解密逻辑封装到一个JS文件中，并通过Python调用这个JS文件来实现逆向操作。在扣取到的JS代码中，我们补充所需的浏览器环境，模拟实际的运行环境。这样，我们可以更准确地解析参数并发起请求。这个步骤帮助我们了解如何加密b和kiv参数，进而能够正确地解密这些参数。为了分析这些加密参数，我们需要进一步定位JS加密代码的位置。定位到JS代码中的加密实现后，我们开始扣取相关代码。首先，我们通过抓包工具对看准网的请求进行分析。
【Vite】快速入门及其配置
小秀的博客
07-20 365
Vite也是前端的构建工具。vite开发时，并不对代码打包，而是直接采用ESM的方式来运行项目在项目部署时，在对项目进行打包除了速度外，vite使用起来也更加方便默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。
webpack配置报错：Invalid options object.
最新发布
gurenchang的博客
07-23 108
今天在使用webpack进行项目配置的时候，运行之后终端报错：, bonjour?, client?, compress?, headers?, host?, hot?, ipc?, open?, port?, proxy?, server?, static?遇到报错不要慌，先打开看一下，这一段报错是什么意思：无效的选项对象。Dev Server 已使用与 API 架构不匹配的 options 对象进行初始化。- options 具有未知属性“inline”。
9 Vue 框架生态
ever__ever的博客
07-23 433
Vue 框架生态
ES6常用功能/新特性
闻人放歌的三寸青草园圃
07-15 656
es6模块化，在浏览器中需要通过webpack/rollup打包。这里我们也可以比较下两者打包结果的区别。查看打包后的代码，webpack有很多自己缝状的辅助函数，而rollup除了定义的amd/umd标准函数外，其他都是自己的逻辑代码。以下例子可以看出es6中class的本质就是js构造函数的语法糖。但是使用class写法，语意更加清晰、简洁。箭头函数可以改变js函数烦人的this指向window问题，将this指向最近一层。promise用来解决js中的callback hell。
前端开发常用命令行工具及操作命令（Node.js 和 npm、Yarn、vue、React、Git、Webpack）
qq_63170044的博客
07-16 755
在前端开发中，掌握常用的命令行工具和命令可以大大提高开发效率。接下来将介绍一些常用的前端命令行工具和命令，涵盖从项目初始化到构建和部署的各个环节。
5.CSS学习（浮动）
ShawLee0925的博客
07-23 157
css浮动——float特点
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 72
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 917
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大聪明码农徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值