VUE进阶 笔记贰章 前端工程化

于 2020-12-28 16:48:49 发布
阅读量217 收藏
点赞数
分类专栏： # HTML&CSS&JavaScript&Vue 文章标签： vue

1. 模块化相关规范

1.1 模块化概述

1.1.1 传统开发模式的主要问题
  1. 命名冲突：多个JS文件之间如果存在重名变量，则会发生变量覆盖问题。
  2. 文件依赖：JS文件之间无法实现相互的引用。
1.1.2 通过模块化解决上述问题
  • 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
  • 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。

1.2 浏览器端模块化规范

1.2.1 AMD

Require.js（http://www.requirejs.cn/）
在这里插入图片描述

1.2.2 CMD

Sea.js（https://seajs.github.io/seajs/docs/）
在这里插入图片描述

1.3 服务器端模块化规范

1.3.1 CommonJS

① 模块分为 单文件模块 与 包
② 模块成员导出：module.exports 和 exports
③ 模块成员导入：require('模块标识符')

1.4 大一统的模块化规范 – ES6模块化

在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：

  • AMD 和 CMD 适用于浏览器端的 Javascript 模块化。
  • CommonJS 适用于服务器端的 Javascript 模块化。

因此，ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。ES6模块化规范中定义：

  • 每个 js 文件都是一个独立的模块
  • 导入模块成员使用 import 关键字
  • 暴露模块成员使用 export 关键字
1.4.1 Node.js中通过 babel 体验ES6模块化
  • npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

在这里插入图片描述

  • npm install --save @babel/polyfill

在这里插入图片描述

  • 项目跟目录创建文件 babel.config.js
  • babel.config.js 文件内容如下侧代码
const presets = [
	["@babel/env", {
		targets: {
			edge: "17",
			firefox: "60",
			chrome: "67",
			safari: "11.1"
		}
	}]
]

module.exports = { presets }

在这里插入图片描述

  • 通过 npx babel-node .\index.js 执行代码
    现在我们还没有index.js文件，所以我们新建一个index.js文件用于测试。之后使用命令npx babel-node .\index.js执行index.js文件。最后发现终端输出OK，符合预期，证明我们的babel已经配置完成了。到目前为止，它已经可以支持我们使用那些高级的ES6特性了，例如：ES6的模块化导入就可以基于这种node项目来进行相关的操作。

在这里插入图片描述

1.5 ES6模块化的基本语法

1.5.1 默认导出与默认导入
  • 默认导出语法 export default 默认导出的成员。
  • 默认导入语法 import 接收名称 from '模块标识符'。

首先在m1.js文件导出模块

// 当前文件模块为m1.js

// 定义私有成员 a c d
let a = 10;
let c = 20;
let d = 30;

function show () {
	console.log('わたし');
}

// 讲私有成员 a c show 暴露出去，供其他模块使用
export default {
	a,
	c,
	show
}

之后在index.js文件中导入模块

console.log('OK');

// 导入模块成员
import m1 from './m1.js'
console.log(m1);

最后在终端输入npx babel-node .\index.js命令去执行index.js这个模块，查看输出结果。
在这里插入图片描述
注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

1.5.2 按需导出与按需导入
  • 按需导出语法 export let s1 = 10。
    在m1.js文件中新增按需导出代码，新增代码后m1.js文件如下：
// 当前文件模块为m1.js
// 定义私有成员 a c d
let a = 10;
let c = 20;
let d = 30;

function show () {
	console.log('这里是默认导出');
}

/* 默认导出 */
// 将私有成员 a c show 暴露出去，供其他模块使用
export default {
	a,
	c,
	show
}

/* 按需导出 */
// 按需导出私有化成员，供其他模块使用
export let s1 = 'aaa'
export let s2 = 'ccc'
export function say () {
	console.log('这里是按需导出');
}
  • 按需导入语法 import { s1 } from '模块标识符'。
    在index.js文件中新增代码，并注释掉部分代码。修改后index.js文件如下：
console.log('OK');

/* 默认导入 */
// 导入模块成员
// import m1 from './m1.js'
// console.log(m1);

/* 按需导入 */
import m1, { s1, s2 as ss2, say } from './m1.js'
console.log(m1);
console.log(s1);
console.log(ss2);
console.log(say);

在终端同样执行index.js文件，观察结果
在这里插入图片描述

1.5.3 直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

新建m2.js文件

/* 当前文件模块为m2.js */

// 在当前模块中执行一个 for 循环操作
for (let i = 0; i < 3; i++) {
	console.log(i);
}

index.js文件注释掉之前的代码，新增直接导入代码。修改之后的index.js文件如下：

// console.log('OK');

// /* 默认导入 */
// // 导入模块成员
// // import m1 from './m1.js'
// // console.log(m1);

// /* 按需导入 */
// import m1, { s1, s2 as ss2, say } from './m1.js'
// console.log(m1);
// console.log(s1);
// console.log(ss2);
// console.log(say);

/* 直接导入并执行模块代码 */
import './m2.js'

在终端执行index.js文件查看结果
在这里插入图片描述

2. webpack

2.1 当前 Web 开发面临的困境

  • 文件依赖关系错综复杂；
  • 静态资源请求效率低；
  • 模块化支持不友好；
  • 浏览器对高级 Javascript 特性兼容程度较低。

2.2 webpack 概述

webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。目前绝大多数企业中的前端项目，都是基于webpack 进行打包构建的。

在这里插入图片描述

2.3 webpack 的基本使用

2.3.1 创建列表隔行变色项目

  1. 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json。

    由于输入npm init -y 报错，所以我之后直接输入 npm init了。中间它让我填写一些配置信息，我直接回车键跳过了。默认的配置如下：

{
  "name": "2.webpack_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在这里插入图片描述
配置信息的涵义如下

package name:              你的项目名字叫啥
version:                   版本号
description:               对项目的描述
entry point:               项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command:              项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository:            如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds：                 项目关键字（我也不知道有啥用，所以我就不写了）
author:                    作者的名字（也就是你叫啥名字）
license:                   发行项目需要的证书（这里也就自己玩玩，就不写了）

如果后期在进行项目开发的时候想修改配置信息，可以直接在项目的根目录中打开package.json文件进行修改。
在这里插入图片描述

  1. 新建 src源代码目录
  2. 新建 src -> index.html 首页

在这里插入图片描述

  1. 初始化首页基本的结构
    src 下新建 index.js，src -> index.html文件写入如下内容
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./index.js"></script>
  </head>
  <body>
    <ul>
      <li>这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
    </ul>
  </body>
</html>

在这里插入图片描述

  1. 运行 npm install jquery –S 命令，安装 jQuery

在这里插入图片描述

  1. 通过模块化的形式，实现列表隔行变色效果
    index.js文件写入如下内容
import $ from 'jquery'

$(function () {
	$('li:odd').css('backgroundColor', 'pink');
	$('li:even').css('backgroundColor', 'lightblue');
})

在浏览器中打开index.html文件。
在这里插入图片描述

按理说文件能够实现隔行变色效果的，但由于import $ from 'jquery'属于ES6的模块化语法，浏览器对这种语法支持得并不是很好，不识别该行代码，存在兼容性问题，所以浏览器中显示第一行报错。我们可以基于webpack把这种有兼容性问题的代码转换为没有兼容性问题的代码。之后在index.html文件中导入转换之后的文件。

2.3.2 在项目中安装和配置 webpack
  1. 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包

在这里插入图片描述

  1. 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
  2. 在 webpack 的配置文件中，初始化如下基本配置：
module.exports = {
	// 编译模式 development  production
	mode: 'development'
}

在这里插入图片描述

  1. 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

在这里插入图片描述

  1. 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

在这里插入图片描述
之后在index.html文件中使用命令 <script src="../dist/main.js"></script> 引入main.js文件，这时候就不存在兼容性问题了。

在这里插入图片描述

2.3.3 配置打包的入口与出口

webpack 的 4.x 版本中默认约定：

  • 打包的入口文件为 src -> index.js
  • 打包的输出文件为 dist -> main.js

如果要修改打包的入口与出口，可以在 webpack.config.js 中新增如下配置信息：

// 导入 node.js 中专门操作路径的模块
const path = require('path');

module.exports = {
	// 编译模式 development  production
	mode: 'development',
	// 打包入口文件的路径
	entry: path.join(__dirname, './src/index.js'),
	output: {
		// 打包输出文件的存放路径
		path: path.join(__dirname, './dist'),
		// 输出文件的名称
		filename: 'bundle.js'
	}
}

在这里插入图片描述

2.3.4 配置webpack的自动打包功能

  • 运行 npm install webpack-dev-server –D 命令，安装支持项目自动打包的工具；

  • 修改 package.json -> scripts 中的 dev 命令如下：
    在这里插入图片描述

  • 将 src -> index.html 中，script 脚本的引用路径，修改为"/buldle.js“；
    注意： webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有放到 实际的物理磁盘上，而是直接托管到了电脑的内存中，我们在项目根目录中看不到这个打包好的 bundle.js文件。该文件以隐藏虚拟的形式存在于和 dist src node_modules 平级的目录中，所以在引用文件的时候，index.html是直接从根目录下引用bundle.js文件的，如：<script src='/bundle.js'></script>。

  • 运行 npm run dev 命令，重新进行打包；
    报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs’
    在这里插入图片描述

在网上查了以下报错的原因，是因为webpack-cli的新版本对webpack-dev-server版本的不兼容。于是我先使用npm uninstall webpack-cli -D命令卸载了局部webpack-li包，接着使用npm install webpack-cli@3.3.12 -D命令重新下载安装了低版本3.3.12的webpack-cli包。之后再一次npm run dev，这一次没有报错了。

在这里插入图片描述

  • 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果。

注意：

  • webpack-dev-server 会启动一个实时打包的 http 服务器；
  • webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的。
2.3.5 配置 html-webpack-plugin 生成预览页面
  • 运行 npm install html-webpack-plugin –D 命令，安装生成预览页面的插件；

在这里插入图片描述

  • 修改 webpack.config.js 文件头部区域，添加如下配置信息：
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
	template: './src/index.html', // 指定要用到的模板文件
	filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
});
  • 修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：
plugins: [htmlPlugin] // plugins 数组是 webpack 打包期间会用到的一些插件列表

在这里插入图片描述

npm run dev后，打开浏览器，地址栏输入http://localhost:8080/，则可以看到预览页面index.html内容
在这里插入图片描述

2.3.6 配置自动打包相关的参数
 // package.json中的配置
 // --open 打包完成后自动打开浏览器页面
 // --host 配置 IP 地址
 // --port 配置端口
 "scripts": {
 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
 },

在这里插入图片描述

在这里插入图片描述

2.4 webpack 中的加载器

2.4.1 通过 loader 打包 非 js 模块

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他 非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器 才可以正常打包，否则会报错！

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

  • less-loader 可以打包处理 .less 相关的文件；
  • sass-loader 可以打包处理 .scss 相关的文件；
  • url-loader 可以打包处理 css 中与 url 路径相关的文件。
2.4.2 loader 的调用过程

在这里插入图片描述

2.5 webpack 中加载器的基本使用

CSS、LESS、SCSS、PostCSS、JavaScript、Image/Font、Vue
在这里插入图片描述

2.5.1 打包处理 css 文件

首先在src文件夹中新建一个css文件夹，之后在css文件中新建1.css文件，该文件写入如下样式：

li {
  list-style: none;
}

在这里插入图片描述
写完样式之后，它还不能正式生效。我们需要在index.js这个入口文件中引入该样式。

import './css/1.css'

保存之后，终端报错。目前为止，webpack只能打包以.js结尾的文件，如果发现某个文件不是以.js结尾，那么它就会到webpack相应的配置文件即中webpack.config.js寻找对应的loader来处理这种类型文件。但是目前我们并没有配置相应的loader，所以它就报错了。
在这里插入图片描述

  • 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader

  • 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

	// 所有第三方模块的匹配规则
	module: {
		rules: [
			{ test: /\.css$/, use: ['style-loader', 'css-loader']}
		]
	}

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
在这里插入图片描述

注意：

  • use 数组中指定的 loader 顺序是固定的；
  • 多个 loader 的调用顺序是：从后往前调用。

执行npm run dev命令查看效果
在这里插入图片描述

2.5.2 打包处理 less 文件
  • 运行 npm i less-loader less -D 命令；
  • 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
	// 所有第三方模块的匹配规则
	module: {
		rules: [
			{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
		]
	}

在这里插入图片描述
为了查看效果，我们在css文件夹中再新建一个1.less文件，该文件内容如下：

body {
  margin: 0;
  padding: 0;
  ul {
    padding: 0;
    margin: 0;
  }
}

接着在index.js文件中引入1.less文件import './css/1.less'，之后执行npm run dev查看效果

在这里插入图片描述

2.5.3 打包处理 scss 文件
  • 运行 npm i sass-loader node-sass -D 命令；
  • 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
	// 所有第三方模块的匹配规则
	module: {
		rules: [
			{ test: /\.scss$/, usr: ['style-loader', 'css-loader', 'sass-loader']}
		]
	}

在这里插入图片描述
为了查看效果，我们在css文件夹中再新建一个1.scss文件，该文件内容如下：

ul {
  font-size: 16px;
  li {
    line-height: 30px;
  }
}

在这里插入图片描述

接着在index.js文件中引入1.scss文件import './css/1.scss'，之后执行npm run dev查看效果
在这里插入图片描述

在这里插入图片描述

2.5.4 配置 postCSS 自动添加 CSS 的兼容前缀

index.html文件添加如下代码

    <input type="text" placeholder="请输入" />

在这里插入图片描述
在这里插入图片描述

现在我们在1.css文件中给该标签添加样式

::placeholder {
  color: skyblue;
}

在这里插入图片描述
上述添加的新样式是由兼容性问题的，在IE中是不起作用的。

  • 运行 npm i postcss-loader autoprefixer -D 命令
  • 在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：
const autoprefixer = require('autoprefixer'); // 导入自动添加前缀的插件
const { plugins } = require('./webpack.config');
module.exports = {
	plugins: [autoprefixer] // 挂载插件
}

在这里插入图片描述

  • 在 webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则如下：
	// 所有第三方模块的匹配规则
	module: {
		rules: [
		{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
		]
	}

在这里插入图片描述

2.5.5 打包样式表中的图片和字体文件

首先在index.html中添加代码

    <div id="box"></div>

在这里插入图片描述

接着在1.css中为盒子添加样式和背景图片属性

#box {
  width: 580px;
  height: 340px;
  background-color: skyblue;
  background: url('../images/1.jpg');
}
  • 运行 npm i url-loader file-loader -D 命令
  • 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
	// 所有第三方模块的匹配规则
	module: {
		rules: [
			{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16941'}
		]
	}

在这里插入图片描述

其中 ? 之后的是 loader 的参数项。
limit 用来指定图片的大小，单位是字节(byte)，只有小于 limit 大小的图片，才会被转为 base64 图片。

执行命令 npm run dev重新打包，查看效果
在这里插入图片描述

2.5.6 打包处理 js 文件中的高级语法

首先我们在index.js文件中定义一个js高级语法，添加如下代码：

class Person {
	static info = 'JS高级语法';
}
console.log(Person.info);

在这里插入图片描述

  • 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D；
    在这里插入图片描述

  • 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D；
    在这里插入图片描述

  • 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {
	presets: ['@babel/preset-env'],
	plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

在这里插入图片描述

  • 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
	// 所有第三方模块的匹配规则
	module: {
		rules: [
		    // exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
		]
	}

在这里插入图片描述
执行npm run dev重新打包，查看结果
在这里插入图片描述

3. Vue 单文件组件

3.1 传统组件的问题和解决方案

3.1.1 问题
  1. 全局定义的组件必须保证组件的名称不重复；
  2. 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \ ；
  3. 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏；
  4. 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）。
3.1.2 解决方案

针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。

3.2 Vue 单文件组件的基本用法

单文件组件的组成结构
  • template 组件的模板区域
  • script 业务逻辑区域
  • style 样式区域

在src文件夹下新建components文件夹，接着在components文件夹下新建App.vue这样一个VUE单文件组件，该文件组件内容如下：

<template>
  <!-- 这里用于定义VUE组件的模板内容 -->
  <div>
    <h1>这是APP根组件</h1>
  </div>
</template>

<script>
// 这里用于定义VUE组件的业务逻辑
export default {
  // 私有数据
  data () {
    return {}
  },
  // 处理函数
  methods: {}
  // ... 其他业务逻辑
}
</script>

<style scoped>
/* 这里用于定义组件的样式 */
h1 {
  color: skyblue;
}
</style>

在这里插入图片描述

3.3 webpack 中配置 vue 组件的加载器

首先在index.js入口文件头部引入刚刚建立的单文件组件App.vue
在这里插入图片描述

// 导入单文件组件
import App from './components/App.vue'

此时执行命令npm run dev，会报错，所以接下来就进行配置

  • 运行 npm i vue-loader vue-template-compiler -D 命令
  • 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    plugins: [htmlPlugin, new VueLoaderPlugin()], // plugins 数组是 webpack 打包期间会用到的一些插件列表
	// 所有第三方模块的匹配规则
	module: {
		rules: [
			{ test: /\.vue$/, use: 'vue-loader'}
		]
	}
}

在这里插入图片描述
此时执行命令npm run dev，就不会报错了。

3.4 在 webpack 项目中使用 vue

  • 运行 npm i vue –S 安装 vue；
  • 在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数；
  • 在 src -> index.js 入口文件中创建 vue 的实例对象，并指定要控制的 el 区域；
  • 在 src -> index.js 入口文件中通过 render 函数渲染 App 根组件；
    index.js文件添加的代码如下：
// ------ 分割线 ------
// 导入Vue构造函数
import Vue from 'vue'
// 导入App单文件组件
import App from './components/App.vue'

const vm = new Vue({
	// 指定 vm 实例要控制的页面区域
	el: '#app',
	// 通过 render 函数把指定的组件渲染到 el 区域中
	render: h => h(App)
});

在这里插入图片描述

  • 在 src -> index.html入口文件中添加VUE控制的标签。
    <!-- 要被VUE控制的区域 -->
    <div id="app"></div>

在这里插入图片描述
执行npm run dev重新打包，查看结果
在这里插入图片描述

3.5 webpack 打包发布

上线之前需要通过 webpack 将应用进行整体打包，可以通过 package.json 文件配置打包命令：

// 在package.json文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
   "scripts": {
       // 用于打包的命令
      "build": "webpack -p",
   }

在这里插入图片描述
删除项目目录中之前建立的dist目录，之后执行 npm run build命令打包。打包完成后，项目目录中生成新的dist目录。该目录中有一个首页index.html和一个bundle.js文件。其中bundle.js文件就是通过配置文件生成的。现在dist目录就是一个成品的项目了，我们可以将其交给后台开发人员，让他们进行实际的上线。
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值