Element组件完整引入、按需引入、样式修改（全局、局部）、简单安装less以及npm命令证书过期等

一、npm 安装

npm i element-ui -S

二、完整引入

1. 在 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 的引入。需要注意的是，样式文件需要单独引入。

三、按需引入

1. 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

2. 首先，安装 babel-plugin-component：npm install babel-plugin-component -D

3. 然后，将 .babelrc (或者 babel.config.js)修改为：

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

4. 在main.js所在目录创建一个plugins文件夹，该文件夹下创建一个element.js文件

// 按需引入
import Vue from 'vue'
// 需要注意的是，样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css';
// 修改样式，根据实际项目自定义 （这里修改的样式会在整个项目所有界面的应用，全局的）
import '@/assets/css/DatePicker.css';
import '@/assets/css/Pagination.css';
import '@/assets/css/Table.css'; 
import '@/assets/css/select.css'; 
//..................................
import {
    Button,
    Select,
    Option,
    Image,
    Carousel,
    CarouselItem,
    DatePicker,
    Pagination,
    Radio,
    RadioButton,
    RadioGroup,
    Dialog,
    Table,
    TableColumn,
    Descriptions,
    DescriptionsItem

} from 'element-ui'

Vue.use(Descriptions)
Vue.use(DescriptionsItem)
Vue.use(Button)
Vue.use(Select)
Vue.use(Option)
Vue.use(Image)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(DatePicker)
Vue.use(Pagination)
Vue.use(Radio)
Vue.use(RadioButton)
Vue.use(Dialog)
Vue.use(RadioGroup)
Vue.use(Table)
Vue.use(TableColumn)

完整组件列表和引入方式（参考）------------如上根据实际需要引入对应的组件

		import Vue from 'vue';
		import {
		  Pagination,
		  Dialog,
		  Autocomplete,
		  Dropdown,
		  DropdownMenu,
		  DropdownItem,
		  Menu,
		  Submenu,
		  MenuItem,
		  MenuItemGroup,
		  Input,
		  InputNumber,
		  Radio,
		  RadioGroup,
		  RadioButton,
		  Checkbox,
		  CheckboxButton,
		  CheckboxGroup,
		  Switch,
		  Select,
		  Option,
		  OptionGroup,
		  Button,
		  ButtonGroup,
		  Table,
		  TableColumn,
		  DatePicker,
		  TimeSelect,
		  TimePicker,
		  Popover,
		  Tooltip,
		  Breadcrumb,
		  BreadcrumbItem,
		  Form,
		  FormItem,
		  Tabs,
		  TabPane,
		  Tag,
		  Tree,
		  Alert,
		  Slider,
		  Icon,
		  Row,
		  Col,
		  Upload,
		  Progress,
		  Spinner,
		  Badge,
		  Card,
		  Rate,
		  Steps,
		  Step,
		  Carousel,
		  CarouselItem,
		  Collapse,
		  CollapseItem,
		  Cascader,
		  ColorPicker,
		  Transfer,
		  Container,
		  Header,
		  Aside,
		  Main,
		  Footer,
		  Timeline,
		  TimelineItem,
		  Link,
		  Divider,
		  Image,
		  Calendar,
		  Backtop,
		  PageHeader,
		  CascaderPanel,
		  Loading,
		  MessageBox,
		  Message,
		  Notification
		} from 'element-ui';
		
		Vue.use(Pagination);
		Vue.use(Dialog);
		Vue.use(Autocomplete);
		Vue.use(Dropdown);
		Vue.use(DropdownMenu);
		Vue.use(DropdownItem);
		Vue.use(Menu);
		Vue.use(Submenu);
		Vue.use(MenuItem);
		Vue.use(MenuItemGroup);
		Vue.use(Input);
		Vue.use(InputNumber);
		Vue.use(Radio);
		Vue.use(RadioGroup);
		Vue.use(RadioButton);
		Vue.use(Checkbox);
		Vue.use(CheckboxButton);
		Vue.use(CheckboxGroup);
		Vue.use(Switch);
		Vue.use(Select);
		Vue.use(Option);
		Vue.use(OptionGroup);
		Vue.use(Button);
		Vue.use(ButtonGroup);
		Vue.use(Table);
		Vue.use(TableColumn);
		Vue.use(DatePicker);
		Vue.use(TimeSelect);
		Vue.use(TimePicker);
		Vue.use(Popover);
		Vue.use(Tooltip);
		Vue.use(Breadcrumb);
		Vue.use(BreadcrumbItem);
		Vue.use(Form);
		Vue.use(FormItem);
		Vue.use(Tabs);
		Vue.use(TabPane);
		Vue.use(Tag);
		Vue.use(Tree);
		Vue.use(Alert);
		Vue.use(Slider);
		Vue.use(Icon);
		Vue.