Element 官方文档：element ui是由（饿了么旗下推出的一个UI框架）。 1.安装element ui 官方

官方文档：element ui是由（饿了么旗下推出的一个UI框架）。

element.eleme.cn/#/zh-CN

1.安装element ui

npm i element-ui -S

官方文档：在浏览器上输入cdnjs.com

我们可以找到vue相关的依赖

比如我有一个1.html我要引入vue.js。那我就把上面这段内容覆盖在vue.js里面。由此，html就会生效。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="./vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

在项目中，我们需要安装element ui

npm i element-ui -S //将element ui下载到node_modules目录里面

在package.json里面

开发环境里的依赖：devDependencies

项目依赖：dependencies 在dependencies项目依赖里面多了一个"element-ui":"^2.15.10"

在项目中，如何引用element ui

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

在项目里面直接用就行了。

按需引入

安装 babel-plugin-component：

npm install babel-plugin-component -D

在项目中找到babel.config.js这个文件

    {
    "presets": [["es2015", { "modules": false }]], 
        "plugins": [ 
            [ "component", 
                { 
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk" 
                } 
            ] 
        ] 
    }

引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'; 
import { Button, Select } from 'element-ui';（√）
import App from './App.vue';
Vue.component(Button.name, Button); （√）
Vue.component(Select.name, Select); （√）
/* 或写为
* Vue.use(Button) （√）
* Vue.use(Select) （√）
*/ 
new Vue({
el: '#app', 
render: h => h(App) 
});

注：大型现场（按项目引入和按需引入那个好？）

按需引入内存会少些，按项目引用内存会大很多，如果想让代码不沉重，可以根据项目的需求来进行按需引入或者是按项目引入。