vue.js - 如何在没有 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