- 引用在线链接
vue官网：https://cn.vuejs.org/v2/guide/installation.html
element-ui官网：https://element.eleme.io/#/zh-CN/component/installation
<!-- vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入样式 -->
<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>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入element-ui CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" v-cloak>
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
<style>
/** vue需要在引入element-ui之前引入 **/
[v-cloak] {
display: none;
}
</style>
</body>
<!-- vue需要在引入element-ui之前引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入element-ui js -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
2.下载资源本地引入（打开复制粘贴到本地）
vue.js：https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
element.js：https://unpkg.com/element-ui/lib/index.js
element.css：https://unpkg.com/element-ui/lib/theme-chalk/index.css
element.css文件链接的icon文件(放到css文件夹下的fonts文件夹下)：
https://unpkg.com/browse/element-ui@2.15.9/lib/theme-chalk/fonts/element-icons.ttf
https://unpkg.com/browse/element-ui@2.15.9/lib/theme-chalk/fonts/element-icons.woff
image.png
index.vue
