vue.js的Element-UI的使用_javascript 使用 element -ui-CSDN博客

本文链接：https://blog.csdn.net/ACBYCL/article/details/125471005

本文介绍了如何在Vue.js项目中引入ElementUI组件库，包括全局引入和按需引入的方式，并提供了配置步骤及代码示例。全局引入时，通过在main.js中注册ElementUI，然后在App.vue中使用组件。按需引入时，借助babel-plugin-component，只导入所需的Button和Row组件，减少项目体积。

摘要由CSDN通过智能技术生成

注意：本人用的脚手架是vue.js

1 常见的UI组件库

常见的移动端UI组件库

1.vant
2.Cube UI
3.Mint UI

PC端常用的UI组件库

1.Element UI
2.IView UI

2 全部引用安装

进入cmd窗口

npm i element-ui -s

01 在main.js中

import Vue from 'vue'
import App from './App.vue'
// 全局引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
new Vue({
    el:"#app",
    render: h => h(App),
})

02 在App.vue里使用
在官方网站复制代码到App里
在这里插入图片描述

<template>
  <div class="container">
    <button>原生的按钮</button>
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

03 最后加载效果
在这里插入图片描述

3 这里是按需引用

npm install babel-plugin-component -D

01 在main.js中


import Vue from 'vue'
import App from './App.vue'
// 全局引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';

//部分引入
import { Button, Row } from 'element-ui';
Vue.config.productionTip = false

Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
// Vue.use(ElementUI);
new Vue({
    el:"#app",
    render: h => h(App),
})

02 配置 babel.confiig.js文件
在这里插入图片描述
在里面输入


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

03 在main.js里导入

import Vue from 'vue'
import App from './App.vue'
//部分引入
import { Button, Row } from 'element-ui';
Vue.config.productionTip = false

Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
new Vue({
    el:"#app",
    render: h => h(App),
})

04 在App.vue里使用

<template>
  <div class="container">
    <button>原生的按钮</button>
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>