Vue项目使用element-ui及修改select选择器的样式

1.先安装

npm i element-ui -S

2.按需引入，在main.js中：

import Vue from 'vue';
import './plugins/element.js'
import 'element-ui/lib/theme-chalk/index.css';

3.例：使用element中的button

3.1在项目src目录中新建plugins文件夹，文件夹中新建element.js文件

        element.js文件中：

import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use(Button)

3.2在项目中的main.js中引入

// 引入element—ui组件
import './plugins/element.js'

3.3在对应html位置内使用：

默认按钮

4.全局引入

main.js中：

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

5.注册全局使用

Vue.prototype.$message = Message

使用：this.$message.error("登录失败")

6.select选择器修改样式

将背景设置为透明，字体为白色

::deep很关键！！！

将背景设置透明，字体为白色
::v-deep .el-input__inner  {
              background-color: transparent;
              color: #fff;
            }