如何使用 Codepen 中的 Vue.js 代码？
Posted
技术标签:
【中文标题】如何使用 Codepen 中的 Vue.js 代码？【英文标题】：How can one use Vue.js code from Codepen? 【发布时间】：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
【参考方案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 来选择所有内容，因为它会选择一些额外的单词。
【讨论】：
你的错误是什么？以上是关于如何使用 Codepen 中的 Vue.js 代码？的主要内容，如果未能解决你的问题，请参考以下文章