1.npm安装

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

npm i element-ui -S

安装完可以在根目录下的package.json里找到deoendencies查看element的安装版本

2.CDN(在页面上引入 js 和 css 文件即可开始使用)

优势:可以直接获取到最新版本的资源
劣势:element升级时可能会遇到兼容性问题,推荐引入 Element 的用户在链接地址上锁定版本(我应该不会用它所以不写了,官网有)

<!-- 引入样式 -->
<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>

3.引入ElementUI

在安装完element之后无法直接使用,必须引入,分为完整引入和按需引入,因为我基本不用按需引入就不写了,官网的快速上手里有
完整引入
找到main.js文件,加入:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入(指 import ‘element-ui/lib/theme-chalk/index.css’ 这段代码)。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐