Vue中全局构建版本和模块化构建版本区别

克里斯蒂亚诺更新

已于 2024-04-12 06:49:20 修改

阅读量108

点赞数 2

分类专栏： Vue 文章标签： vue.js

于 2024-04-11 23:48:36 首次发布

本文链接：https://blog.csdn.net/weixin_36152801/article/details/137657865

版权

Vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

全局构建版本是使用第三方的vue.js链接引入

模块化构建版本是使用本身的 Vue 引入

举例：

全局构建版本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue SPA</title>
</head>
<body>

<div id="app">
  <hello-world></hello-world>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  // 定义一个简单的组件
  const HelloWorld = {
    template: `
      <div>
        <h1>{{ message }}</h1>
        <button @click="changeMessage">Change Message</button>
      </div>
    `,
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    methods: {
      changeMessage() {
        this.message = 'Hello SPA!';
      }
    }
  };

  // 创建 Vue 应用实例
  const app = createApp({
    components: {
      HelloWorld
    }
  });

  // 将应用实例挂载到页面上
  app.mount('#app');
</script>

</body>
</html>

模块化构建版本：

如果不使用全局构建版本，而是使用模块化构建版本，那么你可以通过引入 Vue.js 的模块化构建版本，然后在你的项目中使用模块系统来导入 Vue.js 并创建应用。以下是一个示例：

假设你正在使用现代的前端构建工具（如Webpack、Rollup等）来构建你的项目，你可以按照以下步骤来写一个简单的 Vue 应用：

步骤 1: 安装 Vue

首先，在你的项目中安装 Vue.js 的模块化构建版本：

npm install vue@next

步骤 2: 创建 Vue 应用

创建一个 main.js 文件，这将是你的应用的入口文件。在这里，你将导入 Vue 并创建一个 Vue 应用实例

// main.js

import { createApp } from 'vue';
import App from './App.vue';

// 创建 Vue 应用实例
createApp(App).mount('#app');

步骤 3: 创建 Vue 组件

创建一个 Vue 组件文件，比如 App.vue，它将包含你的应用的 HTML 模板和 Vue 逻辑。

<!-- App.vue -->

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

<style>
/* 可选的样式 */
</style>

步骤 4: 编写 HTML 文件

编写一个 HTML 文件来加载你的应用，并在其中指定一个容器用于挂载 Vue 应用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/main.js"></script>
</body>
</html>