在项目开发中,通常使用git来实现团队协作和版本控制。而我使用git,在公司的笔记本和家里的台式机之间进行"自我协作",将git用成了代码同步工具。
但最让人担心的是,哪一天写完代码没有push,导致让人头疼的代码冲突,于是我就想:如果有一天有个云端在线的IDE就好了。终于,千呼万唤始出来,豆包MarsCode来了!!
进入豆包MarsCode官网,我们可以看到MarsCode有云端IDE和编程助手两大功能模块。
MarsCode是一个支持多种语言的IDE,例如常见的Java、python、vue以及nodejs等。我们进入IDE之后,点击新建项目,可以选择不同语言模板来创建项目。
在选择语言模板和填入项目名称之后,点击创建新建一个项目并进入IDE。
整个IDE的页面横向分为三个部分。左侧是项目结构,除了一些基本的项目操作之外,也可以通过点击项目名称查看豆包分配资源的使用情况。
中间是代码编辑器,最右侧就是AI助手智能问答对话框。
同时,豆包还支持AI编程的能力,包括:代码补全、代码生成、代码编辑、代码解释、代码注释生成、单元测试生成、智能修复等功能。
AI编程助手支持上百种编程语言,不仅集成在了豆包IDE中,同时也以插件的形式,赋予VSCode、JetBrains IDEs(例如IntelliJ IDEA)AI编程的能力。
编程助手的主要提供了以下能力:
在整个项目开发过程中,对于我来说,用的最多的就是代码补全功能,利用注释生成代码。
这项功能真的为开发者减少了很多代码开发时间,有兴趣的大家可以体验一下。
我在之前自学vue生态的时候,写了一个后端管理系统,当时使用的webpack打包工具,每次启动编译都会耗费大量的时间。
所以这借助豆包的AI编程助手的能力,来将webpack迁移到vite上去,并完成后端代码的开发。
豆包支持github导入,如果项目没在github上需要先上传。
我想要导入github上一个名为DataDF的vue项目,现在豆包中点击创建项目。
然后点击授权获取仓库。
输入github的账号和密码,然后选择开放所有仓库,完成授权。
然后就可以看到github上所有的仓库,点击创建,即可拉取代码到豆包中。
这里支持从URL导入项目的方式,但是需要仓库是public。
然后启动项目,整个项目已经具备了管理系统大部分的功能。我们现在需要将webpack的代码和配置,修改为适配vite版本后正常运行即可。
【增加文章连接】
“遇事不决问春风,编程之事问豆包”。首先咨询一下豆包:如何从webpack迁移到vite。
按照AI助手给出的建议,我们逐步进行操作。
首先卸载项目中关于webpack的依赖:
npm uninstall webpack webpack-cli
在package.json中可以看到webpack相关依赖有webpack、webpack-cli,直接移除即可。
然后安装vite:
npm i -D vite
在整个vue项目中,我们在引入组件和静态文件时,为了避免使用..这样相对路径影响代码的美观程度和阅读性,所以我在webpack中定义一个 @ ,作为相对于src目录的绝对路径。
"@/*": ["src/*"],
这样我在引入组件的时候,使用 @ 表示以src作为起始路径。
但是在vite中,在vite.config.ts中也提供了定义绝对路径的方法,但是我在尝试将@定义src的时候,不支持以@开头的方式,只能以 /@ 开头,所以我就需要在配置中重新定义相对路径。
首先修改tsconfig.json中的路径解析。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"/@/*": ["./src/*"]
}
}
}
这里的paths是为了typescript在compile(编译)阶段,能够正确编译各个模块。然后在vite.config.js中添加解析路径(别名),这样在runtime(运行)阶段才能对各个模块进行正确解析。
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'/@': path.resolve(__dirname, './src'),
}
}
}
这样就将原来@映射src,修改为了/@映射/src,但是问题随之而来,那就是要所有代码中引入组件、静态文件路径,由原来的@修改为/@ 。
对于普通的IDE来说,通常只能在单个文件进行查找替换。但是在豆包中,提供了可以全量查找替换所有文件中目标字符的方式。
首先我们点击功能按钮,在Edit找到Replace in Files,也可以使用快捷键Shift+ Ctrl + H。
然后输入要查找的字符串@/。
在西面就会显示所有的搜索结果,接着在replace输入框填入要替换的字符串/@/,点击替换。
如图所示,仅仅几秒钟,就完成了项目所有代码中@/替换/@/的工作。
我定义了一个Icon组件,将Element Icons、本地svg各类图标封装为统一入口。
export default defineComponent(
{
name: 'Icon',
props: {
// 属性配置
},
setup(props) {
const iconStyle = computed(() => {
const {size, color} = props
let s = `${size.replace('px', '')}px`
return {
fontSize: s,
color: color,
}
})
// element Plus的图标
if (props.name.startsWith('el-icon-')) {
return () => h('el-icon', {
class: 'icon el-icon',
style: iconStyle.value
}, [h(resolveComponent(props.name))])
} else if (props.name.startsWith('local-') || isExternal(props.name)) {
// 加载本地svg图标
return () => h(svg, {name: props.name, size: props.size, color: props.color})
} else {
return () => h('i', {
class: 'icon ' + props.name,
style: iconStyle.value
})
}
}
}
)
Element Icons都是封装好的vue组件,我们只需要在使用vue引入即可使用。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
app.component('Icon', Icon)
icons = ElementPlusIconsVue as any
for (const i in icons) {
app.component(`el-icon-${icons[i].name}`, icons[i])
}
而对于本地的svg图标文件而言,我们需要使用webpack的svg-sprite-loader插件,来加载静态的svg文件用作图标。
关于webpack的配置都放在了vue.config.js中,我们要在配置文件里定义插件的匹配规则。
在切换为vite之后,我们依旧需要实现上述功能。AI助手建议使用vite的rollup-plugin-svg插件来实现上述功能,我们根据插件使用手册,实现svg本地图标的加载。
不过在查看代码的时候,会提示代码不规范的问题,这时候使用豆包的AI Fix(AI修复)功能,就会给出修复方案,极大地简化了开发问题的解决流程。
整个项目的菜单列表和路由信息都是后台返回,这样的设计可以更好的扩展菜单。
因为还没有开发后台,所以这里的路由信息是写死在前端的。在webpack中构造vue-router路由时,使用import动态引入相应的vue组件。
const routeInfo: RouteRecordRaw = {
path: path,
name: routes[idx].name,
component: () => import(`@/${routes[idx].component}.vue`),
}
但是在vite中,使用这种方式引入会提示不支持,所以我们就使用vite提供的方式,先全量导入所有vue组件。
直接使用豆包的编程助手,在注释中输入我的需求,下面就给出了vite导入的所有vue文件的方式。使用vite的import.meta导入所有的vue组件。
export const addRouteAll = (routes: any, parentName: string) => {
// 导入所有的vue组件
const viewsComponent = import.meta.glob('/src/views/**/*.vue')
for (const idx in routes) {
const routeInfo: RouteRecordRaw = {
path: path,
name: routes[idx].name,
component: viewsComponent['/src/' + routes[idx].component + '.vue']
}
router.addRoute(routeInfo)
}
}
然后返回一个KV形式的viewsComponent,然后我们根据后台传入的路由信息,拼接出key就获取到了对应的component。
根据控制台打印的viewsComponent,你会发现最终和webpack的import动态引入是一样的。
在启动webpack项目时,会自动将main.ts作为程序入口,然后从APP节点开始渲染。而在vite中则是以index.html作为入口,所以需要引入main.ts。
将package.json中webpack的启动脚本命令scripts修改为vite。如果对于启动命令不熟悉的,可以直接通过AI助手生成。
至于命令的名称可以根据自己的开发习惯进行修改,例如我个人习惯于将启动命令定义为serve或者dev。
在配置好启动命令之后,项目从webpack迁移到vite的改造工作就基本完成,这时候我们可以启动一下,看是否可以正常启动以及观测启动速度。
通过上图可以看到,原本webpack启动需要40s左右,使用vite只需要3s。启动之后,在temimal的右边,就多出了一个Networking,在Networking中,就会出现项目启动协议、端口和url。
在url后面有两个小图标,点击第一个图标可以在豆包内置的浏览器内预览项目。
这样,整个项目的改造就完成了,修改后的项目提交到github上去,在豆包中需要在Terminal中使用git命令完成commit和push等操作,所以首先配置git环境。
在Terminal中首先设置提交信息,这样在提交的时候,才能确认request是谁提交的,所以使用下面命令设置信息:
git config --global user.name "aqi"
git config --global user.email "98675***@qq.com"
然后在Termina使用ssh-kegen生成密钥。
这样密钥就生成完成了,执行cat ~/.ssh/id_rsa.pub打开公钥文件。
拷贝公钥文件的内容,在github的设置中找到SSH and GPG keys。
点击New SSH key,将拷贝的秘钥粘贴到Key中。
然后通过ssh -T git@github.com测试是否已经配置成功。
上图表示测试成功,然后执行git commit提交代码,然后push到github远程仓库。
git commit -a -m 'vite version'
git push
执行上面两条命令,完成github的推送。
我们在github的仓库中,也看到了我们的提交信息。
修改后的代码文件也同步到了仓库中。
这就是我使用Marscode豆包IDE,在AI助手、编程助手以及各种丰富功能的帮助下,将vue项目从webpack架构替换成了vite。在整个架构改造过程中,我使用家里的台式机和公司的笔记本共同协作,在云端完成了工作内容。
同时,marscode的UI主题即布局设计符合当下开发者的需求,同时也内置了其他IDE所没有的功能,例如:项目资源(cpu、内存、磁盘)使用情况图形展示、全局项目文件字符替换以及编程助手等。所以在开发过程中遇到问题,不用再去搜索引擎去搜索答案,直接在豆包的AI助手就内部消化了。
豆包真正做到了AI与代码开发的结合,对于开发者的帮助有了一个质的飞跃。所以,有兴趣的同学可以体验一下豆包。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。