在Vue项目中引入El这样操作-Element-那可简单了只需要几个步骤就能搞定

在Vue项目中引入Element UI库，这样操作：

想要在Vue项目中使用Element UI库？那可简单了，只需要几个步骤就能搞定！

一、安装Element UI库

你得把Element UI库装到你的项目里去。你可以用npm或者yarn来装：

这一步会把Element UI库添加到你的项目依赖里。

二、在项目中导入Element UI

安装完Element UI后，你需要在项目的入口文件里导入它和它的样式。

这样，Element UI就注册成了Vue的插件，你就能在项目中使用它所有的组件了。

三、在项目中使用Element UI组件

导入之后，你就可以在Vue组件中使用Element UI提供的组件了。比如，用按钮组件做个示范：

创建一个Vue组件文件，比如叫Button.vue：

<template> <el-button>点我</el-button> </template> <script> import { ElButton } from 'element-ui'; export default { components: { ElButton } } </script> 

<template> <Button></Button> </template> <script> import Button from './Button.vue'; export default { components: { Button } } </script> 

npm install babel-plugin-component --save-dev 

// .babelrc { "plugins": ["babel-plugin-component"] } 

import { ElButton } from 'element-ui'; 

npm install vue-i18n --save 

import Vue from 'vue'; import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: 'en', // 设置语言为英文 messages: { en: { message: { hello: 'Hello' } } } }); new Vue({ i18n, // ... }); 

$--color-primary: teal; 

import './element-variables.scss'; 

npm install element-ui --save 

yarn add element-ui 

import ElementUI from 'element-ui'; Vue.use(ElementUI); 

npm install babel-plugin-component --save-dev 

yarn add babel-plugin-component --dev 

{ "plugins": ["babel-plugin-component"] } 

import { ElButton } from 'element-ui'; 

$--color-primary: teal; 

import './element-variables.scss';