使用CDN方式引入Vue和Element plus

最新推荐文章于 2024-04-26 16:47:03 发布

haohulala

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量3k

点赞数 1

分类专栏：前端学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/haohulala/article/details/130946668

版权

前端学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在学习Vue和Element plus整合使用的时候打算先写一个使用cdn方式引入的入门级案例，没想到遇到了一个坑，在网上查了资料也没有解决问题，最后发现是引入cdn的顺序错了。

整合vue和Element plus的时候我们需要引入三个cdn，这三个cdn的引入是需要严格按照顺序的，具体的写法如下

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
    <!-- 引入vue3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入element plus -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js"></script>

也就是先引入样式，然后引入Vue，最后引入Element plus。

完整的代码如下，这也是一个入门级的例程

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
    <!-- 引入vue3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入element plus -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js"></script>
    
    
    <title>hello world</title>
  </head>
  <body>
    <div id="app">
        <h1>{{title}}</h1>
        <el-button type="primary" @click="handleClick">点我</el-button>
        <p>记数{{count}}</p>
    </div>
    
    <script type="text/javascript">
        const App = {
            data() {
                return {
                    title: 'Hello Vue',
                    count: 0
                }
            },
            methods: {
                handleClick() {
                    this.count++;
                }
            },
        }
        Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>    

  </body>
</html>

我一开始以为前端非常简单，没想到学习起来比后端的坑还多。

haohulala

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用CDN方式引入Vue和Element plus

在学习Vue和Element plus整合使用的时候打算先写一个使用cdn方式引入的入门级案例，没想到遇到了一个坑，在网上查了资料也没有解决问题，最后发现是引入cdn的顺序错了。整合vue和Element plus的时候我们需要引入三个cdn，这三个cdn的引入是需要严格按照顺序的，具体的写法如下。也就是先引入样式，然后引入Vue，最后引入Element plus。我一开始以为前端非常简单，没想到学习起来比后端的坑还多。完整的代码如下，这也是一个入门级的例程。
复制链接

扫一扫