- 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 应用程序中按需引入的步骤:- 安装
iview: 首先,你需要在你的 Vue.js 应用程序的package.json文件中添加iview的依赖。以下是一个示例:
json "dependencies": { "iview": "^3.0.0" }- 创建
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); ```
-
在你的组件中使用
iview组件: 在你的组件中,你可以使用iview提供的各种组件和功能,如: -
Select组件:用于选择列表项或选项。 Card组件:用于显示卡片式组件,如列表、弹出框等。Table组件:用于显示表格数据。Pagination组件:用于分页列表、数据表单等。Carousel组件:用于滚动列表、拖拽列表等。Modal组件:用于创建弹出窗口,如确认框、警告框等。Tree组件:用于显示树状数据结构,如文件、菜单等。Tabs组件:用于切换 tabs 栏目,如页面导航、侧边栏等。
以下是一个使用
iview组件创建简单侧边栏的示例:```html
```
在这个示例中,我们首先导入了
iview和iview-tabs组件,并创建了一个简单的侧边栏实例。然后,我们定义了侧边栏的三个 tab,并在changeTab方法中更新了它们的 active 属性,使侧边栏按照给定的 tab 顺序显示或隐藏。你可以根据需要根据你的需求添加、修改或删除侧边栏组件和 tab,并根据需要设置它们的 active 属性。 - 安装
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

