如何构建你的第一个 Vue.js 组件_光环大数据培训.pdfVIP

光环大数据--大数据培训人工智能培训 如何构建你的第一个 Vue.js 组件_光环大数据培训 记得当那天使用 CakePHP 开发的时候，我很喜欢它简易入门的特性。其文 档不仅结构严密，详尽，而且对用户友好。多年以后，我在 Vue.js 上找到了同 样的感觉。然而，与 Cake 相比，Vue 文档还有一个缺点：（缺乏）真实 ... Java HTML Hadoop 框架 JavaScript 记得当那天使用 CakePHP 开发的时候，我很喜欢它简易入门的特性。其文 档不仅结构严密，详尽，而且对用户友好。多年以后，我在 Vue.js 上找到了同 样的感觉。然而，与 Cake 相比，Vue 文档还有一个缺点：（缺乏）真实的项目 教程。 不管框架的文档有多好，对与所有人来说都是不够的。阅读有关的概念并不 是总能帮助你了解更多东西，也不能帮助你理解如何使用它们来实际做出某些事 情。如果你和我一样，你会在实践过程中学到更多，在你编码的时候参考文档， 因为你需要它们。在本教程中，我们将构建一个星级评分系统组件。我们将在需 要时介绍几个 Vue.js 概念，并介绍为什么要使用它们。 TL;DR: 这篇文章详细的介绍了如何使用 vue.js 和为什么使用 vue.js 。 它旨在帮助掌握 Vue.js 的一些核心概念，并教你如何为未来的项目做出设计决 策。如果你想了解整个思维过程，请继续阅读。否则，你可以直接查看 CodeSandbox 上的最终代码。 入门指南 Vue.js （正确地）以一个简单的脚本引入足以开始运行，但是当 你想使用single-file components，情况会有所不同。 现在，你不必这样构建 组件。 你可以很容易地用 Vponent 定义一个全局组件。 问题在于，这样做需要权衡使用字符串模板，没有 CSS 支持，也没有构建 步骤（所以没有预处理器）。 然而，我们想要更深入地学习如何构建一个真正的 在项目中使用的实际组件。出于这些原因，我们将使用由 Webpack 提供支持的 实际设置。 光环大数据 光环大数据--大数据培训人工智能培训 为了保持简单并减少配置时间，我们将使用 vue-cli 和简单的 webpack-simple Vue.js 模板。 首先，你需要全局安装 vue-cli。启动你的终端并键入以下内容： 你现在可以通过几个按键生成随时可用的 Vue.js 样板。然后继续输入： 你会碰到几个问题。 选择除“使用sass”之外的所有默认值，你应该回答 yes(y)。然后，vue-cli 将初始化项目并创建 package.json 文件。完成后，可 以导航到项目目录，安装依赖关系，然后运行项目： 就这么简单！Webpack 将开始在端口 8080 （如果可用）上为你的项目提供 服务并在浏览器中启动它。如果一切顺利，你应该看到这样的欢迎页面。 我们做到了吗？可以说我们做到了！为了正确调试你的Vue.js 组件，你需 要正确的工具。 继续并安装 Vue.js devtools 浏览器扩展 (Firefox/Chrome/Safari)。 你的第一个组件Vue.js较好的功能之一是single-file components（SFC）。 它们允许您在一个文件中定义组件的结构，样式和行为，而不存在混合 HTML， CSS 和JavaScript 的常见缺陷。 SFC 以.vue 扩展名结尾，并具有以下结构： 让我们开始创建我们的第一个组件：在/src/components 中创建一个 Rating.vue 文件，然后复制/粘贴上面的代码片段。然后，打开/src/main.js 并 光环大数据 光环大数据--大数据培训人工智能培训 调整现有的代码： 最后，添加一些HTML 代码到你的Rating.vue 文件： 现在看看你的浏览器中的页面，你应该看到列表。Vue.js 会将您的Rating 组件附加到 index.html 中的#app 元素。如果检查HTML，