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-switchv-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>