从「配置地狱」到「5分钟启动」：我的CodeBuddy-CLi实战笔记
原创
从「配置地狱」到「5分钟启动」：我的CodeBuddy-CLi实战笔记
原创
从「配置地狱」到「5分钟启动」：我的CodeBuddy-CLi实战笔记
上周接了个管理后台项目，按以往流程至少得花2小时配置环境：Vue 3、TypeScript、Element Plus、Pinia...结果同事扔给我个CodeBuddy-CLi，说"试试这个，5分钟搞定"。抱着半信半疑的态度试了下，没想到真的颠覆了我的开发习惯——原来搭建项目还能这么丝滑！这篇笔记就记录我用CodeBuddy-CLi搭建Vue 3管理后台的全过程，全是实战细节。
一、安装：比泡一碗泡面还快
1. 先检查环境
CodeBuddy-CLi基于Node.js，我用的是Node 18.18.0（建议16.0.0以上）。打开终端敲两行命令确认下：
node -v # 输出v24.7.0
npm -v # 输出11.5.12. 全局安装工具
安装过程比泡一碗泡面还快，不到20秒就搞定了：
npm install -g @tencent-ai/codebuddy-code安装成功后会显示版本信息：
+ @tencent-ai/codebuddy-code@1.2.0
added 128 packages in 32s3. 初始化登录
第一次用需要登录，支持微信扫码，对国内用户特别友好：
codebuddy init执行后终端会弹出一个二维码，掏出手机扫一下就登录成功了。登录后会在当前目录生成.codebuddy配置文件夹，存着用户信息和偏好设置。
二、生成项目：一句话描述需求
1. 创建个空目录
先建个项目目录，别在已有项目里瞎搞：
mkdir vue-admin-scaffold && cd vue-admin-scaffold2. 把需求说清楚
这一步是关键！我直接用中文把想要的技术栈和功能列了出来：
codebuddy "生成基于Vue 3 + TypeScript的管理后台脚手架，要求集成Element Plus、Pinia状态管理，配置ESLint+Prettier规范，添加axios请求拦截器，支持环境变量区分开发/生产环境"划重点：指令越具体越好，把你想要的技术细节都写上，这样生成的代码才会更符合预期。
3. 见证魔法的时刻
指令执行后，终端开始滚动各种信息，CodeBuddy像个贴心的助手一样一步一步帮我完成任务：
- 需求解析：先是显示"正在分析需求，构建技术方案..."，大概10秒左右。
- 资源生成：然后开始疯狂创建文件，什么
package.json、tsconfig.json、组件文件全给生成了。 - 依赖安装：最爽的是它还会自动执行
npm install，不用我手动敲命令。
大概过了1分多钟（比我想象的快多了），终端弹出成功信息：
✅ 项目生成完成！
📦 已安装依赖：vue@3.3.4、element-plus@2.4.2、pinia@2.1.7等
📝 项目说明文档已生成：./codebuddy-docs.md
▶️ 启动命令：npm run dev三、代码细节：比我自己写的还规范
我忍不住好奇打开项目看了看，结果发现生成的代码比我自己写的还规范！
1. 项目结构超清晰
生成的项目结构特别合理，一看就是大厂标准：
vue-admin-scaffold/
├── public/ # 静态资源
├── src/
│ ├── api/ # 接口请求模块
│ ├── components/ # 公共组件
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia状态管理
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── .eslintrc.js # ESLint配置
├── .prettierrc # Prettier配置
└── package.json # 项目依赖与脚本2. 配置细节超贴心
（1）Element Plus集成
它用了unplugin-vue-components做自动导入，我之前总是忘记手动导入组件，这个配置简直救了我：
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
// ...
AutoImport({ resolvers: [ElementPlusResolver()] }),
Components({ resolvers: [ElementPlusResolver()] }),
]
})这样写组件时直接用就行，不用每次都import，太方便了。
（2）Pinia状态管理
Pinia的store都给我建好了，还分了user和app两个模块：
// src/stores/user.ts
import { defineStore } from 'pinia'
interface UserState {
token: string | null
userInfo: { name: string; role: string } | null
}
export const useUserStore = defineStore('user', {
state: (): UserState => ({
token: localStorage.getItem('token'),
userInfo: null
}),
actions: {
setToken(token: string) {
this.token = token
localStorage.setItem('token', token)
},
clearUserInfo() {
this.token = null
this.userInfo = null
localStorage.removeItem('token')
}
}
})我之前自己写store总忘记加类型定义，这里连接口都给我定义好了，TypeScript支持拉满。
（3）ESLint + Prettier配置
最让我惊喜的是它把ESLint和Prettier的冲突都解决了，配置文件写得特别专业：
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/no-unused-vars': 'warn',
'vue/setup-compiler-macros': 'off'
}
}package.json里还贴心地加了format命令，直接npm run format就能格式化所有代码。
（4）Axios拦截器实现
axios的拦截器也给我写好了，连token处理、错误提示都考虑到了：
// src/api/index.ts
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'
const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 5000
})
// 请求拦截器自动加token
service.interceptors.request.use(
(config) => {
const userStore = useUserStore()
if (userStore.token) {
config.headers.Authorization = `Bearer ${userStore.token}`
}
return config
},
(error) => {
ElMessage.error('请求配置错误')
return Promise.reject(error)
}
)
// 响应拦截器处理错误
service.interceptors.response.use(
(response) => {
const { code, message } = response.data
if (code !== 200) {
ElMessage.error(message || '请求失败')
return Promise.reject(new Error(message))
}
return response.data
},
(error) => {
if (error.response?.status === 401) {
window.location.href = '/login' // 401自动跳登录页
}
ElMessage.error('网络错误，请稍后重试')
return Promise.reject(error)
}
)
export default service我之前做项目总在拦截器上栽跟头，不是忘记处理401就是错误提示不友好，这里的实现特别完善。
（5）环境变量配置
环境变量也给我分好了开发和生产两套：
# .env.development
VITE_API_BASE_URL = '/api'
VITE_ENV = 'development'# .env.production
VITE_API_BASE_URL = 'https://api.example.com'
VITE_ENV = 'production'还在src/env.d.ts里加了TypeScript类型声明，用import.meta.env.VITE_XXX访问的时候就能有类型提示了。
四、运行项目：一键启动，还有登录页面
1. 启动开发服务器
按照提示运行npm run dev：
npm run dev终端显示：
VITE v4.4.9 ready in 356 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose打开浏览器一看，居然直接给我生成了个带登录页面的管理后台！
2. 登录测试
试着登录了一下，默认用户名admin，密码admin123。登录成功后，侧边栏、顶部导航、内容区域都完整显示，甚至还有个dashboard页面。
3. 代码质量检查
我想看看生成的代码质量如何，就运行了下ESLint和TypeScript检查：
npm run lint
npm run type-check居然一个错误都没有！这要是我自己配环境，至少得调半小时才能跑通。
五、踩坑记录：不是完美，但足够好用
用了两天，我也发现了一些可以优化的地方：
- TypeScript类型问题：一开始
request.ts里有些类型定义不太准确，比如AxiosRequestConfig应该用InternalAxiosRequestConfig，我自己改了一下才通过类型检查。 - 环境变量警告：
.env文件里加了NODE_ENV会有警告，因为Vite会自动设置这个变量，我后来把它删掉了。 - 组件命名规范：生成的一些组件没有完全遵循Vue 3的多单词命名规范，但它在ESLint里把这个规则关了，倒也不影响使用。
不过这些小问题对于一个自动生成的脚手架来说已经微不足道了，节省的时间和精力完全值回票价。
六、总结：这才是AI辅助开发该有的样子
用CodeBuddy-CLi这两天，我最大的感受是：它不是来替代开发者的，而是来解放开发者的。把那些繁琐、重复、容易出错的配置工作交给AI，我们可以把精力放在更有创造性的业务逻辑上。
如果你是：
- 前端新手：用它来学习标准项目结构和最佳实践
- 团队leader：用它来统一项目初始化规范
- 赶工期的开发者：用它来快速启动新项目，节省宝贵时间
都可以试试这个工具。当然，它生成的代码不是完美的，你可能需要根据项目需求做一些调整，但比起从零开始配置，已经强太多了。
最后给新手提个醒：指令描述越具体，生成的代码越符合预期。比如你可以说"生成一个带用户管理、角色管理、权限控制的Vue 3后台管理系统"，而不是简单地说"生成一个Vue项目"。
现在，我已经用它启动了两个项目，效率提升了至少3倍。如果你也受够了配置地狱，不妨试试CodeBuddy-CLi，5分钟就能体验到开发的乐趣！
#CodeBuddy Code
#AI CLI
#无界生成力
@CodeBuddy
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
