构建你的第一个构建你的第一个Vue.js组件组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易。这些文档不仅结构合理,详尽无遗,而且用户友好。多年
以后,这正是我在Vue.js中感受到的。然而,与Cake相比,Vue文档仍然缺少一件事:一个真实的项目教程。
无论框架的文档记录如何,这对每个人来说都是不够的。阅读概念并不总是有助于了解大局或了解如何使用它们来实际制作某
些东西。如果您像我一样,通过制作一些可用的组件来更好地学习,并在编码时参考文档,帮助记忆文档和熟练使用Vue。
在本教程中,我们将构建星级评分系统组件。我们将学习几种Vue.js中的概念,我们会在项目中使用到他们,并将讨论为什么
我们使用它们。
这篇文章深入介绍了如何以及为何。它旨在帮助您掌握Vue.js的一些核心概念,并教您如何为未来的项目做出设计决策。如果
您想了解整个思考过程,请继续阅读。否则,您可以查看CodeSandbox上的最终代码。
入门
Vue.js,当然你会以自己作为一个简单的脚本运行而觉得已经不错了,但是当你想使用单文件组件时情况有点不同。当然,你
不一定必须构建以组件的这种方式。您可以完美地使用定义全局组件Vue.component。问题是,这需要权衡,例如必须使用字
符串模板,没有范围的CSS支持,也没有构建步骤(因此,没有预处理器)。然而,我们希望更深入地学习如何构建一个可
以在实际项目中使用的实际组件。出于这些原因,我们将采用由Webpack提供支持的实际设置。
为了简化操作并缩短配置时间,我们将使用vue-cli和webpack-simple Vue.js模板。
首先,您需要在全局安装vue-cli。启动终端并键入以下内容:
npm install -g vue-cli
您需要继续输入:
vue init webpack-simple path/to/my-project
你会在这个过程中被问到几个问题。选择除“使用sass”以外的所有内容,都是为默认值。然后,vue-cli将初始化项目并创建
package.json文件。完成后,您可以导航到项目的目录,安装依赖项并运行项目:
cd path/to/my-project
npm install
npm run dev
不出意外!Webpack将开始在端口上提供项目8080(如果可用,8080端口没有被其他程序占用)并在浏览器中触发它。如果
一切顺利,你应该看到像这样的欢迎页面。