机遇屋-vue中使用element-ui

vue中使用element-ui

作者：ych

### vue2(cli4.5之下版本适合)
#### 卸载cli4并指定安装cli3
我们将我们cli4先卸载
```
npm uninstall -g @vue/cli
```
2.安装指定版本（你安装其他版本也可以，但是要能支持这样导入`import Vue from ‘vue’`
```
npm install -g @vue/cli@3.0.4
```
#### 全局加载所有样式用法
直接给到找寻各种组件的网址：
https://element.eleme.cn/#/zh-CN/component/installation
安装ele
```
npm install element-ui -S
```
main.js中引入ele
```
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(Element);
```
在需要用到ele组件的地方直接使用即可。例如：
```
<el-button type="primary">默认按钮</el-button>
```
#### 按需引用部分样式
安装ele
```
npm install element-ui -S
```
main.js引入js
```
import './plugins/element.js'
```
创建`plugins/element.js`文件并引入相关插件，根据自己需要进行删减
```
import Vue from 'vue'
import {
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  Breadcrumb,
  BreadcrumbItem,
  Card,
  Row,
  Col,
  Table,
  TableColumn,
  Switch,
  Tooltip,
  Pagination,
  Dialog,
  Select,
  Option,
  Popover,
  Tag,
  MessageBox,
  Loading ,
  Tree
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Select)
Vue.use(Option)
Vue.use(Popover)
Vue.use(Tag)
Vue.use(Loading)
Vue.use(Tree)
// Vue.use(MessageBox)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm;
```

#### 尝试修改一下主题色
在`assets`文件夹中的`css`里新建`ele.scss`文件
```
// theme color
$--color-primary: rgb(69, 137, 148);

//icon font path,require
$--font-path:"../../../node_modules/element-ui/lib/theme-chalk/fonts";

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

在`main.js`中修改ele的引入
```
import Element from "element-ui";
import "./assets/css/ele.scss";

Vue.use(Element);
```

### vue3（cli4.5+）
看v3变化[文档](https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-compileroptions-iscustomelement "文档")
安装ele
```
# 卸载vue2版的插件（没执行安装忽略）
npm uninstall element-ui
# 安装vue的ele
npm install element-plus --save
# 这个命令也一样
npm i element-plus
```
#### 懒人全部引用
main.js中引入ele
```
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
const app = createApp(App)
app.use(store).use(router).use(ElementPlus).mount('#app')
```
#### 按需使用
[ts教程](https://www.cnblogs.com/qt-fei/p/14258016.html "ts教程")

##### 使用unplugin（比较麻烦）
1、下载element-plus 和 自动导入插件
```
npm install element-plus --save （不加–save默认就是–save）
npm install -D unplugin-vue-components unplugin-auto-import
```
2、vue.config.js配置
```
const path = require('path')
// element-plus 按需导入
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// element-plus 按需导入
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  pluginOptions: {
    // less自动注入
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.join(__dirname, "./src/assets/styles/variables.less"),
        path.join(__dirname, "./src/assets/styles/mixins.less"),
      ],
    },
  },
};
```
3、main.js导入样式（样式不能按需导入，得全部导入）
```
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'normalize.css'
import '@/assets/styles/common.less'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).mount("#app");
```
4、使用
```
<template>
  <nav>头部</nav>
  <nav>个人信心</nav>
  <el-button type="primary">I am ElButton</el-button>
  <router-view></router-view>
</template>
<script>

import { ElButton } from 'element-plus'
export default {
  name: "Layout",
  setup () {
    return {};
  },
};
</script>
<style lang='less' scoped>
</style>
```
##### 最简单的配置
```
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { ElButton } from 'element-plus'
import 'element-plus/theme-chalk/index.css'
const app = createApp(App)
app.use(store).use(router).use(ElButton).mount('#app')
```

### 一个简单的按钮样式
```
 <el-button type="primary">el-button</el-button>
```

### 样式使用网站

[连接](https://element-plus.gitee.io/zh-CN/component/table.html "连接")

评论区

先去登录

vue中使用element-ui

相关推荐

评论区