vue中,iview框架的引入与按需引入
一、全局引入这个官网上也有,不过我也随便记录一下吧:npm install iview --saveiview推荐安装3.2.0版本以上的,那些版本才可以在table中使用slot-scope语法,用起来更方便吧。然后,在main.js中引入iview的css,使用全局注册iview就可以使用了。import iView from 'iview'import 'iview/dist/styles/
·
一、全局引入
这个官网上也有,不过我也随便记录一下吧:
npm install iview --save
iview推荐安装3.2.0版本以上的,那些版本才可以在table中使用slot-scope语法,用起来更方便吧。
然后,在main.js中引入iview的css,使用全局注册iview就可以使用了。
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
二、按需引入iview
想要按需引入iview,首先要先下载babel-plugin-import插件
npm install babel-plugin-import --save-dev
安装完成后可在package.json——devDependencies中看到如下属性
然后在项目中的.babelrc文件中的plugins属性中添加如下配置
["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]
然后在main.js中按需引入组件
import { Menu, MenuItem, Submenu, Input, Select, Option, Button, Table, DatePicker, Page, Collapse, Panel, Icon, Message, Modal } from "iview"
import 'iview/dist/styles/iview.css'
Vue.component("Menu", Menu) // 菜单组件
Vue.component("Submenu", Submenu) // 1级菜单组件
Vue.component("MenuItem", MenuItem) // 2级菜单组件
Vue.component("Input", Input) // input组件
Vue.component("Select", Select) // select下拉框组件
Vue.component("Option", Option) // select里的option选项组件
Vue.component("Button", Button) // button组件
Vue.component("Table", Table) // 表格组件
Vue.component("Page", Page) // 分页器组件
Vue.component("DatePicker", DatePicker) // 日期选择组件
Vue.component("Collapse", Collapse) // 折叠面板
Vue.component("Panel", Panel) // 折叠面板里要被折叠的面板
Vue.component("Icon", Icon) // 图标
Vue.component("Modal", Modal) // 模态框
Vue.prototype.$Message = Message // iview中Message组件是以API的方式书写的,所有组成时不能用component,而是要用Vue.prototype.$Message来声明注册
然后在vue文件中正常使用:
最后跑一下项目就可以
完美,收工。如果这篇文章对你有帮助,就留下你的小赞赞吧,谢谢。
更多推荐
已为社区贡献4条内容
所有评论(0)