>  기사  >  웹 프론트엔드  >  vue의 iView란 무엇입니까?

vue의 iView란 무엇입니까?

青灯夜游
青灯夜游원래의
2020-11-11 11:45:135883검색

Vue에서 iView는 Vue.js 기반의 오픈소스 UI 구성 요소 라이브러리 집합으로, 주로 PC 인터페이스의 Middle 및 Back-End 제품을 서비스합니다. iView는 대부분의 웹 사이트 시나리오를 충족할 수 있는 풍부한 구성 요소와 기능을 제공하며, 즉시 사용 가능한 관리 시스템과 고급 구성 요소 라이브러리를 제공하여 개발 비용을 크게 절감합니다.

vue의 iView란 무엇입니까?

iView는 Vue.js 기반의 오픈 소스 UI 구성 요소 라이브러리 세트로 주로 PC 인터페이스용 미드엔드 및 백엔드 제품을 서비스합니다. 단일 파일 Vue 구성 요소 개발 모델을 사용하여 npm + webpack + babel을 기반으로 개발되었으며 ES2015 고품질, 기능이 풍부하고 친숙한 API를 지원하여 자유롭고 유연한 공간 사용이 가능하도록 TalkingData에서 개발 및 유지 관리합니다. , 많은 유명 인터넷 회사에서 사용됩니다.

공식 웹사이트 주소: https://www.iviewui.com/

iView의 특징

  • 대부분의 웹사이트 시나리오를 충족하는 풍부한 구성 요소와 기능

  • 즉시 사용 가능한 관리 시스템 제공 및 고급 컴포넌트 라이브러리로 개발 비용 대폭 절감

  • 전문적이고 고품질의 일대일 기술 지원 제공

  • 친숙한 API, 자유롭고 유연한 공간 활용

  • 세부적이고 아름다운 UI

  • 상세 문서

  • 맞춤형 테마

iView 설치:

1) npm 사용:

npm install --save iview

2) CDN 소개:

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

iView 소개

1 ) 일반적으로 다음과 같이 구성됩니다. webpack 항목 페이지에서 main.js:

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

2) 온디맨드 참조

웹팩에서 온디맨드 구성요소를 사용하면 파일 크기를 줄일 수 있습니다:

import Input from &#39;iview/src/components/input&#39;;

참고:

1 참조 온디맨드는 여전히 임포트해야 합니다. 스타일, 즉 main.js 또는 루트 구성 요소에서 import 'iview/dist/styles/iview.css'를 실행합니다.

② 주문형 참조는 구성 요소 라이브러리의 소스 코드에 대한 직접 참조입니다. 예:

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

구성 요소 사용 사양

:prop를 사용하여 데이터 형식을 숫자, 부울 값 또는 함수로 전달하는 경우 다음을 가져와야 합니다. v-bind), 해당 값은 JavaScript 표현식으로 계산됩니다. 그렇지 않으면 문자열로 처리됩니다.

올바른 사용법:

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

잘못된 사용법:

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

관련 권장 사항:

2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 사항: 2020 최신 5 Vue 선택. js 비디오 튜토리얼

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오 코스를 방문하세요! !

위 내용은 vue의 iView란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.