Element的安装以及基本使用

Element是基于Vue的网站组件库,用于快捷构建网页

像上面这样的样式

官网地址

Element - 网站快速成型工具

安装

npm i element-ui -S

装包命令

npm install babel-plugin-component -D

安装好之后会在package.json里面显示版本

在node_modules中会自动初始化一个 element-ui文件夹 ,所有安装的源文件都在这里

引入

然后在官网复制一些样式,运行一下

javascript 复制代码
<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>

App.vue

javascript 复制代码
<template>
  <div id="app">
    <h3>Chemo</h3>
    <hr />
    <router-view />

    <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>

报错

如果出现这个错误

在babel.config.js里面修改代码(直接复制就OK)

javascript 复制代码
module.exports = {

  presets: [

    '@vue/cli-plugin-babel/preset',

    ["@babel/preset-env", { "modules": false }]

  ],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

运行

然后重新运行就好了

相关推荐
sen_shan几秒前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
疾风铸境12 分钟前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
晓风伴月16 分钟前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
最新资讯动态19 分钟前
使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计
前端
爱泡脚的鸡腿34 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ1 小时前
前端处理pdf文件流,展示pdf
前端·pdf
智践行1 小时前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态1 小时前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb661 小时前
框架修改思路
前端·javascript·vue.js
qq_456001651 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux