快速上手

您所在的位置：网站首页 › vue3文档离线 › 快速上手

快速上手

2024-07-16 21:43| 来源: 网络整理| 查看: 265

快速上手使用之前使用 Vue CLI 3使用推荐工程引入 iView按需引用特别提醒组件使用规范快速上手使用之前

高效的开发，离不开基础工程的搭建。在开始使用 iView 之前，有必要先了解以下基础知识，我们也假设您已经写过 Vue，并掌握了下面的内容。

Vue组件

单文件组件以下概念贯穿 iView 前后，建议开发者花点时间来了解。

props 传递数据

slot 内容分发 events $emit @click 事件你也可以通过学习组件基础内容来快速入门。使用 Vue CLI 3

我们为最新的 Vue CLI 3 提供了相应的 iView 插件，如果你正在用 Vue CLI 3，可以直接在插件中搜索 iview，安装插件来使用。

使用推荐工程

我们也为您准备好了基础工程，以此为基础开发，可以为您省去大量配置和调试环境的时间。

推荐工程：iview-project

如果您使用了我们推荐的工程，可以略过下面的内容直接进入开发阶段，我们也推荐使用这套工程来构建您的项目。

如果您希望自己配置或使用其它工程，请继续往下阅读。

如果你未接触过 webpack，建议学习 webpack 内容。

引入 iView

一般在 webpack 入口页面 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);// The routing configurationconst RouterConfig = { routes: Routers};const router = new VueRouter(RouterConfig);new Vue({ el: '#app', router: router, render: h => h(App)});

按需引用

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]]}

然后这样按需引入组件，就可以减小体积了：

import { Button, Table } from 'iview';Vue.component('Button', Button);Vue.component('Table', Table);

特别提醒

按需引用仍然需要导入样式，即在 main.js 或根组件执行 import 'iview/dist/styles/iview.css'; 组件使用规范

使用:prop传递数据格式为数字、布尔值或函数时，必须带:(兼容String除外，具体看组件文档)，比如：

Correct usage:Incorrect usage:

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。

以下组件，在非 template/render 模式下，需要加前缀 i-：

Button: i-buttonCol: i-colTable: i-tableInput: i-inputForm: i-formMenu: i-menuSelect: i-selectOption: i-optionProgress: i-progressTime: i-time

以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：

Switch: i-switchCircle: i-circle

【本文地址】

快速上手

快速上手

今日新闻

推荐新闻