第三方组件element-ui和图标库Font Awesome使用

1.第三方组件element-ui

1.1 安装（注意与vue的版本对应）

文档地址 

npm i element-ui

如何新建一个vue项目

 安装成功之后，文件夹会多出一个

 1.2以滑块作为演示

滑块组件地址跳转

在main.js里面添加如下代码，导入element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

在绑定的xxx.vue里面加入代码

我加入的是隐藏tooltip代码

<template>
  <div class="block">
    <span class="demonstration">隐藏 Tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
</template>

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

 2.第三方图标库Font Awesome

2.1安装

文档地址链接

npm install font-awesome

 在main.js中加入

import 'font-awesome/css/font-awesome.min.css'

    <span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>