单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。

1 在main.js中将emelent-ui引入到项目中

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. // 导入定义好的路由
  4. import router from './router/router.js'
  6. // 引入ElementUI
  7. import ElementUI from 'element-ui'
  8. // 引入css
  9. import 'element-ui/lib/theme-chalk/index.css'
  10. // 使用ElementUI
  11. Vue.use(ElementUI)
  13. new Vue({
  14.     el: '#app',
  15.     router,  // 使用路由
  16.     // 渲染单文件组件
  17.     render: function(create){
  18.         return create(App)
  19.     }
  20. })

2 在子组件中使用element-ui的代码

Child2.Vue

  1. <template>
  2. <div>
  3.   <div class="block">
  4.     <span class="demonstration">默认</span>
  5.     <el-slider v-model="value1"></el-slider>
  6.   </div>
  7.   <div class="block">
  8.     <span class="demonstration">自定义初始值</span>
  9.     <el-slider v-model="value2"></el-slider>
  10.   </div>
  11.   <div class="block">
  12.     <span class="demonstration">隐藏 Tooltip</span>
  13.     <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  14.   </div>
  15.   <div class="block">
  16.     <span class="demonstration">格式化 Tooltip</span>
  17.     <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  18.   </div>
  19.   <div class="block">
  20.     <span class="demonstration">禁用</span>
  21.     <el-slider v-model="value5" disabled></el-slider>
  22.   </div>
  23. </div>
  24. </template>
  26. <script>
  27.   export default {
  28.     data() {
  29.       return {
  30.         value1: 0,
  31.         value2: 50,
  32.         value3: 36,
  33.         value4: 48,
  34.         value5: 42
  35.       }
  36.     },
  37.     methods: {
  38.       formatTooltip(val) {
  39.         return val / 100;
  40.       }
  41.     }
  42.   }
  43. </script>

image.png