# iview-doc

**Repository Path**: xxred/iview-doc

## Basic Information

- **Project Name**: iview-doc
- **Description**: iview上手文档，简单介绍
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-04-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、环境的搭建
* 下载 [IView Cli](https://www.iviewui.com/cli)，附件已上传有一份，也可直接下载
* 按照步骤，新建工程即可
# 二、配置
## 路由配置
- src文件夹下的router/router.js,将path值为"/"的路由的component改成自己指定的vue文件，新建工程默认views文件夹下index.vue组件
- [详细说明](https://router.vuejs.org/zh-cn/essentials/getting-started.html)
## webpack配置
- 配置文件名为webpack.base.config.js
- 修改此配置需重新build才能生效
- 别名配置
    - 使用别名可以简化路径
    - 配置文件resolve模块alias节点，key-value的形式，值一定得是绝对路径
- [一篇教程](https://www.cnblogs.com/vajoy/p/4650467.html)
## 状态管理vuex
- 仓库store, vue对象的一个属性，意思为仓库,存取操作数据
- 比如这里用来存放左边菜单的数据、主题颜色、各页面表格表单配置等
- store里面的数据由vuex来统一管理
- 独立成文件出来，位于src/store文件夹
- [官网](https://vuex.vuejs.org/zh-cn/)
# 三、添加页面
* views文件夹下添加控制器名称的文件夹，比如manager，接着在manager文件夹下添加index.vue。
* 添加如下内容
 ```vue
<template>
  <div>
      <h1>hello world!</h1>
  </div>
</template>
```
* 在配置-路由配置，修改路由配置，将入口改成新创建的vue组件，保存文件后，如果已运行，浏览器自动刷新
# 四、运行
 ## Install
```bush
// install dependencies
npm install
```
## Run
### Development
```bush
npm run dev
```
### Production(Build)
```bush
npm run build
```
# 五、数据

# 六、组件
## 对话框Modal（弹窗）
### 连续打开多个弹窗
- 遇到的问题
  - 弹窗一般是填写表单并提交，提交处理过程应该自定义而不用放在弹窗的确定按钮。
  - 弹窗自带按钮点击就会关闭，加上验证过程感觉比较绕。
  - 弹窗内容是tab标签页的时候，出现确定按钮就不是很合适。
  - 多个窗口同时出现的层级是按照加载顺序决定的，最先加载的弹窗出现在最底层，而最需要在顶层显示的弹窗却最先加载
  - 调用方法打开的弹窗不能设置不显示确定按钮，而且因为是单例，确定按钮的回调的this是空值，不能触发子组件的保存事件
- 做法
  - 在放置第一个窗口的位置连续放置需要打开的窗口，按照打开顺排好，通过变量控制显示，这样就能确定弹窗显示层级是正确的
  - 把弹窗的vue对象通过prop传递到子组件，在子组件控制弹窗显示和操作数据，虽说不应该传父级对象到子对象，但暂时只想到这个办法能解决，后面再看看有什么写法
# 疑问
- 项目里使用webpack，less引入文件 @import '@/css/main.less'，可以使用别名吗？