在本文中，我们将使用Vue.js版（进步的JavaScript框架）在浏览器中构建交互式看板。这个项目的完整源代码可以在GitHub上找到。在我的上一篇文章中，我向您展示了如何为Docker构建一个工作仪表板。这个仪表板将显示当前正在运行的容器，允许您启动和停止它们，物联网系统，并创建新的容器。这个应用程序非常基本，但是它的目的是锻炼你的React、TypeScript和插座.IO. 它不仅仅是另一个React教程；它演示了如何使用您正在尝试学习的技术来构建一些有用的东西。我想用另一个看板来构建另一个有用的看板！这次，我们要用Vue.js版，另一个与React类似的JavaScript库，使您能够在浏览器中构建交互式应用程序。因此，在这篇由两部分组成的系列文章的第一篇文章中，物联网开发，我们构建了这个应用程序，它不会像Docker Dashboard那样复杂，但它或多或少会比较完整。在第二部分中，我们将使用一些现代技术来逐步增强应用程序并使其真正成为自己的应用程序。不用多说了，我们开始吧！"看看创建带有拖放支持的看板板是多么容易。"在推特上留言先决条件本文需要遵循的唯一先决条件是NodeJS的最新版本。我使用的是10.9.0版。有关Node版本的主要驱动程序是vue cli；它说您可以使用Node 4.0及更高版本中的任何内容，大数据包括，但最好使用6.0及更高版本。设置Vue.js版应用要开始使用该应用程序，我们将使用Vue CLI 2。这将为我们生成我们的基础应用程序，包括设置我们所需的一切网页包。对于本教程，我们不需要进入网页包配置，或真正与网页包互动，默认配置对我们来说都很好。首先，让我们从命令行全局安装vue cli：$npm安装-g vue cli然后，让我们浏览到磁盘上的一个文件夹来创建项目。在硬盘上找到合适的位置并为项目创建新文件夹：#创建文件夹mkdir看板#进去吧cd看板我把我的看板板叫做看板，但你想叫什么都行。接下来，调用Vue.js版命令行界面。这个工具将引导我们通过一系列问题来建立我们的项目。我们可以将其中的大部分保留为默认值，但是让我们选择不为这个演示创建单元或E2E测试。另外，让我们选择AirBnb ESLint预设，但我们将修改一些规则。按如下方式调用命令：$vue初始化网页包请注意，我们使用的是Webpack模板，它设置了Webpack、热重新加载（允许我们在不刷新页面的情况下立即查看浏览器中的更改）、vue加载程序和其他一些小部件。输出如下：$vue初始化网页包? 项目名称auth0看板? 项目描述AVue.js版项目? 作家史蒂夫·霍布斯? Vue独立生成? 安装vue路由器？是的? 使用ESLint来lint您的代码？是的? 选择ESLint预设Airbnb? 设置单元测试编号? 用夜视设置e2e测试？不vue cli·生成的"auth0看板"。要开始：npm安装npm运行开发接下来，运行$npm install来安装所需的节点包。然后$npm运行dev来运行项目并确保我们有一个良好的基线。现在，浏览到：8080-一切顺利，您应该看到一个样板"欢迎来到您的Vue.js版应用程序页面。由于我们所做的任何更改都将自动重新编译并发送到浏览器，因此此时您可以让应用程序继续运行。消除默认值Vue.js版应用现在我们已经有了一个模板应用程序并在运行，我们要做的第一件事就是去掉我们不需要的东西。大多数情况下，我们将更改src文件夹中的组件文件，可能对索引.html根目录中的文件。首先，删除src/components/地狱世界.vue文件，云的服务器，因为我们根本不会用它。下一步，因为我们已经删除了该组件文件，所以我们需要修改Vue路由器，让它停止查找该组件。那么，让我们打开src/router/索引.js并删除对组件的引用。最后，我们的文件将如下所示（我们还将暂时将路由重命名为"Default"）：从'Vue'导入Vue；从'vue Router'导入路由器；Vue.使用路由器（路由器）；导出默认新路由器({路线：[{路径：'/'，name:'默认'，},],});最后，在src/应用程序vue，让我们将文件修改为如下所示（我们将去掉对徽标和默认样式的引用）：

导出默认值{name:'应用'，};我们稍后会回来，再加上一些铬，让它看起来好看一点。现在，如果我们在浏览器中查看我们的应用程序，我们应该只看到一个空白页。很好，我们马上就要开始填充UI了。现在，我们有了一个良好的基础，可以开始创建看板。设计Vue.js版用看板图让我们把我们的标题和基础的风格。对于这个应用程序，我们将通过一个智能Bootswatch主题使用bootstrapv4。从那里，我们将选择超级英雄的主题，但也有一些其他不错的选择。要将它插入我们的应用程序，让我们包含从BootstrapCDN到所选主题的链接，并将其放入索引.html文件。稍后，我们还想从FontAwesome抓取一些精美的图标。幸运的是，MaxCDN还提供了对这个图标库的访问，所以让我们也获得这个链接。最后，我们索引.html文件看起来像下面的代码片段。注意标记顶部的两个样式表链接以及app元素周围的额外容器div：在在在在注意：您需要在浏览器中刷新页面才能看到这些更改，因为Webpack不会自动获取这些更改。为了完成头球，让我们进入应用程序vue再加上一些文字，这样我们就可以在屏幕上看到一些东西。让我们在顶部添加一些内容，这样我们的用户就知道这个应用程序是什么了，并对其进行了一些样式调整。在那之后应用程序vue内容如下：

看板