一、前言:
“腾讯云 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 会解析模板并自动注册对应的组件。
- 安装 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配置
},
},
},
},
}
- 安装 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等。在开发过程中,我们可以通过使用这些框架和库来快速搭建出响应式、高效的前端界面。