webpack 中配置 vue 环境

基本使用

我们知道 vue 是一个渐进式框架，我们可以在项目中局部使用，并不侵犯其他代码。
vue 最大的作用就是利用虚拟 dom 将开发者从操作 dom 的繁杂中解放出来，使得开发者可以更专注处理数据的逻辑。

安装：npm i vue

然后我们能就在 webpack 的入口 js 中引入 vue，进行使用了。

import {
   createApp} from "vue"

const app = createApp({
   
  template: "<h2>Hello World</h2>"
})

app.mount("#app")

上面代码构建后执行，发现网页没有效果。为什么？这和引入的 vue js 文件有关。

警告信息表示当前运行环境不支持 template 模块选项，建议我们手动导入vue/dist/vue.esm-bundler.js包。

vue 不同的构建版本

import 导入 vue，我们引入的具体是什么？
打开 node_module 文件夹，查看 index.js。发现会根据当前的构建环境导入不同构建版本的 vue js 文件。