我正在尝试制作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的情况下启动项目。
Vue 3 的 CDN 链接：
<script src="https://unpkg.com/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
在文档中找到：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模块语法。为了在原生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' - 这是通过利用一种称为Import Maps的本机浏览器功能实现的，使用<script type="importmap">块。目前仅支持基于Chromium的浏览器，因此我们建议在学习过程中使用Chrome或Edge。如果您喜欢的浏览器尚未支持导入映射，则可以使用es-module-shims进行填充。
vue inline template扩展是真正的技巧。我认为最好将其放在这个答案中，这样更多的人会喜欢它。 - Fandi Susanto