如何在没有 CLI / Webpack / Node 的情况下制作 Vue 3 应用程序

Question

我正在尝试制作 Vue 3 应用程序，但没有 CLI 和 Webpack。

目前还没有官方文档。 CDN上有很多版本(vue.cjs.js, vue.cjs.prod.js, vue.esm-browser.js, vue.esm-bundler.js, vue.global.js, vue.runtime.global.js...).

选哪个？以及如何挂载应用程序，旧方法不起作用。有很多在线示例如何工作 new Composition API 但是 none 如何在没有 CLI / Webpack 的情况下启动项目。

Answer 1

Link 到 Vue 3 CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

正文中：

<div id="app">
</div>

<script type="module">
    import app from './app.js'
    const {createApp} = Vue;
    createApp(app).mount('#app');
</script>

在app.js中是简单组件：

export default {
    name: 'Test',

    setup() {
        const title = "Hello";
        
        return {
            title
        };
    },
    
    template: `
      <div>
        <h1>{{title}}</h1>
      </div>
    `,
};

代替一个组件，app.js可以是其他组件的容器。

我制作了简单的 Vue 3 QuickStart 模板，因此任何人都可以看到它是如何工作的。

模板为类SPA风格，包含4个示例页面、4个组件、路由和存储。它仅使用来自 CDN 的 Vue.js，其他一切都是手工制作的 ;)

注意：这不是库，它只是演示代码，因此任何人都可以看到如何在简单的场景中安装 Vue 3 应用程序和使用 Composition API。

在线演示：http://vue3quickstart.rf.gd/
GitHub: https://github.com/SaleCar/Vue3-QuickStart

Answer 2

此外，正如Evan You 所推荐的，Vite(https://madewithvuejs.com/vite) 是@vue/cli 和webpack 的一个很好的替代品。它仍然像 CLI，但我认为更轻量级。速度快，支持SFC。

Answer 3

在文档中找到：https://vuejs.org/guide/quick-start.html#without-build-tools

没有构建工具

要在没有构建步骤的情况下开始使用 Vue，只需将以下代码复制到 HTML 文件中并在浏览器中打开它：

<script src="https://unpkg.com/vue@3"></script>

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

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

以上示例使用 Vue 的全局构建，其中所有 API 都暴露在全局 Vue 变量下。

虽然全局构建有效，但为了保持一致性，我们将在整个文档的其余部分主要使用 ES modules 语法。为了在本机 ES 模块上使用 Vue，请改用以下 HTML：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

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

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

请注意我们如何在代码中直接从 'vue' 导入 - 这是通过 <script type="importmap"> 块实现的，利用了名为 Import Maps. Import maps are currently only available in Chromium-based browsers, so we recommend using Chrome or Edge during the learning process. If your preferred browser does not support import maps yet, you can polyfill it with es-module-shims.[=19= 的本机浏览器功能]

您可以将其他依赖项的条目添加到导入映射 - 只需确保它们指向您打算使用的库的 ES 模块版本。

不适用于生产

import-maps-based 设置仅供学习 - 如果您打算在生产中使用没有构建工具的 Vue，请务必查看 Production Deployment Guide.

如何在没有 CLI / Webpack / Node 的情况下制作 Vue 3 应用程序

How to make Vue 3 application without CLI / Webpack / Node

vue.js

vuejs3

没有构建工具