Vben Admin

Appearance

环境配置 ​

详细的开发环境配置指南。

开发工具 ​

必需工具 ​

Node.js ​

推荐使用 LTS 版本（18.x 或更高）。

安装方式：

bash
# 下载安装包
https://nodejs.org/

# 或使用 Chocolatey
choco install nodejs-lts
bash
# 使用 Homebrew
brew install node@18

# 或下载安装包
https://nodejs.org/
bash
# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# CentOS/RHEL
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

验证安装：

bash
node -v  # v18.x.x
npm -v   # 9.x.x

pnpm ​

推荐使用 pnpm 作为包管理器。

bash
# 安装 pnpm
npm i -g corepack
corepack enable

# 验证安装
pnpm -v  # 8.x.x

Java ​

后端开发需要 JDK 17 或更高版本。

安装方式：

bash
# 下载安装包
https://adoptium.net/

# 或使用 Chocolatey
choco install temurin17
bash
# 使用 Homebrew
brew install openjdk@17

# 配置环境变量
echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc
bash
# Ubuntu/Debian
sudo apt install openjdk-17-jdk

# CentOS/RHEL
sudo yum install java-17-openjdk-devel

验证安装：

bash
java -version  # openjdk version "17.x.x"
javac -version # javac 17.x.x

Maven ​

Java 项目构建工具。

安装方式：

bash
# 下载安装包
https://maven.apache.org/download.cgi

# 或使用 Chocolatey
choco install maven
bash
# 使用 Homebrew
brew install maven
bash
# Ubuntu/Debian
sudo apt install maven

# CentOS/RHEL
sudo yum install maven

验证安装：

bash
mvn -v  # Apache Maven 3.8.x

MySQL ​

数据库服务。

安装方式：

bash
# 下载安装包
https://dev.mysql.com/downloads/mysql/

# 或使用 Chocolatey
choco install mysql
bash
# 使用 Homebrew
brew install mysql@5.7

# 启动服务
brew services start mysql@5.7
bash
# Ubuntu/Debian
sudo apt install mysql-server

# CentOS/RHEL
sudo yum install mysql-server

验证安装：

bash
mysql --version  # mysql Ver 5.7.x

Redis ​

缓存服务。

安装方式：

bash
# 下载安装包
https://github.com/microsoftarchive/redis/releases

# 或使用 Chocolatey
choco install redis-64
bash
# 使用 Homebrew
brew install redis

# 启动服务
brew services start redis
bash
# Ubuntu/Debian
sudo apt install redis-server

# CentOS/RHEL
sudo yum install redis

验证安装：

bash
redis-cli ping  # PONG

推荐工具 ​

IDE ​

前端开发：

后端开发：

数据库工具 ​

Redis 工具 ​

API 测试 ​

Git 客户端 ​

VS Code 配置 ​

推荐插件 ​

json
{
  "recommendations": [
    // Vue 开发
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    
    // 代码格式化
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    
    // 工具
    "antfu.iconify",
    "antfu.unocss",
    "bradlc.vscode-tailwindcss",
    
    // Git
    "eamodio.gitlens",
    
    // 其他
    "editorconfig.editorconfig",
    "lokalise.i18n-ally"
  ]
}

用户设置 ​

json
{
  // 编辑器
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  
  // 文件
  "files.eol": "\n",
  "files.associations": {
    "*.css": "tailwindcss"
  },
  
  // Prettier
  "prettier.enable": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  
  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  
  // Volar
  "volar.takeOverMode.enabled": true
}

IntelliJ IDEA 配置 ​

推荐插件 ​

  • Lombok - 简化 Java 代码
  • MyBatisX - MyBatis 增强
  • GitToolBox - Git 工具
  • Rainbow Brackets - 彩虹括号
  • Translation - 翻译插件

代码风格 ​

xml
<!-- Settings > Editor > Code Style > Java -->
<code_scheme name="Vben">
  <option name="INDENT_SIZE" value="4" />
  <option name="TAB_SIZE" value="4" />
  <option name="USE_TAB_CHARACTER" value="false" />
  <option name="WRAP_ON_TYPING" value="true" />
</code_scheme>

环境变量配置 ​

Windows ​

powershell
# 设置 JAVA_HOME
setx JAVA_HOME "C:\Program Files\Java\jdk-17"
setx PATH "%PATH%;%JAVA_HOME%\bin"

# 设置 MAVEN_HOME
setx MAVEN_HOME "C:\Program Files\Apache\maven"
setx PATH "%PATH%;%MAVEN_HOME%\bin"

macOS/Linux ​

bash
# 编辑 ~/.zshrc 或 ~/.bashrc
export JAVA_HOME=/usr/lib/jvm/java-17-openjdk
export PATH=$JAVA_HOME/bin:$PATH

export MAVEN_HOME=/usr/local/maven
export PATH=$MAVEN_HOME/bin:$PATH

# 使配置生效
source ~/.zshrc  # 或 source ~/.bashrc

项目配置 ​

前端配置 ​

.npmrc ​

ini
# 使用淘宝镜像
registry=https://registry.npmmirror.com/

# 严格的 peer dependencies
strict-peer-dependencies=false

# 自动安装 peer dependencies
auto-install-peers=true

.editorconfig ​

ini
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

后端配置 ​

Maven settings.xml ​

xml
<settings>
  <mirrors>
    <mirror>
      <id>aliyun</id>
      <name>Aliyun Maven</name>
      <url>https://maven.aliyun.com/repository/public</url>
      <mirrorOf>central</mirrorOf>
    </mirror>
  </mirrors>
</settings>

数据库配置 ​

MySQL 配置 ​

ini
# my.cnf 或 my.ini

[mysqld]
# 字符集
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

# 最大连接数
max_connections=200

# 查询缓存
query_cache_size=0
query_cache_type=0

# InnoDB
innodb_buffer_pool_size=1G
innodb_log_file_size=256M

Redis 配置 ​

conf
# redis.conf

# 绑定地址
bind 127.0.0.1

# 端口
port 6379

# 密码（可选）
# requirepass your_password

# 最大内存
maxmemory 256mb

# 内存淘汰策略
maxmemory-policy allkeys-lru

常见问题 ​

Node.js 版本管理 ​

使用 nvm 管理多个 Node.js 版本：

bash
# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装 Node.js
nvm install 18
nvm use 18

# 设置默认版本
nvm alias default 18

端口冲突 ​

如果端口被占用，可以修改配置：

前端：

typescript
// vite.config.mts
export default defineConfig({
  server: {
    port: 5174  // 修改端口
  }
})

后端：

yaml
# application.yml
server:
  port: 8081  # 修改端口

权限问题 ​

Linux/macOS：

bash
# 修改文件权限
chmod +x script.sh

# 使用 sudo 运行
sudo command

下一步 ​

相关链接 ​

MIT License

Copyright © 2024-present Vben Admin