创建一个 Vue 应用

应用实例

没什么可说得，Vue3 可以创建多个实例且避免污染，而 Vue2 创建多个实例时有可能被污染。

即在 Vue2 创建多个实例时，如果在一个实例中修改了全局的 Vue 原型或者全局组件，会导致其它实例也受到影响，从而出现实例被污染的情况。

html 复制代码

<div id="app1">
  <p>{{ message }}</p>
</div>

<div id="app2">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app1',
    data: {
      message: 'Hello app1'
    }
  });
  
  // 修改原型
  Vue.prototype.message = 'Global message';
  
  new Vue({
    el: '#app2',
    // 没有定义任何属性，但是依旧可以在页面中获取到值
    data: {}
  });
</script>

在线地址请查看jsfiddle.net/zhangwei123...

这就是 createApp 与 new Vue 的区别之处了，至于实现细节，等我们学会了再研究。

根组件

根组件，也就是创建方法 cerateApp 的参数。如果有人疑惑，我的页面很复杂，一个组件呈现不完，那可以在 createApp 中写多个参数吗？

如果你的页面功能很复杂，需要多个组件呈现，那你构建时，可以创建一个空的根组件，其它呈现内容的组件都在根组件之中。总之，根组件只有一个。想象一下，不论有多少枝干，都归属于一棵树。

挂载应用

所谓挂载，就是把生成的 js 代码、html 代码、css 代码动态添加到你的 html 页面中。

当你未使用根组件模板而是直接通过在挂载容器内写模板来使用时，页面将无法呈现，在控制台有警告提示：

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

意思是说，你的写法没问题，但是你引用的这个 Vue 有问题，请配置一下命名，引用正确的 Vue。

什么叫引用正确的 Vue 呢？

这里多说2句，看图：

json 复制代码

{
  "name": "vue",
  "version": "3.4.15",
  "main": "index.js",
  // module 字段指定了 ES Module 格式的文件路径。
  // 当在支持 ES Module 的环境下（比如现代浏览器或支持 ES Module 的构建工具）导入该模块时，
  // 会使用这个路径指定的文件。
  "module": "dist/vue.runtime.esm-bundler.js",
  // unpkg 字段指定了通过 unpkg CDN 访问的文件路径。当在浏览器环境中直接通过 script 标签
  // 引入该模块时，会使用这个路径指定的文件。
  "unpkg": "dist/vue.global.js",
  // jsdelivr 字段指定了通过 jsDelivr CDN 访问的文件路径。类似于 unpkg。
  "jsdelivr": "dist/vue.global.js",
  // 定义打包编译时，生成的文件如何导出。
  "exports": {
    // 默认导出方式
    ".": {
      // 在支持 ES Module 的环境中，如何导入文件
      "import": {
        "types": "./dist/vue.d.mts",
        // 在 Node.js 环境中的导入路径。
        "node": "./index.mjs",
        // import { ref } from 'Vue'，导入的文件就是它，也就是默认导入的文件路径。
        "default": "./dist/vue.runtime.esm-bundler.js"
      },
      // 在 CommonJS 环境中如何导入文件，随着 es6 模块的普及，该方式已经比较少了，一般旧项目可能会出现。
      "require": {
        "types": "./dist/vue.d.ts",
        "node": {
          "production": "./dist/vue.cjs.prod.js",
          "development": "./dist/vue.cjs.js",
          "default": "./index.js"
        },
        "default": "./index.js"
      }
    },
    // 生成服务端渲染需要导入的文件
    // 技术是个轮回，现在前端也开始普通服务端渲染，这些生成的文件是在服务端框架中导入时使用的。
    "./server-renderer": {
      "import": {
        "types": "./server-renderer/index.d.mts",
        "default": "./server-renderer/index.mjs"
      },
      "require": {
        "types": "./server-renderer/index.d.ts",
        "default": "./server-renderer/index.js"
      }
    },
    // 用于单文件组件编译的文件。
    // 在开发环境中，用于将单文件组件编译为 JavaScript 对象。
    // 适用于构建工具和开发环境。
    "./compiler-sfc": {
      "import": {
        "types": "./compiler-sfc/index.d.mts",
        "browser": "./compiler-sfc/index.browser.mjs",
        "default": "./compiler-sfc/index.mjs"
      },
      "require": {
        "types": "./compiler-sfc/index.d.ts",
        "browser": "./compiler-sfc/index.browser.js",
        "default": "./compiler-sfc/index.js"
      }
    },
    // 用于支持 JSX 的运行时文件。
    // 当需要在 Vue 中使用 JSX 语法时，可以导入这个文件。
    "./jsx-runtime": {
      "types": "./jsx-runtime/index.d.ts",
      "import": "./jsx-runtime/index.mjs",
      "require": "./jsx-runtime/index.js"
    },
    "./jsx-dev-runtime": {
      "types": "./jsx-runtime/index.d.ts",
      "import": "./jsx-runtime/index.mjs",
      "require": "./jsx-runtime/index.js"
    },
  },
  "buildOptions": {
    "name": "Vue",
    "formats": [
      "esm-bundler",
      "esm-bundler-runtime",
      "cjs",
      "global",
      "global-runtime",
      "esm-browser",
      "esm-browser-runtime"
    ]
  },
  "author": "Evan You",
}

这是 vue 的 package.json 文件，里面说明了当打包时，它会生成多少个文件，每个文件分别在什么环境下被引用。我们可以通过 npm 仓库查看生成的文件，以方便理解。www.npmjs.com/package/vue...

因为我们默认导入的文件是"vue/dist/vue.runtime.esm-bundler.js"，这个文件只包含 Vue.js 的运行时构建，不包含编译器和模板编译器。所以控制台提示我们要换成其它的文件，即"vue/dist/vue.esm-bundler.js"，也就是带编译时的文件。

vite.config.js

js 复制代码

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      // 添加下面代码即可。
      vue: "vue/dist/vue.esm-bundler.js",
    },
  },
});