前提

需要你对webpack有一定的了解，可以查看
https://www.yuque.com/yejielin/mypn47/qh6irh#mRNKs

=====================

如何使用？

1、安装Vue3

在webpack构建的项目中，执行命令行安装

  1. npm install vue@next

vue@next是vue3，如果写成vue，安装的是2.x版本

2、引入Vue，挂载

在webpack的js入口（一般是项目下main.js）处，引入Vue3的 createApp函数。

然后调用这个函数，传入一个对象（这个对象也叫组件），这个对象的属性可以有template、data、setup等属性。
image.png

最后mount 挂载到一个id为app的HTML元素上，相当于替换这个元素，内容变成Vue渲染的内容。
image.png

3、更换版本（重要）

image.png
警告说，组件（就是那个对象）提供了template这个属性选项，但是默认的 Vue 版本（runtime compilation版本）是不支持的。

打开我们项目下node_modules文件夹，找到vue，打开dist（这是Vue源码打包好的文件夹）文件夹，里面可以看到很多版本。
image.png image.png
常见的就是上面的这些版本。

.runtime 版本

加上.runtime 的版本，就是runtime compilation版本，这种版本不包含对template属性进行编译，因此也会更小一点。

.prod版本

加上.prod 的版本，就是production版本，就是生产环境下用的版本，这种版本都是经过代码压缩丑化（去掉空格换行符、替换变量名等）的版本，体积较小，但完全看不懂。

因此默认的版本是使用下图的版本，加上runtime的，不包含template属性的解析。
image.png

因此要更换成不带runtime的版本
image.png

4、webpack打包

更换版本打包后就可以正常显示了

5、模块化开发

image.png
如上图，说实话把代码写在这1个文件里面，少量代码还好，如果是一个大型应用，几千几万行都在同一个文件，不现实。

模块化开发，就是把代码分散到多个文件夹里面的多个文件内，需要用到的时候再通过引用的方式拿来用，这样才是现代应用日常开发的做法。

Vue的模块化文件，都是以.vue结尾的，编写的方式可以参考
Vue - 编写Template的3种方式(Vue3)

image.png

image.png webpack的js入口文件main.js，只需要负责引入vue和挂载

6、Vue-loader

拆分文件后，webpack还是没办法识别.vue 文件，因此要安装对应的loader

  1. npm install vue-loader -D # Vue 2.x版本
  3. npm install vue-loader@next -D # Vue 3.x版本

配置
image.png

7、插件

打包还是报错，提示vue-loader 需要依赖一个名为 @vue/compiler-sfc 的一个插件，这个插件才是帮vue-loader解析.vue 文件的
image.png
安装

  1. npm install @vue/compiler-sfc -D # Vue 3.x版本

配置插件
image.png

8、重新打包完成

======================

Vue 3 配置优化

image.png
通过vue/dist/vue. esm-bundler.js 这个版本使用Vue3 时，会提示一个警告。
警告的内容说，你正在使用 vue. esm-bundler.js 这个版本。推荐你去设置一个全局的标识，让打包工具可以通过tree-shaking（摇树）的方式，打包时去掉一些没用上的代码。

链接里面是说，有2个配置。

image.png
第一个是对Vue2做适配，如果你的项目都使用Vue3 的setup写法，就不需要这段给Vue2解析的代码，就可以设置成false，让打包工具打包的时候去掉给Vue2解析的代码。

第二个是，问我们生产环境下要不要支持 devtools 这个工具，默认是false，一般这个调试的工具在开发环境用上，生产环境极少用。

image.png