Categories: Element-React 教程

Element-React 快速上手

安装

推荐使用 npm 的方式安装,它能更好地和webpack打包工具配合使用。

npm i element-react --save

yarn 安装:

$ yarn add element-plus

主题

开始前, 你还需要一个主题包, 这里我们推荐使用element-theme-default.

npm install element-theme-default --save

使用

import React from react;
import ReactDOM from react-dom;
import { Button } from element-react;


import element-theme-default;


ReactDOM.render(<Button type="primary">Hello</Button>, document.getElementById(app));

浏览器直接引入

通过 CDN 的方式全量引入 ElementPlus,根据不同的 CDN 提供商有不同的引入方式,我们在这里以 unpkg 和jsdelivr 举例, 你也可以使用其它的 CDN 供应商

使用 unpkg
<head> <!-- 引入样式 --> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" rel="external nofollow" target="_blank" /> <!-- 引入 Vue --> <script src="//unpkg.com/vue@next" rel="external nofollow" ></script> <!-- 引入组件库 --> <script src="//unpkg.com/element-plus" rel="external nofollow" ></script> </head>
使用 jsDelivr
<head> <!-- 引入样式 --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" rel="external nofollow" target="_blank" /> <!-- 引入 Vue --> <script src="//cdn.jsdelivr.net/npm/vue@next" rel="external nofollow" ></script> <!-- 引入组件库 --> <script src="//cdn.jsdelivr.net/npm/element-plus" rel="external nofollow" ></script> </head>

andy

前端小白,在Web176教程网这个平台跟大家一起学习,加油!

Share
Published by
andy

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

1 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago