vue2后台管理项目

一:项目准备

1)拉取模板代码

远程仓库复制到本地仓库.

2)安装后的项目

路径 code +文件夹 会打开vscode的文件夹.

3)安装vetur和eslint插件可以保存时自动修改不规范的地方.

4)App内有一级路由,路由组件导入如果是layout架子,会导入的是文件夹下的index.js没有则导入index.vue

5)

6)

app-mian是组件,如果一级路由是这个架子,是这个路由,app-mian是组件,组件内含有路由router-view.

7)setting.js和permission.js文件

setting.js文件内

原因是着setting.js会被导入放到vuex的模块内,因此架子使用仓库的数据

permission.js文件内写的是路由守卫.没有被调用.

8)vuex的结构

仓库内的getters所写的计算属性是模块的变量.

user模块内的变量用于存储用户信息和权限设置等.

9)模块内图标的使用

在组件内

<svg-icon icon-class="svg文件的名字不包含后缀"/>

原因:在main.js内导入了icon文件夹下的index.js文件,文件内全局注册了svg-icon组件.且使得每一个./svg目录下的文件进行遍历,使得每一个文件放置到项目内.

vue.config.js文件下会将这个svg换成symbol标签.svg-icon组件会将symbol标签放置

10)导入准备好的文件

我们导入到远程仓库,需要先初始化本地仓库

我们.git存储的仓库下版本的记录,会记录克隆前的也会存储.我们需要删除.git文件,需要打开文件夹才能找到删除之后仓库也没有了.克隆是有仓库的.

git init 

git log 查看版本历史

初始化项目 

远程仓库的创建和提交等

1)登录后

4)git remote add 代名 路径

5)git push -u  代名 分支名(远程仓库的分支)

二:页面

1)登录页

el-button可以直接在这里写宽度.

三:导航

可以显示左侧导航的图标.且点击放大缩小显示哪一个v-if和v-else可以根据类来.

view内文件夹可以写modules写路由内的弹窗等组件.

易错

如果属性a="false"是字符串,但是如果:a="false'是布尔类型

需要el-input才能进行校验,如果是文本域可以type="texteare"

                callback(new Error('重复的部门名称'))

自定义的需要new Error

rule代表的所在字段name的整个规则对象,数组.

element-ui的confirm也可也显示提示框,可以this.confirm放到组件上取了

表单内可以写插槽,row是每列的每一个所在行的数据

下面图片如果可能为无.,可以?.避免报错

el-table下的el-table-column内可以写

<el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="confirmDel(row.id)" >
      <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
  </el-popconfirm>
气泡框是在所在的button下点击即可出现,且出现在下面

template v-slot="{row}"是所在行的数据可以自定义一列下的结构

分页的点击改变时current-change事件这个事件必须调用方法,不能再内部写语句

分页的总共是中文,在main.js上,给element-ui设置为中文即可

下面设置的是英文,默认是中文.

下载文件在本地

- 拦截器判断是不是blob类型，如果是直接返回数据，不再进行解构-代码位置(**src/utils/request.js**)
```javascript
// 响应拦截器
service.interceptors.response.use((response) => {
  // axios默认包裹了data
  // 判断是不是Blob
  if (response.data instanceof Blob) return response.data // 返回了Blob对象
  const { data, message, success } = response.data // 默认json格式
  if (success) {
    return data
  } else {
    Message({ type: 'error', message })
    return Promise.reject(new Error(message))
  }
},
```
  

- 安装file-saver
```bash
$ npm i file-saver
$ yarn add file-saver
```

- 点击按钮调用接口，使用file-saver将blob转化成文件下载-代码位置(**src/views/employee/index.vue**)
```javascript
<el-button size="mini" @click="exportEmployee">excel导出</el-button>
 import FileSaver from 'file-saver'
 import { exportEmployee } from '@/api/employee'
  async  exportEmployee() {
      const result = await exportEmployee() // 导出所有的员工接口
      // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(result, '员工信息表.xlsx') // 下载文件
 }
```