解锁前端Vue3宝藏级资料 第一章 带你深入了解Vue3项目创建 2 (使用 Webpack 5 搭建 vue项目)

news2024/11/17 3:30:06

  在之前的文章中，我们已经了解了如何使用Vue CLI来创建Vue项目的开发环境。现在，大家已经可以轻松地运用Vue CLI来构建自己的Vue项目了。然而，你可能仍然对背后的工作原理感到困惑。接下来，我将引导你们在不使用Vue CLI的情况下，如何创建一个Vue项目环境。

  我们将使用Webpack工具和它的一系列打包组件来编译和打包Vue模板文件及其相关的代码。我会详细介绍如何安装Webpack，以及它是如何打包Vue模块的，并且每个步骤都会进行详尽的解释。通过这个过程，你将能够深入理解Webpack在构建Vue项目过程中的所有细节，以及更深入地了解Webpack的相关配置知识

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
第一章 Vue3项目创建 3 Vite 创建 vue项目
第二章 Vue3 基础语法指令
第三章 Vue Router路由器的使用
第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 库 2 ( ailwind 后台框架)

1.2.1 单文件组件

  Vue的Single File Component文件由模板、脚本、样式三部分组成，它的扩展名为vue。可以编写页HTML、CSS 和 JavaScript 代码到.vue模板文件三个对应标签中。

  这种格式模板是 vue.js 独有的，而浏览器是无法直接运行.vue模板 文件的。所以必须通过Webpack工具将vue文件转换为浏览器能够理解的形式 html+JavaScript+css才能在浏览器中运行。

<template>
  <div class="example">{{ msg }}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello Vue Component'
    }
  }
}
</script>
<style scoped>
.example{
  font-weight: bold;
}
</style>

1.2.2 创建vue项目

  创建一个文件目录 webpack-vue 用于搭建vue项目。在进入 webpack-vue目录中使用 npm init -y 命令创建一个 package.json 文件。

$ mkdir webpack-vue
$ cd webpack-vue
$ npm init -y

命令行安装两个包：webpack 和 webpack-cli。

$ npm install --save-dev webpack webpack-cli

1.2.2.1 初始化 webpack

  创建一个 src 文件夹并在其中创建一个 index.js 文件。

$ mkdir src
$ cd src
$ touch index.js
$  null>index.js //doc创建文件

创建文件index.js后整个webpack-vue文件夹目录内容。

webpack-vue
   |---node_modules
   |---src               //代码源文件
   |    |--index.js      //入口文件
   |----package.json     //配置文件

  在webpack-vue目录下使用 npx webpack 命令运行 webpack 进程。执行命令完成后会出现WARNING，表示构建webpack过程完成，并在dist目录下创建main.js文件。

D:\vue\webpack-vue>npx webpack
asset main.js 0 bytes [emitted] [minimized] (name: main)
./src/index.js 1 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.74.0 compiled with 1 warning in 1064 ms

如果只运行 webpack 命令，会因为路径传递问题而报错。通过添加 npx，会自动从 node_modules/.bin/ 目录中搜索指定的命令并执行。

  默认情况下，webpack 会自动找到 src/index.js 文件，构建它并在 dist 目录下创建一个 main.js 文件。

  另外，执行命令时显示的WARNING提示是模式未设置的警告，我们可以通过设置模式选项的方法来消除这个警告。

$ npx webpack --mode development
asset main.js 1.18 KiB [emitted] (name: main)
./src/index.js 1 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 133 ms
$ npx webpack --mode production

模式参数

  • 开发 development

  • 生产 production

1.2.2.2 创建 webpack.config.js

  每个webpack项目都要有一个webpack.config.js 配置文件，webpack 所有功能都是通过的配置文件中的参数来实现的。在 webpack-vue 文件夹下创建一个webpack.config.js 文件并在文件中设置webpack的模式。

module.exports = {
  mode: 'development'
}

  如果在 webpack.config.js 文件中设置了模式，就不需要使用 npx webpack --mode production 命令来设置模式了。

1.2.2.3 安装 vue.js

​ 使用 npm 命令安装 vue.js到项目中。

$ npm i -S vue@next
added 19 packages in 4s

1.2.3 搭建 webpack 编译环境

​ webpack+vue项目的结构。

webpack-vue
   |---node_modules
   |---dist
   |    |--main.js       //编译后运行js
   |---index.html        //运行html
   |---src               //代码源文件
   |    |--index.js      //入口文件
   |    |--App.vue       //模板代码
   |----package.json     //配置文件
   |----webpack.config.js //编译脚本

1.2.3.1 创建初始页面

  webpack工具默认加载文件是 src/index.js，我们在index.js编辑vue项目入口方法，将模板App挂载到页面

元素下面。 

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

  在src目录下创建一个App.vue模板文件。

<template>
  <h1>Hello World</h1>
  {{ message }}
</template>
<script>
export default {
  name: 'App',
    data() {
        return {
            message: "Hello Vue!"
        }
    }
}
</script>
<style>
</style>

  webpack-vue目录下创建index.html页面，这个页面是整个项目的入口页面，我们编写的vue代码都会通过页面中

元素加载到浏览器中来。 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Webpack Vue.js</title>
</head>
<body>
	<div id="app">
	</div>
	<script src="./dist/main.js"></script>
</body>
</html>

script src=“编辑后的js文件” 引入的是webpack工具编辑后的执行文件。

  • 编辑 index.js 入口脚本
  • 创建 App.vue 模板
  • 创建 index.html 浏览器入口页面

1.2.3.2 vue-loader设置

  vue-loader 是官方支持 Vue 的 SFC 的加载器，专门用于 webpack 打包编辑 Vue SFC。vue-loader会分析vue文件中编写的template、script、style标签内容并将其转换成浏览器可以识别的js代码，这个插件是打包编辑必须用到的。

$ npm i -D vue-loader@next @vue/compiler-sfc

使用 SFC Vue打包编译

  • vue-loader@next (加载 SFC)
  • @vue/compiler-sfc(vue运行编译组件 vue-loader)

webpack.config.js 文件中设置 VueLoderPlugin 插件内容引入loader功能。

const {VueLoaderPlugin } = require("vue-loader")
module.exports = {
  mode: 'development',
   module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
}

运行编译命令 npx webpack

$ npx webpack
asset main.js 537 KiB [emitted] (name: main)
runtime modules 891 bytes 4 modules
cacheable modules 439 KiB
  modules by path ./src/ 2.05 KiB
    ./src/index.js 92 bytes [built] [code generated]
    ./src/App.vue 743 bytes [built] [code generated]
    ./src/App.vue?vue&type=template&id=7ba5bd90 197 bytes [built] [code generated]
    ./src/App.vue?vue&type=script&lang=js 252 bytes [built] [code generated]
    + 2 modules
  modules by path ./node_modules/ 437 KiB
    modules by path ./node_modules/@vue/ 436 KiB
      ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js 60.8 KiB [built] [code generated]
      ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 310 KiB [built] [code generated]
      + 2 modules
    ./node_modules/vue/dist/vue.runtime.esm-bundler.js 611 bytes [built] [code generated]
    ./node_modules/vue-loader/dist/exportHelper.js 328 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 764 ms

  在浏览器打开index.html页面，看到 Hello Vue 显示在Hello World出来 。

在这里插入图片描述

1.2.3.3 vue-style-loader设置

  css 模板需要导入相关的 vue-style-loader 和 css-loader 加载器，在webpack 中才会打包编译.vue模板中的<style>中的元素代码。

$ npm i -D css-loader vue-style-loader
  • css-loader (css 格式)
  • vue-style-loader (sytel 中css 与 js 格式)

  安装 css-loader 后，您需要在 webpack.config.js 文件中添加一些配置。注意 vue-style-loader 和 css-loader 的顺序也很重要。它们是按排列顺序执行加载运行的。css-loader解析vue文件中样式，通过vue-style-loader将style标签中的CSS信息添加到中html。

const {VueLoaderPlugin } = require("vue-loader")
module.exports = {
  mode: 'development',
   module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
	  {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
}

如果只设置了css-loader只会分析class信息，所以用webpack命令不会出错，但是如果只设置vue-style-loader，则不能分析class信息，会出现Loader的错误提示信息。

App.vue模板中加入css样式.example{} 在

引入这个样式。

<template>
  <h1 class="example">Hello World</h1>
  <h2>111111</h2>
  {{ message }}
</template>
<script>
export default {
  name: 'App',
    data() {
        return {
            message: "Hello Vue!"
        }
    }
}
</script>
<style>
.example{
  font-weight: bold;
  color:red;
}
</style>

运行编译命令 npx webpack 后。在浏览中查看 index.html页面，字体变成红色。
在这里插入图片描述

1.2.3.4 Babel 设置

​ Babel 是一个转换编辑JS代码所需的加载器，它将javasrcipt原生函数通过webpack 进行编译打包。

$ npm i -D @babel/core @babel/preset-env babel-loader
  • @babel/core（babel 主体）
  • @babel/preset-env（自动指定执行环境和转译的预设）
  • babel-loader（转译 JS）

安装完成后，将 Babel 设置添加到 webpack.config.js 文件中。

const {VueLoaderPlugin } = require("vue-loader")
module.exports = {
  mode: 'development',
   module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
	  {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      },
	 {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
}

App.vue文件中加入初始化函数内容。

<template>
  <h1 class="example">Hello World</h1>
  <h2>111111</h2>
  {{ message }}
</template>
<script>
export default {
  name: 'App',
    data() {
        return {
            message: "Hello Vue!"
        }
    },
   created() {
    const webpack_babel = '来到我的世界';
    alert(webpack_babel);
  },
}
</script>
<style>
.example{
  font-weight: bold;
  color:red;
}
</style>

运行编译命令 npx webpack 后。运行浏览中弹出对话框。
在这里插入图片描述

1.2.4 web 服务编译环境

​ 很多时候我们需要在web服务模式下进行开发代码，这时候我们需要导入webpack web服务器开发插件到项目中。

$ npm i -D webpack-dev-server
$ npm i -D html-webpack-plugin

webpack.config.js 文件中加入服务器配置信息内容,导入服务插件const HtmlWebpackPlugin = require(“html-webpack-plugin”)。

const path = require('path');
const {VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: 'development',
   module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
	  {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      },
	 {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
	new HtmlWebpackPlugin({
		template:path.join(__dirname, "./index.html"),
	})
  ],
}

配置服务的启始信息内容template:path.join(__dirname, “./index.html”)。

启动服务编辑模式npx webpack serve --open

$ npx webpack serve --open --mode=development
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.22.132.232:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\vue\webpack-vue\public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
asset main.js 800 KiB [emitted] (name: main)

为了方便开发都会将web启动模式脚本加载package.json文件中。

{
 ......
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack serve --open --mode=development",
      "build": "webpack --mode=production --progress",
      "dist-clean": "rm -fr dist/*"
  },
 ......
}

通过npm run start 命令启动web编辑模式，这样在开发的时候会很方便。

$ npm run start
> webpack-vue@1.0.0 start
> webpack serve --open --mode=development
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.22.132.232:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\vue\webpack-vue\public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
asset main.js 800 KiB [emitted] (name: main)
asset index.html 237 bytes [emitted]
runtime modules 27.3 KiB 12 modules
modules by path ./node_modules/ 606 KiB 32 modules
modules by path ./src/ 4.68 KiB
  ./src/index.js 91 bytes [built] [code generated]
  ./src/App.vue 807 bytes [built] [code generated]
  ./src/App.vue?vue&type=template&id=7ba5bd90 260 bytes [built] [code generated]
  ./src/App.vue?vue&type=script&lang=js 378 bytes [built] [code generated]
  ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 272 bytes [built] [code generated]
  ./node_modules/babel-loader/lib/index.js??clonedRuleSet-2.use!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[5].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90 697 bytes [built] [code generated]

在浏览器录入http://localhost:8080 可以看到.vue脚本编辑的页面。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/985049.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python超入门（1）__迅速上手操作掌握Python

Python超入门（1）__迅速上手操作掌握Python

# 1.第一个代码&#xff1a;输出语句 # 1.第一个代码&#xff1a;输出语句 print("My dogs name is Huppy!") print(o----) print( ||| ) print("*" * 10) """ 输出结果&#xff1a; My dogs name is Huppy! o----||| ********** "&…
阅读更多...
私有化部署即时通讯平台，完美替代飞书和钉钉的SaaS系统

私有化部署即时通讯平台，完美替代飞书和钉钉的SaaS系统

在当今快速发展的数字化时代&#xff0c;企业对于安全、灵活、可定制的即时通讯平台需求不断增长。作为一家领先的品牌&#xff0c;WorkPlus专注于提供私有化部署的即时通讯平台&#xff0c;完美替代飞书和钉钉的SaaS系统。本文将重点介绍WorkPlus如何通过创新的解决方案&#…
阅读更多...
2023高教社杯数学建模B题思路分析 - 多波束测线问题

2023高教社杯数学建模B题思路分析 - 多波束测线问题

# 1 赛题 B 题 多波束测线问题 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀 速直线传播&#xff0c; 在不同界面上产生反射&#xff0c; 利用这一原理&#xff0c;从测量船换能器垂直向海底发射声波信 号&#xff0c;并记录从声波发射到…
阅读更多...
【MATLAB第72期】基于MATLAB的LightGbm(LGBM)梯度增强决策树多输入多输出回归预测模型

【MATLAB第72期】基于MATLAB的LightGbm(LGBM)梯度增强决策树多输入多输出回归预测模型

【MATLAB第72期】基于MATLAB的LightGbm(LGBM)梯度增强决策树多输入多输出回归预测模型 一、学习资料 (LGBM)是一种基于梯度增强决策树(GBDT)算法。 往期研究了多输入单输出回归预测方法&#xff0c;本次研究多输入多输出回归预测。 参考链接&#xff1a; lightgbm原理参考链…
阅读更多...
高德地图API使用教程

高德地图API使用教程

高德地图API使用教程 开发前准备获取key值和相关安全密钥 简单使用需求开发h5范围打卡-vue3地图选点-vue3 开发前准备 获取key值和相关安全密钥 进入高德开放平台 https://lbs.amap.com/ 登录后&#xff0c;打开我的应用&#xff08;无账号要先注册&#xff09; 打开我的应用…
阅读更多...
3dsmax 蒙皮替换骨架

3dsmax 蒙皮替换骨架

需求 本文描述部分来源于 TAZORN&#xff0c;最后附上Python实现 保留蒙皮信息&#xff0c;将骨骼替换成新的骨架模型M上的Skin目前指定的是骨架A&#xff0c;在蒙皮信息不变的情况 下更换成骨架B 替换的操作需要用到 SkinUtilities 工具 手动进行骨骼替换的方法 Snapshot原…
阅读更多...
maven打包时显示无效jdk版本

maven打包时显示无效jdk版本

1、配置当前项目所需的Jdk版本 2、与当前项目指定的jdk版本相同 3、与当前项目指定的jdk版本相同 4、与当前项目指定的jdk版本相同 5、指定主项目启动时的vm配置与当前项目所需版本相同
阅读更多...
手写Spring：第18章-数据类型转换工厂设计实现

手写Spring：第18章-数据类型转换工厂设计实现

文章目录 一、目标&#xff1a;数据类型转换工厂二、设计&#xff1a;数据类型转换工厂三、实现&#xff1a;数据类型转换工厂3.1 工程结构3.2 数据类型转换工厂类图3.3 定义类型转换接口3.3.1 类型转换处理接口3.3.2 类型转换工厂3.3.3 通用类型转换接口3.3.4 类型转换注册接口…
阅读更多...
共筑安全防线|与安全狗相约2023年国家网络安全宣传周

共筑安全防线|与安全狗相约2023年国家网络安全宣传周

在《关于网络安全和信息化工作重要指示》里 “坚持筑牢国家网络安全屏障”被提及 网络安全的重要性再次被重申 实际上 在“十四五”数字经济发展规划及“二十大”上 网络安全也被多次强调 “网络安全”不再简单停留在字面意思上 它成为囊括 你我个人隐私安全、信息安全 …
阅读更多...
Linux：LVS (NAT群集搭建)

Linux：LVS (NAT群集搭建)

模拟环境 外网入口服务器 外网 192.168.8.88 内网ip 192.168.254.4 web1 服务器 ip 192.168.254.1 网关&#xff1a; 192.168.254.4 web2 服务器 ip 192.168.254.2 网关&#xff1a; 192.168.254.4 共享存储服务器 ip 192.168.254.3 介绍 访问 外网192.16…
阅读更多...
方案：TSINGSEEE青犀AI智能分析网关森林防火智慧监管平台方案

方案：TSINGSEEE青犀AI智能分析网关森林防火智慧监管平台方案

一、方案背景 森林是地球上最重要的生态系统之一&#xff0c;对环境、气候、水循环和空气质量具有重要影响。森林火灾会造成巨大的经济损失&#xff0c;具有发生面广、突发性强、破坏性大、危险性高、处置扑救特别困难等特点&#xff0c;严重危及人民生命财产和森林资源安全&a…
阅读更多...
video标签自动播放音视频并绘制波形图

video标签自动播放音视频并绘制波形图

html中的<video>标签可以用来播放常见的音视频格式&#xff0c;支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等&#xff0c;当然支持的格式也和浏览器和操作系统有关。这里以一个可以自动播放音视频并绘制波形图的页面为例说明一下<video>标签的用法。 vid…
阅读更多...
NPM使用技巧

NPM使用技巧

NPM使用技巧 前言技巧全局模块位置PowerShell报错安装模块冲突 NPM介绍NPM命令使用方法基本命令模块命令查看模块运行命令镜像管理 常用模块rimrafyarn 前言 本文包含NodeJS中NPM包管理器的使用技巧&#xff0c;具体内容包含NPM介绍、NPM命令、常用模块等内容&#xff0c;还包…
阅读更多...
Android开发常见问题：字符串乱码问题

Android开发常见问题：字符串乱码问题

前言 最近的项目里遇到了字符串乱码的问题&#xff0c;记录一下研究心得。 正文 一、byte数组如何保存字符串 通常情况下&#xff0c;数据的传输和读取都是通过socket&#xff0c;读取socket需要使用byte数组&#xff0c;例如要写入一个字符串到socket中&#xff0c;我们需…
阅读更多...
Redis-带你深入学习数据类型Hash【面试重点】

Redis-带你深入学习数据类型Hash【面试重点】

目录 1、基础知识 2、相关命令 2.1、hset、hget 2.2、hexists 2.3、hdel 2.4、hkeys、hvals、hgetall 2.5、hmget、hmset 2.6、hlen 2.7、hsetNX 2.8、Hincrby、Hincrbyfloat 3、应用场景-缓存 4、缓存方式对比 1、基础知识 redis中存储数据本身就是以键值对的形式…
阅读更多...
华为OD机试 - 真正的密码 - 数据结构list（Java 2023 B卷 100分）

华为OD机试 - 真正的密码 - 数据结构list（Java 2023 B卷 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路具体解题思路&#xff1a; 五、Java算法源码六、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#…
阅读更多...
智慧商城项目

智慧商城项目

智慧商城 - 授课大纲 接口文档&#xff1a;https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080 演示地址&#xff1a;http://cba.itlike.com/public/mweb/#/ 01. 项目功能演示 1.明确功能模块 启动准备好的代码&#xff0c;演示移动端面…
阅读更多...
视频用二维码怎么分享？扫码看视频在线制作方法

视频用二维码怎么分享？扫码看视频在线制作方法

怎么将本地的视频生成二维码呢&#xff1f;相信很多小伙伴经常会储存许多自己喜欢的视频&#xff0c;那么如果想要给多人分享时&#xff0c;一个个发送会比较麻烦&#xff0c;那么将视频生成二维码就是提高分享效率的一种方式。制作视频二维码的方法也很简单&#xff0c;使用二…
阅读更多...
【python】PySide中QMessageBox设置中文按钮及使用

【python】PySide中QMessageBox设置中文按钮及使用

PyQt、PySide使用QMessageBox的时候会发现按钮都是英文的&#xff0c;对于中文的应用软件来说会降低使用体验。本文将以问答对话框为例&#xff0c;介绍如何设置中文按钮&#xff0c;以及如何使用。 实验环境 本文实验环境为&#xff1a;Windows 10&#xff0c;Python 3.8&am…
阅读更多...
UI基础——UGUI源码架构

UI基础——UGUI源码架构

文章目录 如何阅读源码UGUI源码整体架构源码整体类图事件模块EventSystem类图点击事件时序图 参考&#xff1a; 如何阅读源码 阅读源码是提高编程能力和技术水平的重要途径之一。以下是一些有效的阅读源码的方法&#xff1a; 确定目标&#xff1a;&#xff08;1&#xff09;了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023