如何在没有 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。 ...）。

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

Answer 1

链接到 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