Vue.js 使用Vue 3无需构建和无需CDN

在本文中，我们将介绍如何使用Vue 3来开发应用程序，而无需进行构建操作或使用CDN。

无需构建的Vue 3开发

传统的Vue开发往往需要使用构建工具（如Webpack或Vue CLI）将代码打包成一个或多个静态文件，然后再将这些文件引入到HTML中。但是，在某些情况下，我们可能希望在开发阶段直接使用Vue 3，而无需进行构建操作。

要实现这一目标，我们可以使用Vue的运行时版本（runtime-only），而不是完整版本（runtime+compiler）。运行时版本不包含编译器，因此我们无法在运行时编译模板。但是，我们可以使用JSX或者将模板编译为渲染函数来代替。

下面是一个使用Vue 3无需构建的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3无需构建</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@3.3.0/dist/vue.runtime.esm-browser.js"></script>
  <script>
    const App = {
      template: `
        <div>
          <h1>{{ message }}</h1>
          <button @click="increment">{{ count }}</button>
        </div>
      `,
      data() {
        return {
          message: "Hello Vue 3!",
          count: 0
        };
      },
      methods: {
        increment() {
          this.count++;
        }
      }
    };

    Vue.createApp(App).mount("#app");
  </script>
</body>
</html>

在上面的示例中，我们直接在HTML中引入了Vue 3的运行时版本，并在<script>标签中编写了一个Vue组件App。我们可以使用Vue.createApp方法创建一个应用实例，并通过mount方法将组件挂载到#app元素上。

这种无需构建的开发方式非常适合于小型的实验性项目或演示，因为我们不需要安装和配置构建工具，节省了时间和复杂性。

无需CDN的Vue 3开发

除了无需构建，我们还可以将Vue 3直接引入到项目中，而无需通过CDN（内容分发网络）来获取Vue的资源文件。

假设我们已经将Vue的资源文件下载到本地，我们可以像下面这样在HTML中引入：

<!DOCTYPE html>
<html>
<head>
  <title>无需CDN的Vue 3开发</title>
  <script src="path/to/vue.js"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    const App = {
      template: `
        <div>
          <h1>{{ message }}</h1>
          <button @click="increment">{{ count }}</button>
        </div>
      `,
      data() {
        return {
          message: "Hello Vue 3!",
          count: 0
        };
      },
      methods: {
        increment() {
          this.count++;
        }
      }
    };

    Vue.createApp(App).mount("#app");
  </script>
</body>
</html>

在上面的示例中，我们在<head>标签中引入了Vue的资源文件，然后在<script>标签中编写了一个Vue组件App。

这种无需CDN的开发方式可以避免在访问CDN服务器时的网络延迟或屏蔽问题。同时，如果我们在内部网络环境中开发，或对特定版本的Vue有依赖，将Vue直接引入到项目中可能更加方便和可控。