Vue项目添加ElementUI

1. 在上一篇，搭建环境，创建vue项目目录结构如下：

编写工具，本人推荐：Visual Studio Code

2. 进入到项目文件夹，执行加载element-ui组件命令：

npm i element-ui -S

3. 在main.js代码里添加对element-ui的引用：

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

4. 在项目里使用element-ui控件

 components/HelloWorld.vue文件（注意：vue模板只能有一个根对象）

1<template>
2  <div>
3    <el-row>
4      <el-button>默认按钮</el-button>
5      <el-button type="primary"\>主要按钮</el-button>
6      <el-button type="success"\>成功按钮</el-button>
7      <el-button type="info"\>信息按钮</el-button>
8      <el-button type="warning"\>警告按钮</el-button>
9      <el-button type="danger"\>危险按钮</el-button>
10    </el-row>
11  </div>
12</template>

效果如下（main.js 默认的图片及文字我已去掉）：

至此，element-ui已经成功引入vue项目，vue组件的使用详细操作，请参考vue官方使用文档：

https://element.eleme.cn/#/zh-CN/component/installation

Vue系统文章会持续更新，欢迎大家继续关注！！！

本文转自 https://www.cnblogs.com/zmoneyz/p/12993006.html，如有侵权，请联系删除。