闲聊Vue3.0及2020年终总结_vue 实现年度总结-CSDN博客

本文链接：https://blog.csdn.net/vv_bug/article/details/111568951

本文详述了作者如何从源码角度学习Vue3.0，包括源码下载、项目搭建、配置webpack，以及如何在本地运行和调试Vue3.0源码。同时，文章还介绍了作者对新技术的态度，鼓励读者勇敢面对新技术的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近经常有小伙伴问我一些关于 Vue3.0 的问题，有些甚至恐慌 Vue3.0 发布后自己不会咋办？会不会以后就要失业了呢？当一些新技术的出现，总有些人会对自己不自信，当然，你问我怕不怕？说实话，我是一点都不慌的，别人写出来的东西你去用你还怕啥？无非就是你自己在怀疑你自己能力罢了，年轻人怕啥？干就完了！不过既然有小伙伴问到了 Vue3.0，我还是花了点时间去研究了一下，下面就聊一下当我遇到新技术的时候我是怎么做的。

准备工作

首先我简单的浏览了一下 Vue3.0 的官网，然后重点浏览了一下跟 Vue 2.0 不一样的地方（大家可以直接看这里：https://v3.vuejs.org/guide/migration/introduction.html），有小伙伴又要说了：“ Vue3.0 目前只有英文文档看不懂啊，怎么办呢？” 凉拌！作为一个程序猿，看英文文档是基本技能，看不懂也得看！！！当然，毕竟是文档类的东西，看过也未必能够记住，所以完全没必要把太多时间花在记文档上面，所以我一般都是简单的浏览一下就去看源码了。

源码分析

首先贴一下 Vue3.0 的源码地址：https://github.com/vuejs/vue-next.git。

直接 clone 一份 Vue3.0 的源码：

git clone https://github.com/vuejs/vue-next.git

如果不把源码运行起来的话，确实看起来蛮费劲的，所以最好是能够运行并用起来，简单的看了一下项目结构后我就进行了下面的操作。

在 Vue3.0 源码目录执行以下命令安装依赖：

yarn

依赖安装完毕后直接在 Vue3.0 源码根目录执行以下命令去开启开发模式并且打开源码的 source-map 功能：

yarn dev -s

然后你会发现已经在编译打包了，并且 rollup 还会监听文件的改变自动编译打包，最后会在 xxx/vue-next/packages/vue/dist 目录下生成两个文件：

vue.global.js：Vue 完整代码（包含了runtime 跟 compiler ）。
vue.global.js.map：vue.global.js 源码映射文件，提供给浏览器调试用。

ok！接下来我们新开一个终端，然后执行以下命令开启服务：

yarn serve

这个时候你就可以用 http://localhost:5000/packages/vue/dist/vue.global.js 链接直接访问本地 Vue3.0 打包过后的开发环境源码了，是的，你可以用 CDN 的形式在 <script> 标签中直接访问，既然源码有了，我们接下来就把它用起来，那怎么用呢？官方提供了几种方式给我们：

Via CDN: <script src="https://unpkg.com/vue@next"></script>

In-browser playground on Codepen(opens new window)

In-browser Sandbox on CodeSandbox(opens new window)
Scaffold via Vite (opens new window):
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
1
Scaffold via vue-cli (opens new window):
npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

哈哈！我这个人最不喜欢按文档提示来了，为了挑战一下自己，决定从 0 开始搭建一个 Vue3.0 项目（前面我也有写过类似的文章的：来和 webpack 谈场恋爱吧欢迎大家点赞跟关注！）。

Vue3.0 项目搭建

首先创建一个目录叫 vue-demo，然后初始化 npm：

mkdir vue-demo && cd vue-demo && npm init

安装 webpack

webpack 核心库。

在工程目录 vue-demo 执行以下命令：

npm install -D webpack

安装 webpack-cli

webpack 指令库。

在工程目录 vue-demo 执行以下命令：

npm install -D webpack-cli@^3.0.0

安装 webpack-dev-server

webpack 开发者服务框架。

在工程目录 vue-demo 执行以下命令：

npm install -D webpack-dev-server

安装 webpack-chain

webpack 配置工具。

在工程目录 vue-demo 执行以下命令：

npm install -D webpack-chain

创建 webpack 配置

在工程目录 vue-demo 下创建 webpack.config.js 文件：

touch webpack.config.js

然后对 webpack.config.js 进行配置，用 webpack-chain 导入一个 webpack 配置：

const config = new (require('webpack-chain'))();

module.exports = config.toConfig();

为了开发方便，我们在 package.json 中声明两个脚本 build 跟 dev：

{
   
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf dist && webpack --mode=production", // 生产环境
    "dev": "webpack-dev-server --mode=development --progress" // 开发环境
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^5.11.0",
    "webpack-chain": "^6.5.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

入口与出口

我们首先在工程目录 vue-demo 下创建一个 src 目录，然后在 src 目录下创建一个 main.s 文件：

mkdir src && cd src && touch main.js && cd ..

然后我们找到 webpack.config.js 文件，对 webpack 的入口和出口进行配置：

const path