ElementUI框架引入和使用

安装使用有两种方式

①npm/cnpm安装到项目中
②CDN引入

先介绍CDN引入
CDN全称：Content Delivery Network即内容分发网络。
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，
简单说就是在网络引入文件

引入 ElementUI样式文件：
引入Vue和JS文件：

可以进入ElementUI中文网教程查看CDN引入
点击进入ElementUI中文网教程

接下来测试下element-ui是否加载成功

HTML部分：
	

		
		  默认按钮
		  主要按钮
		  成功按钮
		  信息按钮
		  警告按钮
		  危险按钮
		
	
	
	script标签部分：
		 

网页样式：

npm/cnpm安装到项目中

安装依赖包

cnpm i element-ui --save

然后再安装cnpm i sass-loader node-sass -D和cnpm install style-loader -D（分开下载）

安装完后入口文件引入

webpack.base.conf.js添加配置
build/build.js/webpack.base.conf.js
在webpack.base.conf.js文件下module下rules数组末尾加上以下格式代码：

配置完成后重启项目，重启后验证是否引入成功，因为是再Vue中引入所以要写在组件的template内

进入页面查看效果：

自定义主题

在src下建立element-variables.scss文件（名字自定义）

创建完成后在该文件加入以下代码“：

		/* 改变主题色变量 */
		$--color-primary: yellow;
		/* 改变 icon 字体路径变量，必需 */
		$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
		@import "../node_modules/element-ui/packages/theme-chalk/src/index";

加入后在入口文件引入：

验证效果

	  

		默认
		
	  
	  

		自定义初始值
		
	  
	  

		隐藏 Tooltip
		
	  
	  

		格式化 Tooltip
		
	  
	  

		禁用