Как работать со скриптом CDN только в Vue ... невозможно импортировать компонент? - PullRequest
Новая
       20

Как работать со скриптом CDN только в Vue ... невозможно импортировать компонент?

0 голосов
/ 13 марта 2020

Я новичок ie до Vue. js. Мне не нравится работать с cli, поэтому я использую CDN для всего, но застрял в какой-то неизвестной проблеме. Я много гуглил, но не мог понять, что происходит. Любая помощь будет очень признателен.

Вот мой индекс. php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="8-utf" />
        <meta name="author" content="Yash Gaikwad">
        <meta name="description" content="">
        <meta name="keyword" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <link rel="stylesheet" href="style.css"> <!--Stylesheet-->


        <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet"> <!--Google Fonts-->
        <script src="https://www.w3schools.com/lib/w3.js"></script> <!--W3.Css-->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js" type="text/babel"></script><!--Bable Hosting-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--Vue Hosting-->

        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!--Vue Router-->

    </head>
    <body>

        <div id="app">

        </div>

        <script src="script.js"></script> <!--Javascript-->
    </body>
</html>

Вот мой сценарий. js

import app from "./main.vue"

new Vue({
    el: "#app",
    data: {

    },
    methods: {

    },
    render: h => h(app)
});

Это мой main. vue (root component) 

<template>
    <app-header></app-header>
    <app-footer></app-footer>
</template>

<script>
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";

export default {
    components: {
        "app-header": Header,
        "app-footer": Footer
    }

}
</script>

<style scoped>

</style>

Мне кажется, что импорт main. vue вызывает ошибку. И что-то там не так.

Это ошибки, которые я получаю как от ff, так и от chrome

Uncaught SyntaxError: Cannot use import statement outside a module

SyntaxError: import declarations may only appear at top level of a module

Спасибо большое, ребята.

Ответы [ 2 ]

2 голосов
/ 13 марта 2020

.vue - это не тот тип файлов, который понимает браузер. Если вы хотите создавать VueJS приложения без использования каких-либо инструментов CLI, вам нужно узнать о модулях ES6 и понять, что ваше приложение не будет поддерживаться всеми браузерами.

Инструменты CLI, такие как Webpack, преобразуют ваш JavaScript и Vue код в JavaScript код, совместимый с большим количеством браузеров, минимизирует ваш код (уменьшает размер загружаемых файлов) и т. Д. c. Это также значительно упрощает использование сторонних пакетов в вашем коде и их обновление.

Использование инструмента CLI, такого как Webpack или VueCLI для Vue приложения сделают вашу жизнь намного проще в долгосрочной перспективе и являются стандартным способом работы в отрасли.

0 голосов
/ 13 марта 2020

Всегда оператор импорта должен находиться вверху файла, вы используете шаблон, а затем импорт в main. vue поместите блок скрипта вверху, а затем шаблон

...