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

oflyhigh

Published: 11 Dec 2022 › Updated: 11 Dec 2022 将学习进行到底：Vue3以及Element-Plus

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

好多年前，我记得我的一张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>