好多年前，我记得我的一张CD中有首我很喜欢歌曲《将爱情进行到底》，谢雨欣演唱的，里边一段歌词如下：

将爱情进行到底
并不像说的那么容易
难免都会有刮风下雨

(图源：pixabay)

其实，将学习进行到底，也不像说的那么容易呢，难免会碰到BUG。

比如经过这两天的学习和不断地犯错，我才知道了 Vue2和Vue3是有区别的，而且区别还很大。还有就是我试了很久Element UI，才搞明白如下关系：

Element-UI适用于Vue2

Element-Plus适用于Vue3

虽然看起来简简单单的两句话，这可是我通宵达旦各种踩坑之后的血泪教训。好了，踩坑这种丢人的事情就不多说啦，还是好好记录一下，如何使用Vue3+Element-Plus吧。

和以往一样，我懒得（确切地说也不知道咋弄）安装各种东西，那么都用CDN方式好了。

为了使用Vue3+Element-Plus，我们需要在HTML的<head>以及</head>标签中插入如下代码：

    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>

还记得我们之前提到的Hello Vue!的例子嘛？不过，我们这次既然引入了UI组件，总得用上点东西才行啊。

那就加一个按钮吧，在<body>以及</body>标签中插入如下代码：

    <div id="app">
      <el-button @click="sayhello">点我</el-button>
    </div>

这在页面中插入一个显示为点我的按钮，如果被点击，将会触发sayhello方法。

然后我们插入对应的Script代码：

    <script>
      const App = {
         methods: {
            sayHello() {
                alert(`Hello World！`);
            }
         }
      }
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>

好了，来测试一下吧，在浏览器中打开网页，发现果然显示了点我按钮，好傻呀。

Reveal spoiler

既然它让我点，那我就不客气了，点了以后果然弹出如下对话框：

Reveal spoiler

好吧，这个测试内容以及整篇文章都很傻，不过对于初学者而言，谁又不是从傻傻的那一步过来呢？

如果之前能发现一篇这样“傻傻的”文章，那么我就不会通宵达旦地测试，且走了很多弯路的。

(图源：pixabay)

另外，还有个发现，https://hive.blog/ 中插入整段的代码，竟然能高亮显示了？都这么先进了嘛？看来大家都在进步，我学习的紧迫感，更加强烈啦！

将学习进行到底：Vue3以及Element-Plus

相关链接