Rapid Development of a Vue3 Carousel Component Using Doubao MarsCode Online IDE

When a client demanded a quick demo of a sample project, the author faced the classic problem of lacking a local development environment on the client’s computer. Discovering Doubao MarsCode, an AI‑enhanced online IDE that provides a ready‑to‑use compiler, a public URL for instant preview, and a VSCode‑like interface, solved the issue.

Doubao MarsCode offers two main features: an AI programming assistant comparable to ChatGPT and an online compiler that bundles environments for languages such as Python, Node.js, Go, Java, React, and Vue, allowing developers to start coding without any local setup.

To work on the existing project stored in a git repository, the author imported the code directly into MarsCode. Public repositories can be imported via the UI, while private repositories require using the built‑in console to run git clone with appropriate credentials.

git clone https://gitee.com/your-private-repo.git

Because MarsCode’s default Node version (v20.14.8) conflicted with the project’s required version (v16), the author switched Node versions using the built‑in nvm tool.

nvm install 16.14.2
nvm use 16.14.2

Dependency installation was straightforward; running npm i downloaded all packages in under five seconds thanks to MarsCode’s fast cloud mirrors.

npm i

The project could then be started with npm run dev (or the IDE’s one‑click run button, which executes npm run start ), and MarsCode exposed the service at a public URL, making remote sharing trivial.

npm run dev

Additional VSCode extensions such as Git Graph and Code Spell Checker were installed via the IDE’s extension marketplace to improve workflow.

Git configuration required setting the user name and email, generating an SSH key, and adding the public key to the remote repository.

git config --global user.name "your username"
git config --global user.email "your email"
ssh-keygen -t rsa -b 4096 -C "your email"
cat ~/.ssh/id_rsa.pub

The core of the tutorial is the development of a carousel component. The author created a reactive list of image objects, a selectPage ref for pagination, and computed properties showList and dotList to render the current page and pagination dots.

<script setup>
import { computed, ref } from '@vue/reactivity'

const list = ref([
  ...[...Array(42).keys()].map(i => ({ name: "", src: `/assets/img/pic${i}.png`, id: i }))
])

const selectPage = ref(1)

const showList = computed(() => {
  const bIndex = (selectPage.value - 1) * 21
  const eIndex = selectPage.value * 21
  return list.value.slice(bIndex, eIndex)
})

const dotList = computed(() => {
  const num = Math.floor(list.value.length / 21)
  return Number(num)
})

const getListUrl = (path) => {
  return new URL(`/src/${path}`, import.meta.url).href
}
</script>

The template iterates over showList to display images and over dotList to render pagination dots, applying a selected class to the active dot.

<template>
  <div class="banner-box">
    <div class="banner-wrap">
      <!-- Carousel images -->
      <div class="img-wrap" v-for="item in showList" :key="item.id">
        <img :src="getListUrl(item.src)" alt="">
      </div>
    </div>
    <!-- Pagination dots -->
    <div class="option-btn">
      <span @click="selectPage = item" :class="{sel: selectPage===item}" v-for="item in dotList"></span>
    </div>
  </div>
</template>

The accompanying less style defines the layout for the carousel, the pagination dots, and the selected state.

.banner-wrap {
  display: flex;
  flex-wrap: wrap;
  .img-wrap {
    width: 154px;
    height: 90px;
    margin-right: 19px;
    img { width: 100%; height: 100%; }
    &:nth-child(7n) { margin-right: 0; }
  }
}
.option-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  span { width: 8px; height: 8px; border-radius: 50%; background: #B0B0B0; margin-right: 8px; }
  .sel { width: 16px; border-radius: 4px; background: #FA783A; }
}

After completing the component, the author demonstrated the live preview via the public URL, highlighting how the entire workflow—from environment setup to final deployment—took roughly half an hour.

The article concludes with a balanced evaluation of Doubao MarsCode. Advantages include cloud compilation, zero local setup, fast npm downloads, VSCode‑compatible UI, plugin support, and instant public sharing. Drawbacks are limited private‑repo import, loss of node version state after refresh, lack of template generation for manually created .vue files, and occasional incompatibility with certain VSCode extensions.

Overall, the author recommends Doubao MarsCode as a powerful learning and rapid‑prototyping tool for frontend developers.