如何使用 Codepen 中的 Vue.js 代码？
[英]How can one use Vue.js code from Codepen?
问题描述
I want to use this code from Codepen.
我想使用 Codepen 中的此代码。 So, I right clicked on the result frame and chose View Frame source .因此，我右键单击result框架并选择View Frame source 。 Then I copied the source code and pasted it in my own text-editor.然后我复制了源代码并将其粘贴到我自己的文本编辑器中。
But my webpage shows the codepart as blank.但是我的网页将代码部分显示为空白。
I copied the source starting from <style> till </body> and inserted in my component.我复制了从<style>到</body>的源代码并插入到我的组件中。 When using the ZIP instead, I don't know how to use the code, because I just have a component and the ZIP contains a script.js and a style.css当使用 ZIP 时，我不知道如何使用代码，因为我只有一个组件，而 ZIP 包含一个 script.js 和一个 style.css
What am I doing wrong?我究竟做错了什么？
1 个解决方案
解决方案1
1 已采纳 2020-01-28 12:15:35
Ok here's copy-and-pasting for dummies: This is the html part:好的，这里是傻瓜的复制和粘贴：这是 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>
This is the "head":这是“头”：
<head>
<meta charset="utf-8">
<title>Dayparting</title>
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
1) Remove <link rel="stylesheet" href="style.css"> and add <style></style> in the same place. 1) 删除<link rel="stylesheet" href="style.css">并在同一位置添加<style></style> 。 Fill it with the content of the css-part.用 css-part 的内容填充它。
2) Replace "vue.js" in <script src="vue.js"></script> with " https://cdn.jsdelivr.net/npm/vue/dist/vue.js " when you're in development or with " https://cdn.jsdelivr.net/npm/vue@2.6.11 " for production. 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 ”进行生产。
Then go to the bottom of your html-code and find <script src="main.js"></script> .然后转到 html 代码的底部并找到<script src="main.js"></script> 。 Remove it and add an empty <script></script> instead.删除它并添加一个空的<script></script>代替。 Fill it with the copied Javascript part.用复制的 Javascript 部分填充它。
Now your page should run properly.现在您的页面应该可以正常运行。
Tip: Do not use Ctrl + A in Codepen to select everything since it selects a few extra words then.提示：不要在 Codepen 中使用Ctrl + A选择所有内容，因为它会选择一些额外的单词。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.