vue iview实现方式
Vue 结合 iView 实现方式
iView 是一套基于 Vue.js 的高质量 UI 组件库，适用于中后台系统开发。以下是 Vue 项目中集成和使用 iView 的具体方法。
安装 iView
通过 npm 或 yarn 安装 iView：
npm install view-ui --save
# 或
yarn add view-ui全局引入 iView
在 Vue 项目的入口文件（如 main.js）中全局引入 iView 及其样式：
import Vue from 'vue';
import ViewUI from 'view-ui';
import 'view-ui/dist/styles/iview.css';
Vue.use(ViewUI);按需引入组件
若需优化打包体积，可通过 babel-plugin-import 按需引入组件：
-
安装插件：
npm install babel-plugin-import --save-dev -
在
babel.config.js中配置：module.exports = { plugins: [ ["import", { "libraryName": "view-ui", "libraryDirectory": "src/components" }] ] }; -
按需引入组件（示例）：
import { Button, Table } from 'view-ui'; Vue.component('Button', Button); Vue.component('Table', Table);
使用 iView 组件
在 Vue 单文件组件中直接使用 iView 提供的组件：
<template>
<div>
<Button type="primary">提交</Button>
<Table :columns="columns" :data="data"></Table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{ title: '姓名', key: 'name' },
{ title: '年龄', key: 'age' }
],
data: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 }
]
};
}
};
</script>自定义主题
通过修改变量覆盖默认样式：
-
创建主题文件（如
iview-variables.less）：@primary-color: #8c0776; -
在项目中配置 Less 加载器，并在
main.js中引入自定义样式：import './iview-variables.less';
国际化支持
iView 支持多语言，可通过以下方式配置：
import Vue from 'vue';
import ViewUI from 'view-ui';
import locale from 'view-ui/dist/locale/en-US';
Vue.use(ViewUI, {
locale
});注意事项
- iView 4.x 版本对应 Vue 2.x，若使用 Vue 3 需选择 ViewUI Plus（iView 的升级版）。
- 组件命名遵循 PascalCase 或 kebab-case，如
<DatePicker>或<date-picker>。 - 可通过
this.$Message等全局方法调用通知组件。
通过以上步骤，可快速在 Vue 项目中集成 iView 并实现丰富的 UI 功能。
