Vue3.0之引入Element-plus ui样式的两种方法

目录

• 第一种：CDN
• 第二种：通过 npm 安装，并希望配合 webpack 使用

安装：官网
欢迎star：github

npm install element-plus --save

第一种：CDN

目前可以通过 unpkg.com/element-plus 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

< link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/theme-chalk/index.css”>

< script src=“https://unpkg.com/element-plus/lib/index.full.js”>

helloword

  
    
    
    
    
    
    
    
    
  
  
    

      {{ message }}
    
    
  

第二种：通过 npm 安装，并希望配合 webpack 使用

• [email protected]：新版的 vue-cli 准备了相应的 Element Plus 插件，你可以用它们快速地搭建一个基于 Element Plus 的项目。
• 引入整个 Element Plus，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

main.js 中写入以下内容：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

以上代码便完成了 Element Plus 的引入。需要注意的是，样式文件需要单独引入。

之后就可以进行样式的按需引入使用了

 到此这篇关于Vue3.0之引入Element-plus ui样式的两种方法的文章就介绍到这了,更多相关Vue3.0引入Element-plus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！