【腾讯云Cloud Studio 实战训练营】迎接云端开发新时代 体验无界开发新利器

一、认识Cloud Studio：云端开发的新境界

1.1、什么是云IDE？

在软件开发的道路上，相信很多开发者都曾因为配置环境、解决兼容性等问题而感到厌烦。经常梦想有一个只要打开浏览器就可以开工的开发环境，而云IDE恰好是能满足此项需求的神兵利器。

云IDE是一种云计算服务，提供了基于云端的集成开发环境，让开发者能够在浏览器中开发、测试和运行应用程序，而无需安装和配置本地开发环境，让你能在不同的设备和操作系统上进行开发、测试和运行应用程序，轻松实现团队协作和代码管理。除此之外，云IDE提供了一个完整的开发环境，包括数据库、安全服务、应用程序管理和数据备份等服务，并提供了一系列的服务来处理用户请求和响应。包括了云存储服务、代码编译和构建服务、代码管理和版本控制服务和自动化部署服务等。

1.2、腾讯云Cloud Studio简介

刚好，腾讯云与国内领先的一站式软件研发平台 CODING联合推出一款完全基于云端的 IDE：Cloud Studio，实现 Coding Anytime Anywhere。开箱即用，可以快速上手，并为工作赋能增效降本！

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个稳定的云端工作站。无需下载安装，随时随地打开浏览器就能写代码，支持代码高亮、自动补全、全功能终端、实时保存等功能。拥有和本地 IDE 一样流畅的编辑体验。内置 Node.js、Java、Python 等常见环境，为您省去复杂的配置工作，直接进入开发状态。那么话不多说，我们直接开始上手体验吧！

二、实践Cloud Studio：搭建通用脚手架

Cloud Studio 控制台中罗列了常见的集成开发环境，支持了40+的多种模板（框架模板、云原生模板、建站模板），单击所需模板卡片即可进入对应环境中，也可以选择新建工作空间中的云服务器模式，连接云服务器进行开发环境搭建。

2.1、新建Vue开发环境

进入Cloud Studio后，点击框架模板------Vue.js，新建一个Vue项目。

可以看到界面基本跟我们平时使用的 VS Code 操作界面非常类似，另外Cloud Studio会自动创建一个Vue默认模板，并且默认预装好了依赖并运行，可以看到这个项目结构包括一些简单的目录：

• src/assets目录：存放静态资源文件，如图片、样式表等。
• src/components目录：存放可复用的 Vue 组件，通常是一些 UI 组件。
• App.vue：是所有页面的入口文件，包含了页面的整体结构和布局。
• main.js：是项目的主入口文件，负责初始化 Vue 实例，并引入所需的依赖模块。

当然默认模板里的东西很多我们用不着，我们把components里的icon整个文件夹都删除，然后删除TheWelcome.vue、WelcomeItem.vue，仅保留Helloworld.vue，将其只保留成基本模板：

<template>
  <div>hello world</div>
</template>
<script setup>
</script>
<style scoped>
</style>

然后我们将App.vue中的无关内容都删除，只保留基本的模板：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
    <div class="wrapper">
      <HelloWorld/>
    </div>
</template>

<style scoped>
</style>

然后在终端输入npm run dev，即可在内置的浏览器中看到成功创建了第一个初始项目：hello world

2.2、插件安装

工欲善其事，必先利其器，腾讯云Cloud Studio非常智能地兼容了VS Code插件。这意味着开发者可以在Cloud Studio中使用他们最喜爱的VS Code插件，享受到更丰富的功能和工具。为了更好的开发体验，我们安装一些插件，在VsCode中找到扩展，需要安装的扩展插件有：

ESlint：开源的JavaScript验证工具，可以让代码更加规范：

Prettier：前端代码格式工具，可以让代码保持风格一致：

Vue Language Features（Volar）：针对Vue3的vscode插件：

2.3、搭建脚手架

1️⃣ Less: CSS预处理器

我选用less作为CSS预处理器，需要安装相应的预处理器依赖：npm i less -D 如果需要规定全局样式的话，可以配置一下在src/asserts/less文件夹下新建一个reset.less，reset.less为重置样式（可以在网上搜索重置样式，复制粘贴），然后在main.js中加入import './assets/less/reset.less'，就可以看到我们的helloworld的内外边距都已经被重置成功了。

2️⃣ Pinia：状态管理库

Pinia 是一个用于 Vue.js 的状态管理库，它提供了一种简洁、直观的方式来管理应用程序的状态。与 Vue 官方提供的 Vuex 不同，Pinia 是基于 Vue 3 Composition API 开发的，它充分利用了 Composition API 的优势，提供了更优雅的状态管理解决方案。 同样我们输入npm i pinia安装Pinia，在项目src下创建store文件夹，以后项目中所有的状态管理部分文件都将放到store文件夹下。并在其下面创建 index.js，导出 store：

 import { createPinia } from 'pinia'

 const store = createPinia()

 export default store

在main.js里引入并使用：

 import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 ​
 // 创建vue实例
 const app = createApp(App)
 ​
 // 挂载pinia
 app.use(store)
 ​
 // 挂载实例
 app.mount('#app');

定义State，在 src/store 下面创建一个 user.js：

 import { defineStore } from 'pinia'

 export const useUserStore = defineStore({
   id: 'user', // id必填，且需要唯一
   state: () => {
     return {
       name: '张三'
     }
   },
   actions: {
     updateName(name) {
       this.name = name
     }
   }
 })

3️⃣ Vue Router：路由管理

Vue Router 是 Vue.js 官方提供的用于实现前端路由的插件。它能够帮助我们在单页应用中管理页面之间的导航，实现页面的跳转和切换，并且支持嵌套路由、路由参数、动态路由等高级功能。相同方法安装：npm i vue-router --save

新建 src/router 目录并在其下面创建 index.js，导出 router：

 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

 const routes: Array<RouteRecordRaw> = [
   {
     path: '/login',
     name: 'Login',
     meta: {
         title: '登录',
         keepAlive: true,
         requireAuth: false
     },
     component: () => import('@/pages/login.vue')
   },
   {
       path: '/',
       name: 'Index',
       meta: {
           title: '首页',
           keepAlive: true,
           requireAuth: true
       },
       component: () => import('@/pages/index.vue')
   }
 ]

 const router = createRouter({
   history: createWebHistory(),
   routes
 });
 export default router;

4️⃣ Axios：网络请求封装

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 Node.js。它可以用于发送异步请求，处理响应数据，提供了一些方便的 API，能够轻松地处理各种网络请求。同样方法：首先输入npm i axios安装Axios。

新建 src/utils/http 文件夹，新建 axios.js：

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
const service = axios.create();

 // Request interceptors
 service.interceptors.request.use(
     (config) => {
         // do something
         return config;
     },
     (error) => {
         Promise.reject(error);
     }
 );
 // Response interceptors
 service.interceptors.response.use(
     async (response) => {
         // do something
     },
     (error) => {
         // do something
         return Promise.reject(error);
     }
 );
 export default service;

5️⃣ Element Plus：UI组件库

Element Plus 是一套基于 Vue 3 的开源 UI 组件库，是对 Element UI 的升级和延续。它提供了丰富的高质量组件，用于构建现代化的 Web 应用程序。同样方法，我们输入npm install element-plus --save安装Element Plus。

然后配置自动按需引入，首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件：npm install -D unplugin-vue-components unplugin-auto-import

然后在 vite.config.js中配置按需自动引入：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

除了基础组件，还要安装图标库，输入：npm install @element-plus/icons-vue，然后从 @element-plus/icons-vue 中导入所有图标并进行全局注册：

// 配置Element-Plus
import * as ELementPluseIconsVue from "@element-plus/icons-vue";
import "element-plus/theme-chalk/el-message.css";
// 解决element-plus自动引入后ElLoading、ElMessage、ElNotification、ElMessageBox样式丢失的问题
import "element-plus/dist/index.css";

至此为止，我们就已经基本上搭建好了脚手架，下面就可以开始开发啦！

三、深入Cloud Studio：搭建登录注册demo

3.1、登录注册页面

基于以上脚手架，我们可以开发一款基础中台Web系统，首先编写登录界面login.vue，其主要代码如下

<template>
 <div class="login">
    <!-- 用卡片嵌登录表单 -->
    <el-card shadow="always">
      <div class="login-main">
        <!-- 登录左侧的图标 -->
        <div class="login-logo">
          <el-image
            :src="loginLogo"
            style="width: 100%; height: 100%"
          />
        </div>
        <!-- 主登录表单 -->
        <div class="login-form">
          <el-form
            ref="ruleFormRef"
            :model="state.loginForm"
            :rules="rules"
          >
            <div class="login-form-title">
              欢迎登录
            </div>
            <el-form-item
              label="账号"
              prop="username"
            >
              <el-input
                v-model="state.loginForm.username"
                prefix-icon="Avatar"
                placeholder="请输入用户账号"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item
              label="密码"
              prop="password"
            >
              <el-input
                v-model="state.loginForm.password"
                prefix-icon="Lock"
                placeholder="请输入用户密码"
                type="password"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox
                v-model="state.loginForm.keepPassword"
                label="记住密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                round
                style="width: 100%"
                @click="submit(ruleFormRef)"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import  {useUserStore}  from "../store/user";
import { useRouter } from "vue-router";
// 使用的pinia
const userStore = useUserStore();
// 使用的router
const router = useRouter();
// logo的url获取
const loginLogo = new URL(
  "../assets/image/login-left.png",
  import.meta.url
).href;
const state = reactive({
  loginForm: {
    username: "",
    password: "",
    keepPassword: null,
  },
});
</script>

<style  lang="less"  scoped>
</style>

这样就可以得到一个登录注册页面如下：

3.2、网络请求

在写好界面后，我们还需要给登录配置对应的功能，我们在src文件夹中新建api文件夹，然后在其中新建systeAPI.js文件，然后使用post方法写login功能：

import request from "@/utils/http/axios";

export default {
  async login(params) {
    return await request.post("/api/v1/users/login", params);
  },
};

然后在login.vue中编写登录逻辑的钩子函数，其中param是登录的参数，result是登录后返回的数据内容，userStore是Pinia的状态store，另外这里还接入了token验证功能，role角色判断功能，根据角色进入不同的功能页面。

// 钩子函数
const login = async (param) => {
        await systemAPI
          .login(param)
          .then((result) => {
            if (result.isSuccess == true) {
              // 使用store保存用户信息
              result.data && userStore.setUser(result.data);
              localStorage.setItem(
                "token",
                result.data ? result.data.token : ""
              );
              // 判断用户类型，普通用户进user/index，管理员进admin/index
              if (result.data && result.data.role == "user") {
                ElMessage.success("欢迎用户:" + result.data.nickName);
                router.push({ path: "/user/index" });
              }
              if (result.data && result.data.role == "admin") {
                ElMessage.success("欢迎管理员:" + result.data.nickName);
                router.push({ path: "/admin/index" });
              }
            }
          })
          .catch((error) => {
            ElMessage.error("请求错误，请检查服务器:" + error);
          });
      };

3.3、服务配置

至此我们已经完成了登录注册页面的基本功能，但是点击登录按钮出现404问题，这是因为axios的服务还没有配置，转到vite.config.js文件，在后增加服务的配置如下：

server: {
    // 本项目的本地端口，默认是 5174 端口
    port: 5174,
    // 浏览器自动打开
    // open: true,
    // 热更新
    hmr: {
      host: "127.0.0.1",
      port: 5174,
    },
    proxy: {
      "/api/v1/": {
        
        target: "你的服务器地址",
        /**
         * changeOrigin的值是true,意味着服务器host设置成target
         */
        changeOrigin: true,
      },
    },
  },

至此，我们就成功写好了基础的登录注册，只需要配合Vue Router即可成功写出分角色登录，当然后续还可以配置路由守卫等功能。

在scrpits中添加一行："commit": "git add . && cz-customizable"，如下

"scripts" : {
  ...
  "commit": "git add . && cz-customizable"
}

以后就使用 npm run commit 代替 git commit

3.4、初始化仓库

1️⃣、新建仓库

腾讯云Cloud Studio还为我们提供了git的管理功能，我们点击左侧的第三个图标，点击初始化仓库：

2️⃣、配置git账号

在使用 Git 之前，需要设置用户信息。执行下面的命令，将邮箱和姓名配置到 Git 中：

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

3️⃣、规范化git提交

为了规范git的提交，我们可以使用使用到Commitizen帮助编写规范的commit message ，首先需要输入npm install commitizen -D安装Commitizen，然后输入npm i -D cz-customizable安装cz-customizable自定义的 Commitizen 插件，

配置 根目录创建 .cz-config.js，规范git提交，内容如下：

module.exports = {
    types: [
      {
        value: ':sparkles: feat',
        name: '✨ feat:     新功能'
      },
      {
        value: ':bug: fix',
        name: '🐛 fix:      修复bug'
      },
      {
        value: ':tada: init',
        name: '🎉 init:     初始化'
      },
      {
        value: ':pencil2: docs',
        name: '✏️  docs:     文档变更'
      },
      {
        value: ':lipstick: style',
        name: '💄 style:    代码的样式美化'
      },
      {
        value: ':recycle: refactor',
        name: '♻️  refactor: 重构'
      },
      {
        value: ':zap: perf',
        name: '⚡️ perf:     性能优化'
      },
      {
        value: ':white_check_mark: test',
        name: '✅ test:     测试'
      },
      {
        value: ':rewind: revert',
        name: '⏪️ revert:   回退'
      },
      {
        value: ':package: build',
        name: '📦️ build:    打包'
      },
      {
        value: ':rocket: chore',
        name: '🚀 chore:    构建/工程依赖/工具'
      },
      {
        value: ':construction_worker: ci',
        name: '👷 ci:       CI related changes'
      }
    ],
    messages: {
      type: '请选择提交类型(必填)',
      customScope: '请输入文件修改范围(可选)',
      subject: '请简要描述提交(必填)',
      body: '请输入详细描述(可选)',
      breaking: '列出任何BREAKING CHANGES(可选)',
      footer: '请输入要关闭的issue(可选)',
      confirmCommit: '确定提交此说明吗？'
    },
    allowCustomScopes: true,
    allowBreakingChanges: [':sparkles: feat', ':bug: fix'],
    subjectLimit: 72
  }

然后终端输入npm run commit来commit：

4️⃣、发布到对应仓库

腾讯云Cloud Studio的点击"Publish Branch" -> 选择"Publish To Github"，云IDE会提示"扩展Github希望使用GitHub登录" -> 点击"允许"，会打开一个新的页面进行 Github 授权，授权完后再跳回原页面。登录成功后就可以Publish成功。

四、迎接云端开发新时代------腾讯云Cloud Studio使用体验

经过体验，首先很直观的感受就是Cloud Studio的界面非常简洁和直观。登录后，我可以立即开始我的代码开发工作，无需安装任何本地开发工具。所有的功能都在浏览器中进行操作，随时随地进行开发。

其次，Cloud Studio与腾讯云的其他服务完美集成，比如CODING、腾讯云服务等工具可以一站式地完成整个开发过程。

另外，Cloud Studio支持多人协作开发。可以邀请团队成员加入我们的项目，实时协作共同开发。在代码编辑过程中，我可以看到团队成员的修改，并进行即时的代码合并和冲突解决。这大大提高了团队的协作效率。

除此之外，云IDE能够自动化部署和实时地更新应用程序，使得开发者可以更加专注于编写代码

总的来说，腾讯云Cloud Studio确实是一个功能强大、使用方便且高效的云端开发工具，可以帮助在云端进行代码开发和管理，实现了真正的无界开发体验。而对于团队协作和跨平台开发来说，Cloud Studio无疑更是一个不可或缺的利器，大大提升了开发效率和协作效果。