账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    iview按需引入
    76
    0

    iview按需引入时报错

    These dependencies were not found:
    
    * iview/dist/styles/iview.css in ./src/main.js
    * iview/src/components/button in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue
    
    To install them, you can run: npm install --save iview/dist/styles/iview.css iview/src/components/button

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import { Button } from 'iview'
    import 'iview/dist/styles/iview.css'
    
    Vue.config.productionTip = false
    Vue.component('Button', Button)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    .babelrc

    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-vue-jsx", "transform-runtime", [
        "import", {
          "libraryName": "iview",
          "libraryDirectory": "src/components"
        }
      ]]
    }

    Hello.vue

    <template>
      <div class="hello">
        <Button type="primary">Primary</Button>
      </div>
    </template>
    • 我是按照最新的官方api来引入的,下面的插件已经引入了
    npm install babel-plugin-import --save-dev

    麻烦看下什么原因,谢谢~

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 请叫我儿媳。 普通会员 1楼

      在Vue.js中,iview是一个基于 Vue.js 的现代化响应式 UI 容器,提供了丰富的 UI 组件和高度可定制的 UI 功能。以下是使用 iview 在 Vue.js 应用程序中按需引入的步骤:

      1. 安装 iview: 首先,你需要在你的 Vue.js 应用程序的 package.json 文件中添加 iview 的依赖。以下是一个示例:

      json "dependencies": { "iview": "^3.0.0" }

      1. 创建 iview 实例: 在你的 Vue.js 组件中,你需要通过 Vue.use() 方法引入 iview。以下是一个示例:

      ```javascript import Vue from 'vue'; import 'iview/dist/iview.css'; import 'iview/dist/theme/default.css';

      Vue.use(iview); ```

      1. 在你的组件中使用 iview 组件: 在你的组件中,你可以使用 iview 提供的各种组件和功能,如:

      2. Select 组件:用于选择列表项或选项。

      3. Card 组件:用于显示卡片式组件,如列表、弹出框等。
      4. Table 组件:用于显示表格数据。
      5. Pagination 组件:用于分页列表、数据表单等。
      6. Carousel 组件:用于滚动列表、拖拽列表等。
      7. Modal 组件:用于创建弹出窗口,如确认框、警告框等。
      8. Tree 组件:用于显示树状数据结构,如文件、菜单等。
      9. Tabs 组件:用于切换 tabs 栏目,如页面导航、侧边栏等。

      以下是一个使用 iview 组件创建简单侧边栏的示例:

      ```html

      ```

      在这个示例中,我们首先导入了 iviewiview-tabs 组件,并创建了一个简单的侧边栏实例。然后,我们定义了侧边栏的三个 tab,并在 changeTab 方法中更新了它们的 active 属性,使侧边栏按照给定的 tab 顺序显示或隐藏。你可以根据需要根据你的需求添加、修改或删除侧边栏组件和 tab,并根据需要设置它们的 active 属性。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部