Element UI

最新推荐文章于 2024-08-17 21:49:23 发布

怪×咖

最新推荐文章于 2024-08-17 21:49:23 发布

阅读量120

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44674424/article/details/128750867

版权

前端专栏收录该内容

10 篇文章

订阅专栏

文章介绍了如何引入和使用Element，一个全球最受欢迎的VueUI框架。首先通过CDN引入Vue和Element库，然后在本地项目中通过npm安装Element并全量导入。接着展示了如何创建一个新的组件，例如el-switch，并绑定数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element

导入使用

Element - The world's most popular Vue UI framework

<!-- Vue -->
<script src="<https://cdn.jsdelivr.net/npm/vue/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>

组件化开发使用

npm安装：npm i element-ui -S

全部导入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

如何使用？

只需要新创建一个组件，从官网上复制即可：

<template>
    <el-switch
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
</template>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>