首页 > 学术百科

iview加载html文件,iview-admin开发文档

iview加载html⽂件,iview-admin开发⽂档

# iview-admin简介

# 环境

Windows+Node.js +git

# 项⽬启动

## 下载代码

在GitHub上下载iview-admin代码

## 安装依赖

到⽂件所在位置

进⼊项⽬根⽬录 cd iview-admin

安装依赖 npm install

国民经济核算论文

## 运⾏项⽬

运⾏项⽬ npm run dev

项⽬运⾏完成浏览器会⾃动打开⽹页，进⼊登录页⾯。如图

# ⽬录结构

项⽬运⾏成功，我们可以添加⾃⼰的模块，下⾯我们进⾏如下操作，新建页⾯、配置路由。

# 新建页⾯(以⾏李查询为例)

## 说明：

在index.html处有个id="app"的div，在App.vue中也有⼀个id="app" 的div。页⾯渲染的就是这个组件。

在App.vue中有个router-view标签，默认在这渲染当路由为"/"指向的组件，所以要设置路由。

## 步骤

### 在src/views下⾯新建⽂件夹luggage

### 在luggage⽂件夹下新建luggage.vue luggage.js 和 luggage.css ⽂件

这⾥我们就创建好了⼀个组件即新的页⾯。它的页⾯路径为 src/views/luggage。这个路径将在后⾯的路由配置中⽤到。要想在浏览器上展⽰，接下来我们就要进⾏路由的配置

# 路由配置

说明：⾸先我们要看vue-router插件是否下载(⼀般项⽬npm install的时候会⾃动下载vue-router插件)

如果没有下载，⽤下⾯的命令进⾏下载

npm install --save vue-router

之后在src/router/index下看有没有引⼊路由

## 引⼊成功，开始使⽤插件

## ⽣成router实例

这⾥的routers是从同级⽬录下的routers.js引⼊的。routers.js这个⽂件是定义路由的⽂件。下⾯以⾏李查询为例进⾏定义路由

这是上⾯新建的页⾯路径我们已经配置到了路由⾥⾯，vue会⾃动匹配改视图在页⾯做出响应。2013我的夏天作文

这⾥定义了路由，同时要在zh-CN.js下⾯配置菜单的中⽂title

## 在src/main.js中把路由实例传给vue根组件

lc9

这样应⽤就启动了。在左侧菜单就形成了我们配置的路由

# 配置页⾯详解

在结构层进⾏页⾯布局，在⾏为层进⾏数据渲染

## 页⾯布局使⽤iview插件

同路由⼀样。我们要先看是否下载iview插件

要是没有下载，⽤如下命令进⾏下载

npm install iview@1.0.1 --save

snake模型下载之后，在src/main.js引⼊iview插件

引⼊成功之后，我们就可在任意页⾯使⽤iview插件组件。组件的引⽤具体看⽂档

ungelivable下⾯我们做⼀个⾏李查询项⽬，包括旅客列表，旅客关联的⾏程、⾏李信息

这些页⾯展⽰都放在结构层，标签⾥⾯。注：此标签下⾯紧接着是⼀个div标签，如图

这个功能，页⾯整体有三部分。条件查询表单、旅客列表表格、旅客关联抽屉。⽤到的iview组件有form表单、table表格、drawer抽屉。具体参数配置看iview⽂档

页⾯效果如图

下⾯以table表格为例。展⽰页⾯与后台交互，⾸先我们要在vue⽂件中引⼊js⽂件

## 页⾯布局xx门

直接引⽤iview的table组件

我们看⼀下iview的table组件的参数配置

## 初始化数据

## ⾏为层数据获取

### 配置请求链接

配置完成之后。我们将⽅法暴露出来。⽅便给组件引⽤

### 在页⾯js⽂件中引⼊接⼝⽅法

### ⽅法中调⽤接⼝

### 数据赋值

此时将调⽤后端返回的数组数据赋值给了table表格的data数组

页⾯刚开始加载就要将数据渲染出来，所以要在mounted钩⼦函数中调⽤获取旅客列表函数

这时页⾯⾥⾯的表格就渲染出来了

本文发布于:2024-09-23 14:34:56，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/396884.html

上一篇：Vue中，修改Iviewform表单的默认样式

下一篇：iview框架中table组件详解

标签：配置下载路由旅客组件插件列表表格

留言与评论（共有 0 条评论）