vue中，iview框架的引入与按需引入

一、全局引入

这个官网上也有，不过我也随便记录一下吧：

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文件中正常使用：
在这里插入图片描述

最后跑一下项目就可以
在这里插入图片描述
完美，收工。如果这篇文章对你有帮助，就留下你的小赞赞吧，谢谢。

vue中，iview框架的引入与按需引入

一、全局引入

二、按需引入iview

猜你喜欢