我们知道我们的Shopify App开发者社区有很多JavaScript粉丝，我们也是其中一些框架的忠实粉丝。这样的反应。
随着JavaScript社区的不断构建和创新，感觉任何。JS都是存在的。然而，在众多新框架中，Vue.JS是社区中最受关注的框架之一。事实上，它不仅是一个广受欢迎的开源项目，也是GitHub上第二受欢迎的JavaScript框架。
为了帮助你提升你的技能并理解这个框架是什么，我们最近与L4 Digital的高级软件工程师Cassidy Williams合作，向你展示Vue.js的来由，以及如何使用它快速构建web应用程序的前端体验。
在我们重新回顾Cassidy开始使用Vue.js的步骤之前，这里有一些背景知识，说明为什么要创建Vue.js，以及它与其OB欧宝娱乐APP他流行框架(如Angular和React)有何不同。
Vue.js框架的起源
Vue.js于2014年2月在GitHub上公开发布，由前谷歌开发人员Evan You带来了生命。长期以来，他一直被JavaScript所吸引，因为它提供了一种简单的方式来构建和即时共享内容。在被Google聘用后，他将大量时间花在了浏览器内原型设计上。他的团队致力于构建快速安装，但仍然有形的东西。为此，他们有时使用的框架是角。
虽然Angular帮助加快了速度，提供了数据绑定来处理DOM，而不必直接接触它，但仍然有一些额外的概念要求代码以某种方式结构化。为了进一步简化编码过程并帮助开发人员更快地工作，Evan致力于构建具有这些效率，但更轻量级的东西。
你可能还喜欢:Shopify应用程序开发的基本资源列表。
开始使用Vue.OB欧宝娱乐APPjs
Vue.js被设计得平易近人，因此任何具有HTML、JavaScript和CSS基础知识的人都可以轻松地开始使用这个框架。OB欧宝娱乐APP也有许多伟大的新手模板你可以从。OB欧宝娱乐APP
选择要在其上构建的API之后，访问Vue.js库，打开你的主机，开始编码!你将从全局安装NPM开始，然后加载CLI:
NPM I - gvue -cli然后，初始化Vue以启动一个新项目，并选择一个启OB欧宝娱乐APP动项目。在这个演示中webpack是使用。
初始化webpack项目初始化后，您将填写所有细节，例如名称、项目描述和作者。您还可以选择Vue构建。在Cassidy的教程中，使用了默认构建。
您还将安装路由器并指定是否要运行测试——我们选择了没有。
指定了这些基础知识之后，您将使用npm安装来安装Vue指定的所有需要的库。完成后，您将使用NPM运行dev启动开OB欧宝娱乐APP发服务器。瞧，你现在有了一个基本的web应用UI!
现在我们有了一个实时应用程序，是时候深入了解并自定义它了。
你可能还喜欢:[免费网络研讨会]如何建立你的第一个Shopify应用程序。
定制应用UI
与大多数web应用程序一样，这里有一个index.html。在所有这些代码中，整个应用程序都包含在这一小行代码中< div id = "应用" > / div >。事实上，如果你想在一个更大的web应用中创建一个独立的vue应用，你可以在这个app div中这样做。
如果您还想查看Vue提供给您的所有库，您可以在package.json。
现在到main.js也就是主JavaScript。这里，它导入了Vue、应用和路由器。还指定了路由器使用应用模板并导入应用组件。这是构成应用程序骨干的内容。
现在在app组件中app.vue-可以查看结构和样式。请注意,app.vue是一个Vue.js文件，一个Vue文件总是包含:
- 一个模板
- 一个脚本
- 一个样式
在Vue中，给定的样式默认为全局应用，但如果您希望它特定于组件本身，则需要添加作用域与<时尚>。
在HelloWorld.vue组件，你可以在这里做一些修改，这些修改将出现在应用的用户界面中。例如，要更改h1组件，您需要更新味精。
现在你已经有了基本的设置，你可以通过添加一个新的路由来使应用程序更健壮。
使用路由器创建新路由
在路由器中，你将添加一个新组件index.js。按照Cassidy的教程，你可以使你的应用程序双语，并创建一个西班牙语版本的Hello World组件，我们将其命名为Hola Mundo组件。它的设置将类似于webpack中的HelloWorld代码，除了你要指定一个唯一的路径、名称和组件名称:
在建立这个新组件之后，您可以复制并粘贴现有的代码HelloWorld和更新:
< div class = '你好' >名称:HolaMundo短信:“Bienveindos a Vue!”
然后，确保将这个新组件导入到路由器中:
从“@/component/ Holamundo”中导入Holamundo初始化后，将在web应用程序中创建一个新页面。
现在您有了两个页面，您可能希望它们相互链接。在React路由器中，你必须添加一个link组件，而在vue中，你可以使用一个简单的一个组件。
在HolaMundo组件中，您将添加:
在HelloWorld组件中，你要添加:
当你刷新应用程序时，两个页面将相互链接!既然我们现在已经完成了基本设置，那么让我们开始构建一个更复杂的组件。
添加计数功能组件
为了向您展示设置交互式组件是多么简单，Cassidy向我们介绍了如何构建一个带有按钮的交互式计数器，该按钮在被单击时添加计数。上面的一些步骤同样适用，但这一次你将在UI上显示一个按钮，编程对一个动作的响应，并确保动作在应用程序中正确显示。
首先，你可以制作按钮。在HelloWorld组件中，添加:
<按钮> < / >按钮现在添加一个新的data属性，数:0使计数器从0开始。OB欧宝娱乐APP现在回到你的按钮，并添加所需的响应被点击，以及一个指令:
要在应用的UI中显示计数器，你需要添加:
< div >[{数}]< / div >就像这样，你的应用程序有一个计数器!
增加用户搜索功能
Cassidy为本教程创建的示例应用程序是基于搜索不同的GitHub用户。既然您已经了解了设置视图应用程序和添加组件的基础知识，那么您就为构建这个用户搜索功能打下了良好的基础。
首先，创建一个新组件:
e:“src /组件/ GitHub.vue”保存它之后，它将与HelloWorld和HolaMundo一起出现在组件下。与前面一样，从现有组件复制并粘贴代码，并更新组件名称和消息。
既然组件已经建立，那么首先要做的就是创建一个带有input元素的表单:
然后，你要把它导入到路由器中，让它在应用UI中可见。现在它是可见的，需要使它具有功能。由于要创建一个搜索表单，因此需要创建一个查询函数。
在Vue中，当您希望将某些方法附加到函数时，只需添加方法:。
在本例中，方法将是:
现在可以检索数据了，接下来需要对其进行使用和解析。在数据中，有一个结果对象，并让它在null开始:OB欧宝娱乐APP
结果:零
要在UI上打印结果，并按名称、用户简介和位置进行组织，您将编写以下几行代码:
让我们变得更有趣。显示与搜索结果相关联的图像:
最后但并非最不重要的是，您可以通过在App.vue文件中找到并删除webpack模板提供给您的Vue徽标来删除它。在这个文件中，您还可以添加图像边距和大小，以格式化与GitHub搜索结果一起显示的图像。
这就是一个搜索GitHub的web应用程序，不到30分钟就完成了!
从打开你的控制台到Hello World，在一瞬间!
当谈到Vue.JS时，简单和速度是游戏的名称。正如我们最近的客座网络研讨会主持人Cassidy Williams所展示的那样，即使它不是你的首选框架，Vue.JS也非常适合原型制作过程，当你需要在后端之上快速创建一个实时运行的web应用程序前端时。
觉得这个网络研讨会有帮助吗?报名在宣布新的网络研讨会时收到通知，并继续提高您的设计和应用程序构建技能。
