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

选哪一个？以及如何挂载应用程序，旧方式不起作用。有许多在线例子如何工作的新组合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应用程序和使用组合API。

在线演示：http://vue3quickstart.rf.gd/

GitHub：https://github.com/SaleCar/Vue3-QuickStart

Answer 2

在docs中发现：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'导入--这是通过<script type="importmap">块实现的，它利用了名为进口地图的原生浏览器特性。导入地图目前只能在基于铬的浏览器中使用，因此我们建议在学习过程中使用Chrome或Edge。如果您喜欢的浏览器还不支持导入映射，您可以用es模块-shims填充它。

您可以将其他依赖项添加到导入映射中--只需确保它们指向要使用的库的ES模块版本。

不适用于生产

基于导入映射的设置仅用于学习如果您打算在生产中使用Vue而不使用生成工具，请确保签出了生产部署指南. 。

Answer 3

此外，正如您推荐的Evan所建议的，Vite(https://madewithvuejs.com/vite)是@vue/cli和webpack的一个很好的替代方案。它仍然是CLI喜欢，但我认为更轻量级。迅速并支持证监会。