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

Posted 2023-02-22

【中文标题】如何在没有 CLI / Webpack / Node 的情况下制作 Vue 3 应用程序

【英文标题】：How to make Vue 3 application without CLI / Webpack / Node

【发布时间】：2020-11-01 08:05:26

【问题描述】：

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

【参考方案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 快速入门模板，这样任何人都可以看到它是如何工作的。

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

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

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

【讨论】：

vue inline template 扩展是真正的黑客。我认为最好把它放在这个答案中，这样更多的人会喜欢它。

【参考方案2】：

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

【讨论】：

是的，有点……但是，您仍然必须安装节点、npm、自定义开发服务器，并且在部署时，您必须编译为本机。如果您可以在没有 npm 和任何编译的情况下拥有 100% 纯原生解决方案，您为什么要这样做？只需您可以在任何 Web 服务器上复制和运行的文件，它就可以工作。