Vue项目添加ElementUI

前端开发

3844

Vue项目添加ElementUI

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

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

Vue项目添加ElementUI )

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


npm i element-ui -S

Vue项目添加ElementUI

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


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

Vue项目添加ElementUI )

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

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


<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary"\>主要按钮</el-button>
      <el-button type="success"\>成功按钮</el-button>
      <el-button type="info"\>信息按钮</el-button>
      <el-button type="warning"\>警告按钮</el-button>
      <el-button type="danger"\>危险按钮</el-button>
    </el-row>
  </div>
</template>

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

Vue项目添加ElementUI )

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


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

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

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

隔壁村子口麦萝卜的

不要想，去感受。

发布数

关注者

5699

累计阅读

Vue项目添加ElementUI 4年前

热门教程文档