vue中怎么引入element以及使用的详细教程

引入element

1. 安装依赖

在使用 Element 之前，需要先安装 Element 的依赖库。可以使用 npm 或者 yarn 安装。

npm:

npm i element-ui -S

yarn:

yarn add element-ui

1. 引入CSS样式和JS组件

在 main.js 中引入CSS样式和JS组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

使用element

1. 全局引入

在 main.js 中引入 ElementUI 并全局注册组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

现在，ElementUI 的组件已经可以在你的 Vue 项目中使用了。

1. 局部引入

如果你只需要使用部分组件，也可以在各自的组件中单独引入和注册：

import { Button, Form, Input } from 'element-ui'

export default {
  components: {
    'el-button': Button,
    'el-form': Form,
    'el-input': Input
  }
  // ...
}

1. 变量覆盖

如果需要覆盖 ElementUI 的 CSS 样式或者组件默认配置，可以在项目中声明自己的主题和配置。这里以覆盖主题为例：

1. 安装依赖

需要安装 less 和 less-loader 依赖：

npm i less less-loader -D

1. 新建自定义主题

在项目根目录下新建一个 .less 文件，例如：theme.less，然后在文件中写入以下内容：

@import "node_modules/element-ui/packages/theme-chalk/src/index";

/* 自定义主题 */
@primary-color: #2d8cf0;       // 主题色
@success-color: #67c23a;       // 成功的颜色
@error-color: #f56c6c;         // 错误的颜色

1. 引入自定义主题

在 main.js 中引入 theme.less 文件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './theme.less'  // 引入自定义主题

Vue.use(ElementUI)

现在，你的页面就会应用你的自定义主题了。