[JavaScript知识库] vue2引用element2的两种方式

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue2引用element2的两种方式 -> 正文阅读

[JavaScript知识库]vue2引用element2的两种方式

一.使用配套的element插件

当你使用vue-cli3.0及以上创建项目时，element-ui其实是为其打造了一套专门的应用插件的，及其简单，无须过多操作，安装即可使用。

1.按需引入组件

当需要引用所有element组件时，只需要在你所创建的项目下，在同package.json文件的目录下打开控制台，输入vue add element即可。

首先回提示你是否继续安装，直接回车即可（这一步是下载插件，如果不是第一次安装，有可能会没有该提示）
```
? Still proceed? 
```
下载完成后会询问你需要哪种引入方式，选择Import on demand也就是按需引入即可
```
? How do you want to import Element? Import on demand
```
最后选择你的语言，直接默认中文即可（这一步下载element）
```
? Choose the locale you want to load zh-CN
```
等待他安装完成后会发现在src下面的目录里面有了一个plugins目录，该目录里面有个element.js文件

main.js里面也会自动加上import './plugins/element.js'，接下来只需要把我们需要的组件按照button按钮的例子一样引入就可以直接使用了。

需要注意的是，当引入js类型的组件时，需要在vue实例上挂载。

  import {Message} from 'element-ui'
  Vue.use(Message)
  Vue.prototype.$message = Message;

2.引入全部组件

直接引入组件的方法很简单，直接vue add element，然后到了How do you want to import Element这一步选择 Fully import，并且多了一项Do you wish to overwrite Element’s SCSS variables?的选择，询问你是否希望覆盖Element的SCSS变量，推荐是。其余与上面不变即可。

二.手动引入element

1.引入全部组件

下载element组件库
```
npm run 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)
});

2.按需全部组件

下载element-ui组件
```
 npm run element-ui -S
```
下载 babel-plugin-component插件
```
npm install babel-plugin-component -D
```

创建或者在babel.config.js文件里加入以下数据

module.exports = {
  plugins: [
  [
      'component',
      {
          libraryName: 'element-ui',
          styleLibraryName: 'theme-chalk'
      }
  ]
]
}