在我长达10年的职业生涯中，我有机会与许多好的UI库合作。 Vuejs不是其中之一。这就是为什么我最近决定学习它的原因，这篇文章是我学习中一系列笔记的第一部分。其中一些信息可能是基本的，但它是针对首次从Vuejs开始的人。所有这些都是基于Vuejs版本3。
什么是vuejs？
vuejs是用于构建反应前端应用的JavaScript框架。作为一个框架意味着它带有一组实用程序功能和准则。这些帮助开发人员更快地构建了应用程序，并且指南可以帮助新团队成员更快地进入项目。反应性意味着它有助于构建对用户输入动态输入的UIS。通过前端应用程序，这意味着我们正在构建用户看到并与之交互的应用程序的一部分。
为什么不是Vuejs而不是香草JavaScript？
在香草JavaScript中构建应用程序非常好，您可以构建复杂的应用程序。但是这样，它可能太慢了，并且增加了错误和性能问题的机会。使用VueJS之类的框架时，您可以从开箱即用。如果您没有使用任何框架，则需要自行构建的功能等功能。这些功能由许多开发人员使用IT报告的许多开发人员进行了测试，并且核心维护者对其进行了更新。
您可以在页面的某些部分中使用Vuejs吗？
与其他一些框架不同，可以在页面的一部分中用作小部件或整个页面的一部分。没有正确的方法，使用哪种方法取决于您的要求
备择方案
您也可以使用一些替代方案。一些更受欢迎的是角度和反应。两者都是完全不错的选择，但每个选择都带有其好处和约束。例如，Angular几乎只能与打字稿一起使用。
构建第一个应用程序
有多种方法可以开始编写第一个Vuejs应用程序。其中之一是在构建时间内使用CLI来生成项目并确定所有选项，例如使用Typescript，JSX和其他选项。如果您不想要任何一个，最简单的版本只是使用CDN。
用CDN构建第一个应用程序
1.设置文件夹结构
您首先需要创建可能用于项目的文件。因此，让我们从两个文件开始，index.html和script.js。
2.添加一些基本的HTML内容
要开始，我们可以通过添加下一个只需从CDN加载vuejs的HTML内容来添加。
<!doctype html>
<html>
<head></head>
<body>
<div id="app" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="/script.js"></script>
</body>
</html>
3.将应用程序初始化添加到脚本。
用于创建VUEJS应用程序，您可以使用以下代码。
Vue.createApp({
data() {
return {}
}
}).mount("#app")
CreateApp函数初始化VueJS应用程序，并将初始化对象作为参数接收。之后，您可能会注意到有座上的函数。这就是您决定将应用程序注入HTML并将应用程序容器的选择器传递给其。
4.将数据添加到应用程序
如果要在应用程序中添加一些数据，则可以更新上面的代码，以便将其添加到初始化对象中的数据函数的返回对象。
Vue.createApp({
data() {
return {
message: "Hello world"
}
}
}).mount("#app")
5.在HTML中显示数据
要在HTML中显示数据，您只需使用属性名称，然后将其包装在两个卷曲的擦手中。您确实需要确保在加载Vuejs应用程序的容器中添加内容。
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>{{message}}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="/script.js"></script>
</body>
</html>
6.下一步
您还可以将更多功能添加到VueJS应用程序中，但这只是一个小简介。还有更多我将在下一篇文章中介绍，或者您只需检查Vuejs官方文档。
本文中使用的代码可以在我的GitHub repository中找到。