如何使用 Codepen 中的 Vue.js 代码？答案

【问题标题】：How can one use Vue.js code from Codepen?如何使用 Codepen 中的 Vue.js 代码？
【发布时间】：2020-05-13 19:39:55
【问题描述】：

我想使用 Codepen 的 this 代码。所以，我右键单击result 框架并选择View Frame source。然后我将源代码复制并粘贴到我自己的文本编辑器中。

但我的网页将代码部分显示为空白。

我从<style> 到</body> 复制了源代码并插入到我的组件中。当使用 ZIP 代替时，我不知道如何使用代码，因为我只有一个组件，而 ZIP 包含一个 script.js 和一个 style.css

我做错了什么？

【问题讨论】：

也许先看看 installation and setup 的 vuejs 指南。
@palaѕн 我已经设置了 Vue 并创建了不同的组件，但我认为我在 Vue 中“复制粘贴”的方法是错误的
如果您只想让 1 个页面启动一个新的 HTML 框架并将 html-part 插入其中，那么您将 css 部分复制并粘贴到 <style> 并将 javascript 部分复制并粘贴到 <script> 中。那么你只需要在html标签中更改vue的CDN
@J.Dario 谢谢Dario，但是你在html标签中改变vue的CDN是什么意思？我试过import {src} from "vinyl-fs"; src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
codeshare.io/5MMgEO

标签： javascript vue.js components copy-paste codepen

【解决方案1】：

好的，这里是傻瓜的复制和粘贴：这是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-part 的内容填充它。

2) 在开发时将<script src="vue.js"></script> 中的“vue.js”替换为“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 部分填充它。

现在您的页面应该可以正常运行了。

提示：不要在 Codepen 中使用 Ctrl + A 来选择所有内容，因为它会选择一些额外的单词。

【讨论】：

你的错误是什么？