记录一下使用webpack+vue创建项目流程和常用的插件

最新推荐文章于 2024-04-13 11:13:42 发布
最新推荐文章于 2024-04-13 11:13:42 发布
阅读量556 收藏
点赞数
文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36512842/article/details/122697138
版权

记录一下使用webpack+vue创建项目流程和常用的插件

1.项目初始化
npm init
2.安装webpack
npm i webpack webpack-dev-server
3.创建配置文件
//项目文档结构
web
├─package-lock.json
├─package.json
├─src
|  └main.js
├─scripts // 构建脚本文件夹
|    ├─dev.js //开发环境构建脚本
|    ├─prod.js //生产环境构建脚本
|    ├─config // 构建脚本配置文件夹
|    |   ├─index.js // webpack配置文件 导出开发与生产配置函数
|    |   ├─util.js // 导出工具函数
|    |   ├─plugin // 封装插件文件夹
|    |   |   └index.js
|    |   ├─loader // 封装loaders文件夹
|    |   |   └index.js
├─public
|   └index.html // html模板
├─dist // 打包输出路径
4.loaders

注意:第4,第5步为常用loader和plugin介绍

  • thread-loader

    //安装 使用时，需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行
npm install --save-dev thread-loader

//webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader",
          // 耗时的 loader （例如 babel-loader）
        ]
      }
    ]
  }
}

  • babel-loader

    //当前演示webpack使用方法 其他参照babel官网
//安装
npm install --save-dev babel-loader @babel/core

//webpack.config.js
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

//创建 .babelrc 配置文件
//安装插件 使用转换 ES2015+ 的 env preset 
npm install @babel/preset-env --save-dev 

//.babelrc
{
  "presets": ["@babel/preset-env"]
}

  • eslint-loader

    //安装
npm install eslint --save-dev //安装eslint
npm install eslint-loader --save-dev //安装eslint-loader

//webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
    ],
  },
};

  • style-loader

    //安装
npm install --save-dev style-loader
//webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

    • css-loader

      //安装
npm install --save-dev css-loader

//webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

  • postcss-loader

    npm i -D postcss-loader

//postcss.config.js
module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'cssnano': {}
  }
}
//webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]
  }
}

  • less-loader

    //安装
npm install --save-dev less-loader less

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

  • Sass-loader

    npm install sass-loader node-sass webpack --save-dev
// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }]
  }
};

  • Vue-loader

    //安装
npm install -D vue-loader vue-template-compiler

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

  • Url-loader

    //安装
npm install --save-dev url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

  • File-loader

    //安装
npm install --save-dev file-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }
}
5.plugins

  • mini-css-extract-plugin

    //安装
npm install --save-dev mini-css-extract-plugin

//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};
Options

  • html-webpack-plugin

    //安装
npm install --save-dev html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

  • clean-webpack-plugin

    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
const webpackConfig = {
    plugins: [
        /**
         * All files inside webpack's output.path directory will be removed once, but the
         * directory itself will not be. If using webpack 4+'s default configuration,
         * everything under <PROJECT_DIR>/dist/ will be removed.
         * Use cleanOnceBeforeBuildPatterns to override this behavior.
         *
         * During rebuilds, all webpack assets that are not used anymore
         * will be removed automatically.
         *
         * See `Options and Defaults` for information
         */
        new CleanWebpackPlugin(),
    ],
};
 
module.exports = webpackConfig;

  • optimize-css-assets-webpack-plugin

    npm install --save-dev optimize-css-assets-webpack-plugin

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })
  ]
};

  • terser-webpack-plugin

    npm install terser-webpack-plugin --save-dev

const TerserPlugin = require('terser-webpack-plugin');
 
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

  • HotModuleReplacementPlugin

    const { HotModuleReplacementPlugin } = require('webpack');

const webpackConfig = {
    plugins: [
        new HotModuleReplacementPlugin();
    ],
};
 
module.exports = webpackConfig;
6.环境构建

  • 开发环境

    //使用nodeAPI构建开发环境
// ./scripts/dev.js
const Webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");
const { getDevConfig } = require("./config");
const webpackConfig = getDevConfig();

const compiler = Webpack(webpackConfig);
const devServerOptions = Object.assign({}, webpackConfig.devServer, {
  historyApiFallback: true,
  open: true,
  hot: true,
  inline: true,
  stats: "errors-warnings",
  overlay: {
    // 浏览器全屏显示错误
    errors: true,
    warnings: false,
  },
  stats: {
    colors: true,
  },
});
const server = new WebpackDevServer(compiler, devServerOptions);

server.listen(8087, "127.0.0.1", () => {
  console.log("Starting server on http://localhost:8087");
});

  • 生产环境

    //使用nodeAPI构建生产环境
// ./scripts/prod.js
const { getProdConfig } = require("./config");
const config = getProdConfig();

const webpack = require("webpack");

const compiler = webpack(config);

compiler.run((err, stats) => {
  const info = stats.toJson();

  if (err) {
    console.error(err.stack || err);
    if (err.details) {
      console.error(err.details);
    }
    return;
  }else if (stats.hasErrors()) {
    console.error(info.errors);
  }else if (stats.hasWarnings()) {
    console.warn(info.warnings);
  }else{
      console.log('build successfully')
      console.log([
        console.log(`Time: ${info.time}ms`),
        console.log(`output: ${info.outputPath}`),
        console.log(`webpack version: ${info.version}`),
      ].join('\n'))
  }
});
7.补充代码

  • 将webpack配置文件以函数形式封装

    // ./scripts/config/index.js
const {
  getJSLoader,
  getVueLoader,
  getCSSLoader,
  getLESSLoader,
  getSASSLoader,
  getAssetsLoader,
} = require("./loader");

const { 
  getVueLoaderPlugin,
  getHtmlWebpackPlugin,
  getStylePlugin,
  getMiniCssExtractPlugin,
  getTerserPlugin,
  getHotModuleReplacementPlugin,
 } = require("./plugin");

const { reslove } = require("./util");

function getCommonConfig () {
  return {
    entry: reslove("./src/main.js"), // 入口文件
    resolve: {
      // 解析模块请求的选项
      // （不适用于对 loader 解析）

      extensions: [".js", ".json", ".jsx", ".css"],
      // 使用的扩展名

      alias: {
        // 模块别名列表
        "@": reslove("./src"),
      },
    },
  };
}

exports.getDevConfig = function () {
  const mode = "development";

  const common = getCommonConfig();

  return Object.assign(common, {
    output: {
      path: reslove("./dist"), //打包后的文件存放的地方
      filename: "[name].[hash].js", //打包后输出文件的文件名
    },
    mode,
    module: {
      // 关于模块配置
      rules: [
        // 模块规则（配置 loader、解析器等选项）
        getJSLoader(mode),
        getVueLoader(mode),
        getCSSLoader(mode),
        getLESSLoader(mode),
        getSASSLoader(mode),
        ...getAssetsLoader(mode),
      ],
    },
    plugins: [
      getVueLoaderPlugin(),
      getHtmlWebpackPlugin({
        template:reslove('./public/index.html'),
        filename:'index.html',
        minify: {
          caseSensitive: false, // 是否大小写敏感
          collapseWhitespace: true, // 是否去除空格
          removeAttributeQuotes: true, // 去掉属性引用
          removeComments: true, // 去注释
        },
      }),
      getHotModuleReplacementPlugin(),
    ],
  });
}

exports.getProdConfig = function () {
  const mode = "production";

  const common = getCommonConfig();

  return Object.assign(common, {
    output: {
      path: reslove("./dist"), //打包后的文件存放的地方
      filename: "[name].[chunkhash].js", //打包后输出文件的文件名
    },
    mode,
    module: {
      // 关于模块配置
      rules: [
        // 模块规则（配置 loader、解析器等选项）
        getJSLoader(mode),
        getVueLoader(mode),
        getCSSLoader(mode),
        getLESSLoader(mode),
        getSASSLoader(mode),
        ...getAssetsLoader(mode),
      ],
    },
    plugins: [
      getVueLoaderPlugin(),
      getHtmlWebpackPlugin({
        template:reslove('./public/index.html'),
        filename:'index.html',
        minify: {
          caseSensitive: false, // 是否大小写敏感
          collapseWhitespace: true, // 是否去除空格
          removeAttributeQuotes: true, // 去掉属性引用
          removeComments: true, // 去注释
        },
      }),
      getMiniCssExtractPlugin(),
      getStylePlugin(),
    ],
    optimization: {
      minimize: true,
      minimizer: [new getTerserPlugin()],
    },
  });
}

  • 封装常用loaders

    // ./scripts/config/loader/index.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const eslintLoader = {
  loader: "eslint-loader",
  options: {
    fix: true,
  },
};
exports.getJSLoader = function (mode) {
  const use = [
    "thread-loader",
    {
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env"],
      },
    },
  ];

  mode === "development" && use.push(eslintLoader);

  return {
    test: /\.js$/,
    use,
    exclude: /node_modules/,
  };
}

exports.getVueLoader = function (mode) {
  const use = ["vue-loader"];
  mode === "development" && use.push(eslintLoader);

  return {
    test: /\.vue$/,
    use,
  };
}

exports.getCSSLoader = function (mode) {
  const use = [
    mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader,
    "css-loader",
    "postcss-loader",
  ];

  return {
    test: /\.css$/i,
    use,
  };
}

exports.getLESSLoader = function (mode) {
  const use = [
    mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader,
    "css-loader",
    "postcss-loader",
    "less-loader",
  ];

  return {
    test: /\.less$/i,
    use,
  };
}
exports.getSASSLoader = function (mode) {
  const use = [
    mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader,
    "css-loader",
    "postcss-loader",
    "sass-loader",
  ];

  return {
    test: /\.less$/i,
    use,
  };
}
exports.getAssetsLoader = function (mode) {

    const name = mode === "development" ? "[name].[ext]" : "[name].[contenthash].[ext]"

    const imgReslove = {
        test: /\.(png|jpg|jpeg|svg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: `assets/images/${name}`,
              limit: 3 * 1024,
            },
          },
        ],
      }

    const mediaReslove = {
        test: /\.(mp4|avi|mp3|rmvb|wmv|flv|webm)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: `assets/media/${name}`,
            },
          },
        ],
      }

    const fontReslove = {
        test: /\.(woff2|woff|eot|ttf|otf)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: `assets/font/${name}`,
            },
          },
        ],
      }


  return [imgReslove,mediaReslove,fontReslove];
}

  • 封装常用plugins

    // ./scripts/config/plugins/index.js

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { HotModuleReplacementPlugin } = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

exports.getVueLoaderPlugin =  function () {
  return new VueLoaderPlugin();
}

exports.getHtmlWebpackPlugin = function (options) {
  return new HtmlWebpackPlugin(Object.assign({}, options));
}

exports.getCleanWebpackPlugin = function (options) {
  return new CleanWebpackPlugin(Object.assign({}, options));
}
exports.getStylePlugin = function (options) {
  return new OptimizeCssAssetsPlugin(
    Object.assign(
      {
        assetNameRegExp: /\.optimize\.css$/g,
        cssProcessor: require("cssnano"),
        cssProcessorPluginOptions: {
          preset: ["default", { discardComments: { removeAll: true } }],
        },
        canPrint: true,
      },
      options
    )
  );
}
exports.getMiniCssExtractPlugin = function (options) {
  return new MiniCssExtractPlugin(Object.assign({
    filename: 'assets/style/[name].[contenthash].css',
  }, options));
}
exports.getHotModuleReplacementPlugin = function () {
  return new HotModuleReplacementPlugin();
}
exports.getTerserPlugin = function (options) {
  return new TerserPlugin(
      Object.assign({
        cache: true, // 使用 cache，加快二次构建速度
        parallel: true, // 开启多线程
        extractComments: true,
        terserOptions: {
          compress: {
            unused: true,
            drop_debugger: true,
            drop_console: true,
            dead_code: true,
          },
        },
      },options)
  );
}

  • 工具函数

    // ./scripts/config/util.js
const path = require('path')

exports.reslove = function  (url){
    return path.resolve(__dirname,`../../${url}`)
}
Exclison
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue jsPlumb流程图
01-03
基于vue框架开发的jsPlumb流程图项目，可拖拽生成节点，修改节点内容和图标。 插件版本： "element-ui": "^2.11.1", "jsplumb": "^2.11.2", "vue": "^2.5.2"
使用Vue开发chrome插件
08-09
1. **环境搭建**：安装Node.js和Vue CLI，创建一个新的Vue项目，并配置支持Chrome插件开发的Webpack配置。 2. **编写manifest.json**：根据需求配置插件的权限、内容脚本、背景脚本等信息。 3. **编写Vue组件**：...
使用webpack搭建一个vue插件
qq_28565961的博客
01-15 459
前言 作为一个现代前端，webpack多多少少都有接触过，但是我们平常都是直接使用脚手架工具搭建项目，自动集成了webpack，对于如何从0到1搭建一个webpack工程我们并不熟悉，那么我们今天就一起手把手来搭建一个基于webpack的vue插件，相信在这个过程中我们能够对webpack的使用有更深入理解。 环境准备 node版本 >= 10.13.0 初始化项目 创建项目目录mkdir vue-plugin-demo && cd vue-plugin-demo 初始化成
Vue常用插件汇总
最新发布
2401_84150191的博客
04-13 1548
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取[外链图片转存中…(img-wmj3LHAs-1712977961250)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-uMrKd7zw-1712977961251)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
vue 开发插件流程
djj1220的博客
03-07 163
UI demo UI 插件汇总 我的github iSAM2016 在练习写UI组件的，用到全局的插件，网上看了些资料。看到些的挺好的，我也顺便总结一下写插件的流程； 声明插件-> 写插件-> 注册插件 —> 使用插件 声明插件 先写文件，有基本的套路 Vue.js 的插件应当有一个公开方法 install 。 第一个参数是 Vue 构造器 , 第二个参数是一个可...
webpack中使用vue
weixin_51677393的博客
06-28 487
一、插件的安装 项目打包时用到的vue相关插件devdependencies： "vue-loader": "^13.7.2", "vue-template-compiler": "^2.6.12", 项目运行时的依赖dependencies： "vue": "^2.6.12", "vue-router": "^3.5.2" 注意 1、"vue-template-compiler": "^2.6.12",和"vue": "^2.6.12",的版本必须是一致的，不然会出现错误情况； 2、vu
Vue-cli2 + webpack搭建vue项目流程以及打包发布流程
是一座岛
04-25 5154
目录 1.1 命令行初始化项目 1.2 分析项目目录 1.3 运行项目 1.4 多环境配置打包发布 一. vue-cli2 + webpack搭建项目流程以及打包发布流程 最近升级到vue-cli3，发现vue-cli2搭建项目命令不能用了，两者搭建开发环境项目内容也发生了变化。 vue-cli2搭建项目环境的命令：vue init webpack vue2-webpack-proj...
毕业设计：考勤系统（Vue+Webpack+ElementUI）.zip
08-04
总的来说，这个毕业设计项目展示了现代前端开发的典型流程和技术栈，通过Vue.js实现业务逻辑，Webpack进行项目构建和优化，ElementUI提供美观的UI组件，共同构建出一个完整的考勤管理系统。这样的实践经历对于学习和...
Vue.js2.0实战项目基于Vue+Vuex+Vue-router+Webpack2.0打造微信界面
10-21
这个实战项目结合了 Vue.js、Vuex、Vue-router 和 Webpack 2.0，旨在创建一个类似于微信的界面，涵盖聊天、搜索、点赞、通讯录、个人中心、模拟对话、朋友圈和设置等核心功能。以下是这些技术在项目中的应用和相关...
webpack2.0搭建前端项目的教程详解
08-30
通过运行 `npm init` 命令，你可以创建一个 `package.json` 文件，该文件记录了项目的基本信息和依赖项。接着，安装 Webpack 作为开发依赖，使用命令 `npm install webpack --save-dev`。 在 Webpack 2.0 中，我们...
使用webpack打包编写一个vue插件
weixin_34384557的博客
11-01 535
2019独角兽企业重金招聘Python工程师标准>>> ...
vue插件的开发流程
小青蛙的博客
10-25 1255
趁有机会，简单回顾下vue插件开发的过程。学习本身就是个不断重复滴过程嘛： 一、官网插件的开发文档地址 https://cn.vuejs.org/v2/guide/plugins.html   二、简单唠一唠 但是呢，如果看官网文档的话，有的小朋友可能就云里雾里了，不想再进行下去了，其实vue对于插件的定义就是，使用Vue.use方法,将引入的install方法里面相关Vue操作的方...
vue绘制流程图的插件 flowchart-vue
SmallGirlYang的博客
11-13 6893
记录一个vue可以绘制流程图的插件 flowchart-vue。
axios拦截器_前端网红框架的插件机制全梳理（axios、koa、redux、vuex）
weixin_39745269的博客
11-27 218
前言 前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。本文将从koa、axios、vuex和redux的实现来教你怎么编写属于自己的插件机制。对于新手来说：本文能让你搞明白神秘的插件和拦截器到底是什么东西。对于老手来说：在你写的开源框架中也加入拦截...
【Vue】1-2、Webpack 中的插件
秋玄的博客
01-27 867
Webpack 中的插件
vue项目带webpack流程详解
zouyang920的博客
12-18 114
vue项目带webpack流程详解
Vue的安装以及相关插件（axios，vuex...）
weixin_50236973的博客
09-26 208
Vue的安装以及相关插件
vue插件之vuex
chiuwingyan的博客
08-31 1754
1、vuex流程图 当有组件更新时，会触发vuex数据中心，数据中心再将更新的反馈到其他关联的组件，模块间共享状态。图中绿框内是vuex的操作内容 2、vuex状态管理（实例） 先导入vuex 应用级的状态集中放在store中；  改变状态的方式是提交mutations，这是个同步的事物；  异步逻辑应该封装在action中。 const vuex_store
使用webpack创建vue3项目
11-10
使用webpack创建Vue3项目的步骤如下： 1. 首先，需要安装Node.js和npm包管理器。 2. 创建一个新的项目文件夹，并在其中打开终端。 3. 在终端中运行以下命令来初始化npm： ``` npm init -y ``` 4. 接下来，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值