ElementUI框架引入和使用

安装使用有两种方式

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

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

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

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

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

HTML部分：
	<div id="app">
		<el-row>
		  <el-button>默认按钮</el-button>
		  <el-button type="primary">主要按钮</el-button>
		  <el-button type="success">成功按钮</el-button>
		  <el-button type="info">信息按钮</el-button>
		  <el-button type="warning">警告按钮</el-button>
		  <el-button type="danger">危险按钮</el-button>
		</el-row>
	</div>
	
	script标签部分：
		 <script type="text/javascript">
		  	new Vue({
		      el: '#app',
		      data: function() {
		        return { visible: false }
		      }
		    })
		  </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内

		<el-tooltip :content="'Switch value: ' + value" placement="top">
			 <el-switch
			    v-model="value"
			    active-color="#13ce66"
			    inactive-color="#ff4949"
			    active-value="100"
			    inactive-value="0">
			  </el-switch>
		</el-tooltip>
			
			<script>
				  export default {
				    data() {
				      return {
				        value: '100'（如果模板内有导出则只需要加入value数据而已）
				      }
				    }
				  };
			</script>

进入页面查看效果：

自定义主题

在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";

加入后在入口文件引入：

验证效果

	  <div class="block">
		<span class="demonstration">默认</span>
		<el-slider v-model="value11"></el-slider>
	  </div>
	  <div class="block">
		<span class="demonstration">自定义初始值</span>
		<el-slider v-model="value2"></el-slider>
	  </div>
	  <div class="block">
		<span class="demonstration">隐藏 Tooltip</span>
		<el-slider v-model="value3" :show-tooltip="false"></el-slider>
	  </div>
	  <div class="block">
		<span class="demonstration">格式化 Tooltip</span>
		<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
	  </div>
	  <div class="block">
		<span class="demonstration">禁用</span>
		<el-slider v-model="value5" disabled></el-slider>
	  </div>

	<script>
	  export default {
	    data() {
	      return {
	        value1: 0,
	        value2: 50,
	        value3: 36,
	        value4: 48,
	        value5: 42
	      }
	    },
	    methods: {
	      formatTooltip(val) {
	        return val / 100;
	      }
	    }
	  }
	</script>