Как сделать приложение Vue 3.0 без CLI / Webpack / Node - PullRequest
Новая
       95

Как сделать приложение Vue 3.0 без CLI / Webpack / Node

2 голосов
/ 11 июля 2020

Я пытаюсь создать приложение Vue 3.0, но без интерфейса командной строки и 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.

Ответы [ 2 ]

4 голосов
/ 11 июля 2020

Ссылка на Vue 3 CDN: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-rc.1/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>
    `,
};

Вместо одного компонента app. js может быть контейнером для других компонентов.

Я сделал простой шаблон Vue 3 QuickStart, чтобы каждый мог увидеть, как это работает.

Шаблон - это в стиле SPA и содержит 3 образца страницы, 3 компонента, маршрутизацию и хранилище. Он использует только Vue. js из CDN, все остальное делается вручную;)

Примечание: это не библиотека, это просто демонстрационный код, чтобы любой мог увидеть, как смонтировать Vue 3 и используйте Composition API в простом сценарии.

Онлайн-демонстрация: http://vue3quickstart.rf.gd/

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

0 голосов
/ 25 июля 2020

Кроме того, как рекомендовал Эван Ю, Vite (https://madewithvuejs.com/vite) является хорошей альтернативой @ vue / cli и webpack. Он по-прежнему похож на CLI, но, я думаю, более легкий. Быстро и поддерживает SF C.

...