我正在try 制作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://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>

应用程序内.js是一个简单的组件:

export default {
    name: 'Test',

    setup() {
        const title = "Hello";
        
        return {
            title
        };
    },
    
    template: `
      <div>
        <h1>{{title}}</h1>
      </div>
    `,
};

而不是一个组件,应用程序.js可以是其他组件的容器.

我制作了简单的Vue 3快速入门模板,这样任何人都可以看到它是如何工作的.

模板采用SPA风格,包含4个样本页面、4个组件、路由和存储.它只使用Vue.来自CDN的js,其他一切都是手工制作的;)

Note: This is not library, it's just demo code so anyone can see how to mount Vue 3 application and use Composition API in simple scenario.

Online demo: http://vue3quickstart.rf.gd/
GitHub: https://github.com/SaleCar/Vue3-QuickStart

Vue.js相关问答推荐

Vuetify快速失败不会阻止发送表单

如何将字符串中的
解析为 VUE.js 中的 html 标记

将 Vue 应用程序挂载到主 Vue 应用程序的容器中

Vue:在表格中显示嵌套数据

v-for 内部的组件

如何将对象作为props传递并让组件更新子对象

如何修复跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应问题?

如何在 vue 3 脚本设置中的组件上使用 v-model

Vuetify v-btn 路由活动类问题

基于媒体查询的vue绑定值

所有 vue props和数据都给出错误 Property属性在 type 上不存在,带有 typescript

重新加载页面正在 vue 组件中的插槽上闪烁内容

是否可以从 vue-devtools 中排除 vue 事件和 vuex Mutations?

执行调度程序刷新期间未处理的错误,这可能是一个 Vue 内部错误

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

我应该将所有数据存储在 vuex 状态

从 vuex 存储访问 $vuetify 实例属性

使用 vuejs 动态设置 id 标签

Vue 3 – 渲染无法动画的非元素根 node

如何在 vue3 中的setup方法中发出事件?