【腾讯云Cloud Studio 实战训练营】- Cloud Studio 云端开发环境上手体验，真香

一、前言：

“腾讯云 Cloud Studio 实战训练营”是由腾讯云联合 CSDN 推出的系列开发者技术实践活动，通过技术分享直播、动手实验项目、原创作品征集、有奖征文活动等，让广大开发者沉浸式体验腾讯云开发者工具 Cloud Studio的同时，实现技术实战能力提升。

最近参加腾讯云 Cloud Studio的活动，发现还有云IDE的概念，以前都是在本地IDE开发，觉得是一个新的东西，就来体验一下。

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。

---

二、参加手册活动：

报名后，加入微信群，可以有动手实验手册，就是主办方温馨给大家提供的例子，可以快速的去了解一个产品，我也是由于兴趣爱好，跟着手册来实操一把。

• 使用 Cloud Studio 快速构建 React 生成点餐 H5 页面
• 使用 Cloud Studio 快速构建 Vue 生成 事务所 H5 页面
• 使用 Cloud Studio 快速搭建 JavaScript Snake Game
• GPT+Cloud Studio “念咒编程”构建Excel工资表自动核算

由于平时接触的前端东西多点，选择一个Vue的手册项目来进行实操，接下来就由我来介绍一下。

首页登录一下官网网站，点击右边，有一个“注册/登录”功能。

Cloud Studio提供了三种登录的方式，分为是Coding的账号、微信、GitHub账号。

这里也是刚刚接触Coding的账号，它是一个为研发团队打造的数字化软件工厂，可以提供一站式研发管理平台及云原生开发工具，让软件研发如同工业生产般简单高效，助力企业提升研发管理效能，是一个非常好用的工具，推荐大家了解一下。

登录进来之后，可以看到非常的玲琅满目，数了一下，有40多个模板，分为是框架模板、云原生模板、常用模板、建站模板，包括各种语言的，比如Java、Go、Nodejs、net、Rust这些比较常用的语言。

那这些模板是干什么用的呢？

这些模板就是包括了环境、IDE、模板文件在一起，可以帮你自动初始化一个马上就可以开发的一整套工具集，比如我们要写Vue这个手册，我们就点击Vue这个框架模板。

首页一进来，就是一些初始化的工作，还有骨架屏操作，很快就给我们生成了一个基础的Vue最小框架的模板，并且自动安装完环境、依赖、运行起来。这里说明一下，并没有在本地安装任何Vue相关的东西。

不过，细心的朋友会发现这个界面跟VsCode长的很像，我个人认为基本上差不多的功能。

为了快速开发，一般我们会采用一些UI库，比如移动端我们经常会选择Vant，在css这块，我们也一般会使用SCSS和LESS这些CSS预处理语言，本实验中我们选择Less。

1.安装 Vant：

yarn add vant@^3.6.2

Vant是有赞开源的一套基于Vue2.0的Mobile组件库。Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以搭建出风格统一的，提升开发效率。通过Vant,可以搭建出风格统一的,提升开发效率。

• 目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。
• Vant旨在更快、更简单地开发基于Vue的美观易用的移动。
• 特性组件都是来源于有赞的微商城业务,并且经过有赞业务的检验,更靠谱完善详实的文档专门的设计师团队维护视觉规范。

(1). 轻量化：
作为移动端组件库，Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的和轻量化之矛盾关系，Vant 内部使用了很多的优化方式，组件按需加载、公共模块复用、组件编译流程优化等。

(2). 丰富实用的业务组件：
Vant 不只是提供基础的UI组件，为了方便开发者构建移动商城，Vant 了许多移动商城内常用的业务组件。类似于地址管理、优惠券、省市县选择等。

(3). 提供了丰富的示例工程，通过示例工程你可以了解如下内容：

• 基于 Vue Cli 和 Vant 搭建应用
• 基于 Nuxt 和 Vant 搭建应用
• 配置按需引入组件
• 配置基于 Rem 的适配方案
• 配置基于 Viewport 的适配方案
• 配置基于 TypeScript 的工程
• 配置自定义主题色方案

2.按需引入组件样式：

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。

相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。

// —D表示安装到开发依赖中
yarn add -D unplugin-vue-components@^0.22.7

本实验是基于 vue-cli 的项目，所以，在根目录下，vue.config.js 文件中配置插件。

// 引入以下2个库
const {
    
     VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
    
    
    devServer: {
    
    
        disableHostCheck: true
    },
    // 增加以下配置
    configureWebpack: {
    
    
      plugins: [
        ComponentsPlugin({
    
    
          resolvers: [VantResolver()],
        }),
      ],
    },
}

完成以上安装和修改配置文件两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。

3. 安装 Less：

Less 是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node.js或浏览器端。

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

yarn add -D less@^3.12.2
yarn add -D less-loader@^7.0.1

在根目录下，vue.config.js 文件中配置less配置。

const {
    
     VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
    
    
    devServer: {
    
    
        disableHostCheck: true
    },
    configureWebpack: {
    
    
      plugins: [
        ComponentsPlugin({
    
    
          resolvers: [VantResolver()],
        }),
      ],
    },
    // 增加less配置
    css: {
    
    
      loaderOptions: {
    
    
        less: {
    
    
          lessOptions: {
    
    
            // 在这里添加自定义的Less配置
          },
        },
      },
    },
}

4. 安装 normalize：
   

Normalize.css 是CSS重置的现代替代方案，可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

一、normalize.css的作用：

• 1、保留有用的默认值，不同于许多 CSS 的重置
• 2、标准化的样式，适用范围广的元素。
• 3、纠正错误和常见的浏览器的不一致性。
• 4、一些细微的改进，提高了易用性。
• 5、使用详细的注释来解释代码。

二、normalize.css样式库特点：

• 1、保护有用的浏览器样式而不是去掉他们。
• 2、一般化的样式：为大部分HTML元素提供。
• 3、修复浏览器自身的bug并保证各浏览器的一致性。
• 4、优化css可用性：用一些小技巧。
• 5、有详细的文档：更容易测试和使用
• 6、模块化： 它已被拆分为多个相关又独立的部分
• 7、注意：Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

三、normalize.css用法：

首先，安装或从Github下载Normalize.css，接下来有两种主要途径去使用它。

• 策略1：将normalize.css作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。
• 策略2：引入normalize.css源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认。

yarn add -D normalize.css@^8.0.1

3.主文件main.js引入相关库和包：

上面我们安装了开发中常用的一些包和库，安装完后，需要在主文件 main.js 进行引入使用。

在 src/main.js 文件中引入包和库。

import {
    
     createApp } from 'vue'
import App from './App.vue'
// 按需引入 Vant
import {
    
     Tabbar, TabbarItem } from 'vant';
import 'vant/es/toast/style'
// CSS 重置的现代替代方案
import 'normalize.css/normalize.css'

// 实例化 Vue 实例
const app = createApp(App)

// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);

// 挂载到 #app 节点
app.mount('#app')

最后，跟着官网的操作，最后成功的将项目运行起来。

---

三、看回播：

腾讯云 Cloud Studio 打造云端全开发新体验，看了这个，也让我结Cloud Studio有了一些了解，从为啥要这样做，到怎么做，再到怎么做好，老师也是讲的比较深入。

针对了4个方向进行了讲解，价值最主要是化繁为简，视屏也讲解了云端开发环境的发展由来，经过了一系列的变化，最后有一些云上的开发需求，在这种情况下，就产出了这个云IDE的价值。

看完直播后，也是收获多多，可以看到大厂，如腾讯对于这个行业的引领，很多直播提到的方案和思路，都是自己以前没有经历过的，也是对大厂有一个向往。那里才是八仙过海，各显身手。

---

四、Cloud Studio介绍：

云端 IDE （ Cloud Studio ）是腾讯云为编程者打造的专属开发利器，开发者无需考虑编程本身以外的限制，无缝对接部署至腾讯云，还有协作、团队管理等功能强势辅助，让开发者安心高效编程。

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个稳定的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能使用。其功能包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。

使用 Cloud Studio 的预置环境，您可以直接创建对应类型的工作空间，快速启动项目进入开发状态，无需进行繁琐的环境配置。

Cloud Studio支持多种前端框架和库，例如React、Vue.js、Angular、Node等。在开发过程中，我们可以通过使用这些框架和库来快速搭建出响应式、高效的前端界面。