如何在vue中引入element？

全局安装按需加载

# 环境依赖 @vue/cli 4.0.5 vue 2.6.10" element-ui 2.13.0 babel-plugin-component 1.1.1

全局安装

直接引入整个 Element ，使用 npm 进行安装：

npm i element-ui -S

在 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) })

在其他组件使用 Element 。

<!-- Home.vue --> <template> <div class="home"> <el-button type="primary">按钮</el-button> </div> </template> <script> export default { name: "home" }; </script>

按需加载

只引入需要的组件，达到减小项目体积的目的。

首先安装一个按需加载的模块：

npm install babel-plugin-component -D

修改根目录下的 babel.config.js：

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

如果该文件不存在，直接新建.babelrc 文件设置以下代码：

{ presets: ["@vue/cli-plugin-babel/preset"], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }

配置修改好之后，在根目录下新建 ./plugins/element.js 文件：

import Vue from 'vue' import { Menu, Button } from 'element-ui' //引入对应的组件名 Vue.use(Menu) Vue.use(Button)

然后在 main.js 中引入 element.js 文件：

import Vue from 'vue' import './plugins/element' // 注意只引入该文件 import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })

最后直接在需要用到 element 的组件中直接使用：

<!-- Home.vue --> <template> <div class="home"> <el-button type="primary">按钮</el-button> </div> </template> <script> export default { name: "home" }; </script>