每天进步一点点：学习Vue.js的一小步
最近突发奇想，打算把cutehive.com的网站重新弄一下，之所以有这个想法，是因为我那个网站代码几乎全部手敲，维护起来太麻烦了。
(图源 ：pixabay)
在过去的几年里，许多建站技术、框架和建站工具都得到了广泛的应用，并被用于构建各种各样的网站。而我还停留在90年代的记事本（或者vi）手写代码的阶段，实在是Low爆了。
听说Vue.js 就是一个非常优秀开源的 JavaScript 框架，非常简单灵活，而且据说是国内的大神（E尤雨溪van You）创建的，我决定尝试学习一下。
首先，我找了一些vue教程来看，以及官方网站的Quick Start教程，可是看得我一头雾水，哎，算了，不如直接先实践一下。
想到以前学习各种语言，都先写一个Hello World代码，然后试着运行，通过这个来了解最基本的代码以及流程。
那么Vue版的Hello World应该是什么样子呢？我不想安装Vue，只想测试一下，所以通过CDN使用Vue暂时对我来讲是最好的选择。
我们可以在代码中插入如下script标签，来通过CDN使用Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
从Vue的网站上找到的最简单的Hello World例子(Hello Vue!)大概是这个样子：
可是这玩意该如何执行啊？研究了半天，发现似乎据说大概是，可以写一个html文件，然后把这部分代码插入进去，就可以执行啦。
比如说这样一个最简单index.html文件：
将上述代码，插入到<body>以及</body>之间，就可以啦，插完是这个样子：
试着在浏览器中执行一下，咦，怎么什么都不显示？哪里出错了？找来找去才发现，原来是我插入新代码后没有保存😓。
将上述代码保存，然后再次在浏览器中执行，总算可以看到Hello Vue!的输出啦：
突然想起半个世纪前，美国宇航员阿姆斯特朗登上月球时曾说过一句话：“这是我个人的一小步，却是人类迈出一大步”。我觉得成功执行Vue.js的Hello Vue!，看似非常非常简单的一步，但是却是我学习Vue.js以及重构cutehive.com的一大步。
当然，其实，运行起来这个例子也并非我上文中描述起来的这样简单。比如我起初找到的Vue代码，类似这个样子：
然而这例子却死活不工作，通过浏览器的调试功能，发现如下错误：
Uncaught ReferenceError: Vue is not defined
后来Google搜索到的解决方案是，把上述CDN代码换成：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
这让我知道了Vue不同版本之前使用起来还是有很大诧异的。后来又在一篇文章中找到如下解释：
Straight off the bat, the way we bootstrap a new Vue app has changed. Rather than using new Vue(), we now need to import the new createApp method.
另外，我想把html和js分离开来，比如说用index.html以及app.js，同样，我没能让它正确工作。
所以，虽然迈出了一小步，但是距离我掌握如何使用Vue.js以及成功重构cutehive.com网站，任重而道远啊。
我突然有些感慨，我为啥要折腾呢？出去找朋友们喝酒，或者躺床上刷会抖音看美女不香嘛？哎！
相关链接
Leave 每天进步一点点：学习Vue.js的一小步 to:
Best Posts From oflyhigh
We have not curated any of oflyhigh's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.