What is iView in vue?

In vue, iView is a set of open source UI component libraries based on Vue.js, which mainly serves mid- and back-end products of the PC interface. iView provides a wealth of components and functions that can meet most website scenarios; it provides an out-of-the-box Admin system and high-end component library, which greatly saves development costs.

iView is a set of open source UI component libraries based on Vue.js, which mainly serves mid- and back-end products for PC interfaces. It uses a single-file Vue component development model, developed based on npm webpack babel, supports ES2015 high-quality, feature-rich and friendly API, and can use space freely and flexibly. It is developed and maintained by TalkingData, and is used by many well-known Internet companies.

Official website address: https://www.iviewui.com/

Features of iView

• Rich components and functions to meet most website scenarios

• Provides out-of-the-box Admin system and high-end component library, greatly saving development costs

• Provide professional and high-quality one-to-one technical support

• Friendly API, free and flexible use of space

• Detailed and beautiful UI

• Down-to-earth documentation

• Customizable themes

iView Installation:

1) Use npm:

npm install --save iview

2) CDN introduction:

<link rel="stylesheet" href="css/iview.css">
<script src="js/iview.min.js"></script>

Introduce iView

1 ) Generally configured as follows in the webpack entry page main.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue'; // 路由挂载
import Routers from './router.js'; // 路由列表
import iView from 'iview'; // 导入组件库
import 'iview/dist/styles/iview.css'; // 导入样式
Vue.use(VueRouter);
Vue.use(iView);
// 路由配置
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

2) Reference on demand

Using components on demand in webpack can reduce the file size:

import Input from 'iview/src/components/input';

Note:

① On-demand references still need to import styles, that is, execute import 'iview/dist/styles/iview.css' in main.js or root component;

② On-demand reference is a direct reference to the component library source code, which needs to be compiled with babel. Take webpack as an example:

module: {
    	rules: [
        	{ test: /iview.src.*?js$/, loader: 'babel' },
        	{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    	]
}

Component usage specifications

Use: When the data format passed by prop is a number, Boolean value or function, it must contain: (that is, use v-bind). Its value will be calculated as a JavaScript expression, otherwise it will be treated as a string.

Correct usage:

<Page :current="1" :total="10"></Page>

Incorrect usage:

<Page current="1" total="10"></Page>

Related recommendations:

##2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit:

programming video course! !

The above is the detailed content of What is iView in vue?. For more information, please follow other related articles on the PHP Chinese website!