为什么iViewUI` <slider>`模板没有显示在我的项目中

Question

滑块不显示（空白）。

我在iview中安装了npm：

npm install iview --save-dev

main.js中的

：

import iView from 'iview'
Vue.use(iView)

在我的Reommend.vue组件中：

<template>
  <div>
    <Test01></Test01>
  </div>
</template>

<script>

  import Test01 from '../test/test01'

  export default{

    components: {
      Test01,
    },
  }
</script>

<style scoped>

</style>

在test/test01.vue：

中

<template>

  <div>
    <Slider v-model="value" range></Slider>
    123
  </div>

</template>

<script>

  export default{

    data(){
      return {
        value: [2, 22]
      }
    }
  }
</script>

<style scoped>

</style>

当我npm run dev时，没有显示Slider，只显示123：

如果我对Vue.use(iView)中的main.js发表评论，则会报告错误：

vue.esm.js?efeb:578 [Vue warn]: Unknown custom element: <Slider> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

那么，为什么<Slider>模板没有显示在我的项目中。

官方文件是：https://www.iviewui.com/docs/guide/introduce

Answer 1

Import the CSS：

import 'iview/dist/styles/iview.css';

所以你的main.js会有：

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

DEMO CODESANDBOX here