16

我正在尝试制作 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 的情况下启动项目。

4

2 回答 2

29

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

于 2020-07-11T19:28:45.163 回答
1

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

于 2020-07-25T01:57:28.543 回答