【vue.js】一文搭建vue-admin-template项目

1,868 阅读4分钟

说明

这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。

目前版本为 v4.0+ 基于 vue-cli 进行构建,若你想使用旧版本,可以切换分支到tag/3.11.0,它不依赖 vue-cli

项目地址:gitee.com/panjiachen/…

工程目录结构

├── build                      # 自动化构建脚本
├── mock                       # 项目mock 模拟数据
├── node_modules               # 加载的所有依赖
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有axios请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # ElementUI图标 项目扩展图标
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由 
│   ├── store                  # 前端存储 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # vue的入口页面
│   ├── main.js                # 应用程序的脚本入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

工程搭建

  1. 进入工作区

  2. 搭建基础环境

    # 克隆项目
    git clone https://gitee.com/PanJiaChen/vue-admin-template.git
    
    # 进入项目目录
    cd vue-admin-template
    
    # 安装依赖
    npm install
    
    # 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
    npm install --registry=https://registry.npm.taobao.org
    
    # 启动服务
    npm run dev
    

    浏览器访问: http://localhost:9528

  3. 修改项目文件夹名称

    image.png

  4. 修改项目信息

    配置package.json

    image.png

  5. 修改端口号

    配置vue.config.js

    image.png

  6. 修改浏览器地址栏标题

    配置src/settings.js

    image.png

  7. 修改浏览器地址栏图标

    将自己制作好的图标命名为favicon.ico覆盖掉public/favicon.ico文件

  8. 设置国际化:中文

    配置src/main.js

    image.png

  9. 修改登录页面相关

    配置src/views/login/index.vue

  10. 修改首页标题

    配置src/router/index.js

    image.png

  11. 修改首页用户下拉列表

    配置src/layout/components/Navbar.vue

    20210325205513.png

  12. 修改首页面包屑根标签

    配置src/components/Breadcrumb/index.vue

    20210325205323.png

  13. 配置首页左侧导航栏

    配置路由相关内容。构建路由的同时,首页左侧导航栏根据构建路由的信息自动构建。

配置语法检查

1. ESLint介绍

JavaScript是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找JavaScript 代码错误通常需要在执行过程中不断调适。

ESLint是一个语法规则和代码风格的检查工具[可以用来保证写出语法正确、风格统一的代码。让程序员在编码的过程中发现问题而不是在执行的过程中。

2. ESLint语法规则

ESLint内置了一些规则,也可以在使用过程中自定义规则。

本项目的语法规则包括:

  • 两个字符缩进,必须使用单引号,不能使用双引号
  • 语句后不可以写分号
  • 代码段之间必须有一个空行

3. 安装ESLint插件

  1. 安装插件

    image.png

  2. 开启ESLint校验

    点击右下角ESLint —> Allow Everywhere

    image.png

  3. 开启自动修复

    点击左下角齿轮 —> settings —> Extensions —> ESLint —> Edit in settings.json

    image.png

    2.0.4版本开始,ESLint扩展就移除了autoFixOnSave配置项。因为保存自动修复成为了vscode的Code Action on Save的一部分,需要在editor.codeActionsOnSave配置项中进行配置。

配置自定义组件

1. 创建自定义组件

  1. src/views目录下创建自定义组件目录(建议为项目名)

    image.png

  2. src/views/afterlives目录下创建自定义组件子目录(建议为模块名)

    image.png

  3. src/views/afterlives/user目录下创建自定义组件

    image.png

2. 自定义组件结构

20210326094350.png

配置路由

  1. 进入src/router/index.js

  2. 路由配置位置

    image.png

    { path: '*', redirect: '/404', hidden: true }
    

    必须放在最后,表示如果没有路由匹配,就跳转404。

  3. 构建路由

    image.png

    1. 如果父组件的 path: '/user',子组件的 path: 'list'。那么只有'/user/list'才能访问到该子组件。
    2. redirect: '/user/list' 表示父组件的 path: '/user' 被请求时,默认跳转到 '/user/list' 。
    3. 任何组件的name不能重复。
    4. hidden: true 表示该子组件不显示在左导航,但是可以链接进入页面。
    5. import('@/views/afterlives/user/List') 引入组件时,不需要加组件的文件后缀名".vue"。

配置API

1. 配置后台API

  1. 编辑.env.development

    image.png

  2. vue.config.js中配置proxy

    image.png

    proxy: {
        [process.env.VUE_APP_BASE_API]: {
            target: process.env.VUE_APP_BASE_API,
            changeOrigin: true,  //配置跨域
            pathRewrite: {
                ['^' + process.env.VUE_APP_BASE_API]: ''
            }
        }
    }
    
  3. vue.config.js中将open属性改为false

    image.png

  4. vue.config.js中注释掉mock.js注入

    image.png

  5. package.json的启动命令中加上 --open

    image.png

  6. main.js中注释mock生成数据

    image.png

2. 创建API

  1. src/api目录下创建目录(建议为模块名)

    image.png

  2. src/api/user目录下创建API集合(建议为实体名)

    image.png

  3. API内容配置

    image.png

3. 调用API

image.png

配置图标

1. 图标获取

vue-element-admin项目中src/icons/svg路径下所有svg图标文件拷贝到本项目的src/icons/svg中。

2. 自定义引入图标

  1. 进入src/icons/svg查看当前项目有哪些图标

    image.png

  2. 在组件需要处中引入图标

    image.png

    icon-class="link" 直接配置图标的文件名。

3. 导航栏引入图标

进入src/router/index.js修改路由的icon属性引入图标

image.png

icon: 'link' 直接配置图标的文件名。