目录
一、Vue2 与 Element-ui 的搭配（第一种方式：细化方式）
二、Vue2 与 Element-ui 的搭配（第二种方式：极简方式）
三、Vue3 与 Element-plus 的搭配（可参考上述的方法，此处为极简方式。）
【注意】
1.Vue2 与 Element-ui（只支持vue2） 是固定搭配；
2.Vue3 与 Element-plus（只支持vue3）也是如此的固定搭配；
3.搭配混乱是不会生效的，比如Vue3 与Element-ui 搭配在一起，样式就没有效果！！！！！！！
这个是大部分问题产生的原因，Vue官网提供的是Vue3的版本，特别注意！
一、Vue2 与 Element-ui 的搭配（第一种方式：细化方式）
1.打开element-ui的官网 Element-ui ，再将两行标签的内容粘贴到HTML当中。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
【注意】<link>标签放到<head>里面，<script>标签放到<body>标签后面
2.就在element-ui的官网，下方一个演示代码里，找到vue2的引用标签
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>【注意！！！！】这行vue2的标签，一定要放到，引入组件库的那行<script>标签上面，否则不生效。
3.创建Vue实例
<script>
new Vue({
el: '#app',
})
</script>
4.在<body>当中，创建一个<div>，给他一个 “id=app”，app就是下面创建实例的‘#app’，可以随便修改。
5.引入组件库，测试一下。
成功！搞定。
二、Vue2 与 Element-ui 的搭配（第二种方式：极简方式）
1.找到这个示例代码
2.将其全部复制下来粘贴到html当中，覆盖掉之前所有内容，并且，删除红框的内容
3.引入自己的代码或者组件，就好了，与第一种方式的测试部分相同了。
成功！搞定。
三、Vue3 与 Element-plus 的搭配（可参考上述的方法，此处为极简方式。）
1.进入Element-plus的官网 Element Plus ，点击HTML按钮，会出现源码。
2.将源码粘贴到HTML，覆盖之前所有内容
3.
在1处的红框，即可自己去vue官网，使用官网链接，也可以使用实例当中自带的。
第2处红框，内容可以删除，根据自己需求制定。
在div当中引入组件，进行测试。
4.测试成功
成功！搞定。
1186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
