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"

      }

    ]

  ]

}

运行

然后重新运行就好了

相关推荐
吃饭睡觉打豆豆嘛19 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端19 小时前
claude code 原理分析
前端
GalaxyMeteor19 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man19 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮19 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高00719 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon19 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible19 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua20 小时前
setup函数相关【3】
前端·javascript·vue.js
neon120420 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画