Loading...
墨滴

MYSUN

2021/11/09  阅读:57  主题:橙心

Ant Design of Vue pro 安装与配置

Ant Design of Vue pro 安装与配置

大家好,这期,我们一起来看一下ant vue pro这个开箱即用的后台管理系统-前端集成组件库。

前言

随着前端三大框架的不断发展,这样中后台的集成框架也如雨后春笋般冒了出来,而Ant Design是蚂蚁金服开源的一套UI组件库,作为阿里巴巴旗下的蚂蚁金服,自然也是开发界的翘楚,Ant Design的设计规范,以及界面交互,都是非常美观的。

不过一开始ant Design只有react版本,对于笔者这种vue技术栈的前端,是很不友好的,不过随着vue的崛起,ant desugn也出了vue的版本,这就是ant design of vue。

虽然已经有了组件库,但很多东西都需要自己配置,因此一个官方给出了pro版本,一套具有完整开发规范的vue系中后台管理系统。

1.下载安装

废话不多说,直接上git,不过你要是跟我一样网不好,那就选择gitee吧,或者直接拿下面的地址,下载安装包

git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git my-project
git clone https://gitee.com/sendya/ant-design-pro-vue.git

https://gitee.com/sendya/ant-design-pro-vue/tree/refactor/pro-v3

解压之后得到这样一个目录

![image-20211109093734278](ant vue pro安装与配置.assets/image-20211109093734278.png)

下载完之后安装node-modules

yarn install

如何有不太了解前端的小伙伴,可能不知道yarn是什么,这里来解释一下。

yarn 与npm都是前端的包管理工具,不过相比于npm,yarn的性能更为强大,不仅可以管理依赖,还支持离线下载,更能省去npm 冗长的输出

在这里你也可以使用npm在根目录下进行依赖的安装:

npm install 或者 cnpm install

如果想要使用yarn 来安装,就先使用npm 来全局安装yarn

npm install -g yarn

然后运行

 yarn run serve 
 或者
 npm run serve

当然如果是从git仓库中拿出来的,可能会报错

![image-20211109095748032](ant vue pro安装与配置.assets/image-20211109095748032.png)

如果出现以下错误,原因是git没有建立本地仓库,此时只需要建立本地仓库,再次提交,即可运行起来

git init
git add .
git commit -m first
yarn run serve 

可以看到项目已经在运行了

![image-20211109100118847](ant vue pro安装与配置.assets/image-20211109100118847.png)

从这里的运行地址,来进行项目的访问,我这里是http://localhost:8001,访问完直接进行登录页面。

第一次登录账号为:

账号:admin 密码:admin

2.配置线上访问的域名

前端的项目搭建完成了,但是ant design pro里面内置了mock,需要将这个依赖停掉,才能进入正式的开发环境

2.1注释mock

在main.js中,将mock去掉

// import './mock'

2.2配置代理域名

vue.config.js文件是ant design pro的项目核心配置文件,每次修改配置后,都需要重启服务

在vue.config.js中进行配置

  devServer: {
    // host: '0.0.0.0:8080',
    hottrue,
    disableHostChecktrue,
    // development server port 8000
    port8000,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    // proxy: {
    //   '/api': {
    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
    //     ws: false,
    //     changeOrigin: true
    //   }
    // }
    proxy: {
      '/api': {
        target'http://127.0.0.1:7001',
        wsfalse,
        changeOrigintrue
      }
    }
  },

主要配置proxy进行域名代理,我这里使用的是本地环境的域名,将8001端口代理到7001的服务器端口。

假设后端接口如下 http://127.0.0.1:7001/api/user/info

前端在api路径下配置的访问路径则为 http://127.0.0.1:8001/api/user/info

2.3配置token

ant design vue pro已经将前端的token进行了配置和封装,从登陆接口中拿到token,然后存在本地,然后在下次发送请求时,将token从请求头,带给后端来做验证

真实的登录接口是在store的actions中实现的

  actions: {
    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const result = response.result
          storage.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
  }

然后再看src/utils/request.js中

request.interceptors.request.use(config => {
  const token = storage.get(ACCESS_TOKEN)
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers['Access-Token'] = token
  }
  return config
}, errorHandler)

这里是讲token配置在了请求头的‘Access-Token’中,所以后端在做路由过滤的时候,也要从Access-Token中取出用户信息

做完这些步骤,前后端基本打通。

3.前端的一些自定义配置

3.1左侧和顶部固定

ant design vue也使用了layout布局,注册于登录使用了UserLayout.js单独的布局,其他后台界面使用了BasicLayout.js的布局

首先找到src/layouts/BasicLayout.js

<template>
  <pro-layout
    :menus="menus"
    :collapsed="collapsed"
    :mediaQuery="query"
    :isMobile="isMobile"
    :handleMediaQuery="handleMediaQuery"
    :handleCollapse="handleCollapse"
    :i18nRender="i18nRender"
    v-bind="settings"
    :sider-width="180"
              
    :fixSiderbar="true"
    :fixedHeader="true"
              
  >
  </pro-layout>
</template>

其他多余代码不用看,我们只需要了解pro-layout这个配套的布局组件,具体的官方文档说明如下

https://procomponents.ant.design/components/layout/

翻到底下找到fixSiderbarfixedHeader这两个组件传入值,然后在pro-layout组件中传入即可,上面的代码已经配置好了

3.2关闭严格模式

依然是在vue.config.js中进行配置

const vueConfig = {
   //关闭严格模式
  lintOnSavefalse,
}

配置完,将项目重新启动,即可生效

3.3自定义主题颜色

他默认的主题不是红色,便是蓝色,虽然在设置按钮中可以修改,但是并不能持久化,我们要想在项目初始化时,就将主题颜色改成自己喜欢的颜色,也需要在vue.config.js文件中进行配置

const vueConfig = {
    loaderOptions: {
      less: {
        modifyVars: {
          // less vars,customize ant design theme

          'primary-color''#1890ff',
          'link-color''#1890ff',
          'border-radius-base''6px',
          'font-size-base''12px'
        },
        // DO NOT REMOVE THIS LINE
        javascriptEnabledtrue
      }
    }
}

了解更多,请关注微信公众号前端凌影

MYSUN

2021/11/09  阅读:57  主题:橙心

作者介绍

MYSUN