title: vben admin 学习记录（一）
id: 18f0c4ab-7369-41a2-8cc3-48b8ef27570d
date: 2023-12-11 00:41:25
auther: liqi
excerpt: 前言 我是一个从事php后端开发的牛马，在机缘巧合下开始接触了vben admin,从今天开始，我开始在这里分享我学习vben admin的进度，之前也有接触过一点点，但是不是很熟练，所以除了更文挑战，也有记录学习成果的意思，今天开始从0记录vben的学习过程，我们会用vben admin来搭建一个
permalink: /archives/87562916-1633-42d6-94b7-08c455c854b3
categories:

• qian-duan
  tags:

• vue

前言

我是一个从事php后端开发的牛马，在机缘巧合下开始接触了vben admin,从今天开始，我开始在这里分享我学习vben admin的进度，之前也有接触过一点点，但是不是很熟练，所以除了更文挑战，也有记录学习成果的意思，今天开始从0记录vben的学习过程，我们会用vben admin来搭建一个简单的系统，同时我们对接的是php的接口，如果大家感兴趣的话，我也会分享一些关于php的知识ps:不过现在学习php的好像蛮少的，那下面我们就开始咯！

什么是Vben Admin

vben admin 是一个开源的是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript的中后台框架，他拥有流畅的交互效果，美观的UI库，并且提供了两种权限的解决方案，个人认为蛮好用的，在使用前需要了解一些Vue、ts等知识。

正文

本期主题

本期主要是开坑的第一步，就是下载安装，跑起来。

官网&&下载安装

下面附了vben 的官网 以及克隆仓库的命令，

vben admin 官网

    git clone https://github.com/vbenjs/vue-vben-admin.git

如果安装好不认识目录结构，可以去翻阅一下官方文档 目录说明

安装依赖

vben 2.10 推荐的管理包是pnpm，但是官网的文档貌似很久没更新了，还是yarn，这里我们选择使用pnpm，编辑器使用webStorm

    pnpm install

运行&&更改端口号&&后端接口配置

运行

安装好了以后，我们可以先看一下他的运行效果

    pnpm dev

主页是这样子的

端口号

当然，也许他默认的端口号并不是你想要的，所以我们可以来进入根目录的vite.config.ts来把他变成你想要的端口号，在server中加入port，后面跟着你想要的端口号即可

server: {  
    port: 10086, // 端口号  
    proxy: {  
        '/basic-api': {  
            target: 'http://localhost:8899',  
            changeOrigin: true,  
            ws: true,  
            rewrite: (path) => path.replace(new RegExp(`^/basic-api/`), ''),  
            // only https  
            // secure: false  
        },  
        '/upload': {  
            target: 'http://localhost:3300/upload',  
            changeOrigin: true,  
            ws: true,  
            rewrite: (path) => path.replace(new RegExp(`^/upload/`), ''),  
        },  
    },  
},

在这里，也可以配置后端的接口地址

 proxy: {  
        '/basic-api': {  
            target: 'http://localhost:8899',  
            changeOrigin: true,  
            ws: true,  
            rewrite: (path) => path.replace(new RegExp(`^/basic-api/`), ''),  
            // only https  
            // secure: false  
        },  
        '/upload': {  
            target: 'http://localhost:3300/upload',  
            changeOrigin: true,  
            ws: true,  
            rewrite: (path) => path.replace(new RegExp(`^/upload/`), ''),  
        },  
    },

结尾&&下期预告

留言

在开发的时候，我们要把开发的功能放在src/views中，这里有个demo的文件夹，里面就是目前的模拟数据，如果不需要的话可以将他删除掉，明天我们开始分享他们组件的一些用法，喜欢的朋友们可以点赞收藏，在评论区留言，我会根据留言来调整更新的方向！

下期更新内容

对接后端api 实现登录
调整后端权限
数据表格组件使用