Как можно использовать Vue.код js от Codepen?

Как можно использовать Vue.код js от Codepen?

28.01.2020 02:38:01 Просмотров 17 Источник

Я хочу использовать этот код из Codepen. Итак, я щелкнул правой кнопкой мыши на resultкадре и выбрал View Frame source. Затем я скопировал исходный код и вставил его в свой собственный текстовый редактор.

Но моя веб-страница показывает часть кода как пустую.

enter image description here

Я скопировал исходный код, начиная с <style>до </body>и вставил в свой компонент. При использовании ZIP вместо этого я не знаю, как использовать код, потому что у меня просто есть компонент, а ZIP содержит скрипт.js и стиль.CSS

Что я делаю не так?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59947919/how-can-one-use-vue-js-code-from-codepen#comment106015837_59947919
Может быть, сначала посмотрите руководства vuejs по установке и настройке .
https://stackoverflow.com/questions/59947919/how-can-one-use-vue-js-code-from-codepen#comment106015866_59947919
@palaѕн я уже настроил Vue и создал различные компоненты, но я думаю, что мой подход к "копированию-вставке" в Vue неверен

Ответы - Как можно использовать Vue.код js от Codepen? / How can one use Vue.js code from Codepen?

Является ответом!
J.Dario

28.01.2020 03:15:35

Хорошо, вот копирование и вставка для чайников: Это html часть:

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <table class="dayparts table">
            <thead>
                <tr>
                    <td class="cell-label presets-label"></td>
                    <td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
                        <select v-model="selected" @change='clearAll();selectedFunc()'>
                            <option value="">Select a Preset</option>
                            <option value="0">None</option>
                            <option value="1">Afternoons</option>
                            <option value="2">Evenings</option>
                            <option value="3">Mornings</option>
                            <option value="4">Weekdays</option>
                            <option value="5">Weekends</option>
                            <option value="6">Weekends including Friday</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2"></td>
                    <td class="cell-label am-label" colspan="12">AM</td>
                    <td class="cell-label pm-label" colspan="12">PM</td>
                </tr>
                <tr class="hour-row">
                    <td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
                    </td>
                </tr>
            </thead>
            <tbody @mousedown='mouseDown' @mouseup='mouseUp' @mousemove='mouseMove'>
                <tr class="day" v-for="day in days">
                    <td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
                        v-on:click='activateDay'>{{day.dayName}}</td>
                    <td class='dayparts-cell' v-bind:value="hour.hour" data='day'
                        v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="main.js"></script>
</body>

</html>

Это и есть " голова":

<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

1) удалить <link rel="stylesheet" href="style.css">и добавить <style></style>в том же месте. Заполните его содержимым css-части.

2) заменить "vue.js " in <script src="vue.js"></script> с "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" когда вы в развитии или с "https://cdn.jsdelivr.net/npm/vue@2.6.11" для производства.

Затем перейдите в нижнюю часть вашего html-кода и найдите <script src="main.js"></script>. Удалить его и добавить пустой <script></script> вместо. Заполните его скопированной частью Javascript.

Теперь ваша страница должна работать правильно.

Совет: Не используйте Ctrl + Aв Codepen для выбора всего, так как он выделяет несколько дополнительных слов.

https://stackoverflow.com/questions/59947919/how-can-one-use-vue-js-code-from-codepen/59948580#comment106017206_59948580
Спасибо мужик, ты сделал мой день!!
https://stackoverflow.com/questions/59947919/how-can-one-use-vue-js-code-from-codepen/59948580#comment106017486_59948580
В чем была твоя ошибка?
Закрыть X