【腾讯云 Cloud Studio 实战训练营】沉浸式体验编写一个博客系统

文章目录

  • 前言
  • 新建工作空间
    • 登录(注册)Cloud Studio 账号:
    • 进入 Cloud Studio 控制台:
    • 配置工作空间参数:
    • 确认并创建工作空间:
    • 项目搭建
  • 配置nuxt 脚手架
  • 运行项目
    • 报错信息
    • 解决错误
    • 脚手架运行预览
      • 问题
  • 开启博客代码
    • 配置layout
    • 首页配置
  • 效果预览
  • 上传代码到coding
    • 设置coding 邮箱和账号
    • git 提交
  • 总结说明
    • 缺陷
      • 链接图片不显示
      • 终端启动项目
      • 关闭端口弹窗问题
      • 文件同步运行问题
      • 安装脚手架
    • 优点
  • 资源
    • 项目coding 地址
    • Cloud Studio 地址

前言

欢迎参加腾讯云 Cloud Studio 实战训练营!在本次训练营中,我们将通过沉浸式体验,带您一步步编写一个基于 Nuxt.js 的静态博客系统。无论您是初学者还是有一定编程经验的开发者,本训练营都将为您提供一个深入了解和掌握 Nuxt.js 技术以及静态网站开发的机会。
使用 Nuxt.js 作为前端框架,我们将能够充分利用其强大的功能和优势,快速搭建一个高效、可扩展的静态博客系统。Nuxt.js 是基于 Vue.js 的服务端渲染框架,结合了单页应用程序(SPA)和静态生成模式(SSG),使得我们可以轻松构建出具有良好用户体验的博客系统。

在这个过程中,您将学习到

  1. 如何使用Cloud Studio 进行项目开发
  2. Cloud Studio 项目如何链接到coding 作为项目的管理仓库
  3. 如和使用python 来爬取你的csdn 博客信息
  4. Nuxt.js 的安装和基本配置:了解如何创建一个新的 Nuxt.js 项目,以及对其基本配置进行调整。
  5. 页面和路由设计:学习如何使用 Nuxt.js 创建不同的页面,以及如何配置路由,实现页面之间的导航。

新建工作空间

参考以下步骤来创建一个属于你自己的工作空间

登录(注册)Cloud Studio 账号:

打开Cloud Studio网址(https://cloudstudio.net/),有三种注册登录方式 , 选择一种即可

在这里插入图片描述

进入 Cloud Studio 控制台:

点击左下角的 新建工作空间

在这里插入图片描述

配置工作空间参数:

在弹出的创建工作空间窗口中,您需要进行以下配置:

  • 空间名称
  • 空间描述
  • 工作类别
  • 代码来源
  • 选择仓库服务商
  • 开发环境
  • 规格配置
    注意 这里我选择的是coding 作为仓库服务商, 因此需要自己注册一个coding 账户, 这里不做详细讲解
    如图 输入coding的域名前缀就可以了

在这里插入图片描述
完整配置

在这里插入图片描述

确认并创建工作空间:

完成上述配置后,点击 “创建” 按钮确认创建新的工作空间, 你会惊喜的发现 这个与vscode 惊人的相似

在这里插入图片描述

项目搭建

接下来就开始进行项目搭建环节

配置nuxt 脚手架

使用命令 npx create-nuxt-app <项目名> 创建一个nuxt 的脚手架

掉出终端 , 输出 指令 回车运行, 等待项目下载

在这里插入图片描述

成功搭建后效果图, 以及脚手架配置

在这里插入图片描述

运行项目

运行项目的指令

 cd blognpm run dev

报错信息

运行时我发现了一个错误,如下所示

blog git:(master)npm run dev > blog@1.0.0 dev
> nuxtinternal/modules/cjs/loader.js:892throw err;^Error: Cannot find module 'node:util'
Require stack:
- /workspace/myblog/blog/node_modules/consola/dist/shared/consola.deac7d5a.cjs
- /workspace/myblog/blog/node_modules/consola/dist/shared/consola.4bbae468.cjs
- /workspace/myblog/blog/node_modules/consola/dist/index.cjs
- /workspace/myblog/blog/node_modules/consola/lib/index.cjs
- /workspace/myblog/blog/node_modules/@nuxt/utils/dist/utils.js
- /workspace/myblog/blog/node_modules/@nuxt/cli/dist/cli-index.js
- /workspace/myblog/blog/node_modules/@nuxt/cli/dist/cli.js
- /workspace/myblog/blog/node_modules/nuxt/bin/nuxt.jsat Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)at Function.Module._load (internal/modules/cjs/loader.js:745:27)at Module.require (internal/modules/cjs/loader.js:961:19)at require (internal/modules/cjs/helpers.js:92:18)at Object.<anonymous> (/workspace/myblog/blog/node_modules/consola/dist/shared/consola.deac7d5a.cjs:3:19)at Module._compile (internal/modules/cjs/loader.js:1072:14)at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)at Module.load (internal/modules/cjs/loader.js:937:32)at Function.Module._load (internal/modules/cjs/loader.js:778:12)at Module.require (internal/modules/cjs/loader.js:961:19) {code: 'MODULE_NOT_FOUND',requireStack: ['/workspace/myblog/blog/node_modules/consola/dist/shared/consola.deac7d5a.cjs','/workspace/myblog/blog/node_modules/consola/dist/shared/consola.4bbae468.cjs','/workspace/myblog/blog/node_modules/consola/dist/index.cjs','/workspace/myblog/blog/node_modules/consola/lib/index.cjs','/workspace/myblog/blog/node_modules/@nuxt/utils/dist/utils.js','/workspace/myblog/blog/node_modules/@nuxt/cli/dist/cli-index.js','/workspace/myblog/blog/node_modules/@nuxt/cli/dist/cli.js','/workspace/myblog/blog/node_modules/nuxt/bin/nuxt.js']
}
➜  blog git:(master)

解决错误

根据错误信息显示,是找不到模块 ‘node:util’,导致引发了错误。

可以尝试以下办法解决

根据错误信息显示,依然是找不到模块 ‘node:util’,导致引发了错误。这可能是由于依赖关系问题或缺失的模块引起的。

您可以尝试以下步骤来解决这个问题:

  1. 清除 npm 缓存:在终端中执行以下命令清除 npm 缓存:
npm cache clean --force
  1. 删除 package-lock.json 文件和 node_modules 目录:在项目根目录下执行以下命令删除 package-lock.json 文件和 node_modules 目录:
rm package-lock.json
rm -rf node_modules
  1. 更新node 版本到19.0.0

    操作步骤如下:

    • nvm ls
    • nvm install 19.0.0
    • nvm use 19.0.0
  2. 重新安装依赖

    • npm install
  3. 运行项目

    • npm run dev
      在这里插入图片描述

脚手架运行预览

在这里插入图片描述

问题

这里直接访问 http://172.16.21.246:3000/ 是不行的 有点击弹窗的信息进行访问, 如图
在这里插入图片描述

开启博客代码

配置layout

<template><div><el-card class="nav"><h1>若城的博客</h1><div class="left"><el-row :gutter="20"><el-col :span="8"><span class="mynav">首页</span></el-col><el-col :span="8"><span class="mynav">博客相册</span></el-col><el-col :span="8"><span class="mynav">关于我</span></el-col></el-row></div><div class="right"><el-row :gutter="20"><el-col :span="12"><span class="mynav">登录</span></el-col><el-col :span="12"><span class="mynav">注册</span></el-col></el-row></div></el-card><nuxt /></div>
</template>
<style lang="scss" scoped>.nav{}h1{height: 30px;line-height: 30px;}::v-deep .el-card__body{display: flex;justify-content: space-between;}.left{width: 30%;}.right{width: 10%;}
</style>

首页配置

<template><div class="container"><el-container><el-aside width="500px"><el-card class="box-card"><div slot="header"><span>关于我</span></div><div class="wrapper"><div class="image"><el-avatar shape="square" :size="200" :src="pho"></el-avatar></div><div class="text">{{aboutMe}}</div></div></el-card></el-aside><el-main><el-card v-for="(item, index) in blogJson" :key="index"><el-row :gutter="20"><el-col :span="20" class="mycol"><h3 @click="handleLink(item.blogLink)">{{ item.title }}</h3><p>{{ item.desc }}</p></el-col><el-col :span="4"><el-imagestyle="width: 100px; height: 100px":src="item.imgLink"fit="fill"></el-image></el-col></el-row></el-card></el-main></el-container></div>
</template><script>
import pho from "../assets/img/1.jpg";
import blogJson from "../assets/result.json";
export default {layout: "Myblog",data() {return {pho,blogJson,aboutMe: `大家好,我是一名专注于 Python 和前端技术的技术讲解者。我擅长将复杂的技术概念转化为简单易懂的语言,帮助初学者快速入门,并满足高级开发者对更深入理解的需求。 作为一位资深的 Python 开发者,我具备广泛的编程经验和深厚的技术功底。我熟练掌握 Python 语言的各种特性和库,能够灵活运用它们解决实际问题。不论是爬虫、数据分析、后端开发还是机器学习,我都能够提供高效、可靠的解决方案。如果你对 Python 或前端技术有任何疑问或需要帮助,欢迎与我联系。无论是入门指导、项目建议还是技术咨询,我都会竭诚为您提供帮助。让我们一起探索技术的魅力,共同成长和进步!`,};},methods: {handleLink(item){//  window.location.href = window.open(item, "_blank")}},
};
</script>
<style lang="scss" scoped>
// .box-card{
//    padding: 30px 0px 30px 0;
// }
.wrapper {overflow: hidden; /* 确保容器可以包含浮动元素 */width: 500px; /* 文字区域宽度 */
}.text {
}.image {width: 200px;height: 200px;border-radius: 50%;overflow: hidden;border: 2px solid #f0f0f0;float: left;shape-outside: circle();
}
.mycol{cursor: pointer;
}
::v-deep .el-card {margin-bottom: 20px;
}
</style>

效果预览

在这里插入图片描述

上传代码到coding

设置coding 邮箱和账号

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

git 提交

1.在我们的命令编辑器里初始化项目 git init
2.git add .
3.git commit -m ‘备注’
4.git remote add origin git@gitee.com:shiqingqing/test.git
5.git pull origin master
6.开始上传 输入git push -u origin master 这里可能会报错 所以建议不用这句 直接使用git push -u origin master -f 强制上传

总结说明

到目前位置 基本上已经将项目搭建完成了, 不过在使用Cloud Studio 的过程中确实存在一些问题,总结如下

缺陷

链接图片不显示

如图我的imgLink 是有效的https 地址 , 但是 实际上运行之后并没有显示出来, 随后我又换了几种方式,发现都不显示, 很难受

在这里插入图片描述

终端启动项目

我这个是nuxt项目, 终端启动的时候 会有默认的请求地址, 但是 这个地址并不生效, 相反需要打开终端弹窗的按钮才可以访问, 访问的地址与我自己监听的地址也不一样, 完全不符合习惯, 如图
在这里插入图片描述

关闭端口弹窗问题

启动项目之后关闭终端弹窗之后 , 就找不到这个弹窗了, 不知在哪里找到, 除非重启项目

文件同步运行问题

编辑文件的时候自动保存, 导致终端会热更新, 显得很乱, 而且出现的报错也很严重, 比如我一个闭合还没敲,但是终端已经运行了, 这时就会报错, 很难受啊

安装脚手架

在安装脚手架的时候,非常费时间,等了好久,希望可以改进下

优点

在安装项目的时候 , 我发现使用的node 版本不对但是, 我不清楚Cloud Studio 是否有nvm 版本管理工具, 尝试的敲了一下 nvm ls 发现, 竟然贴心的安装了nvm 版本控制, 这个很细节很好.
当然Cloud Studio 还有很多其他优点, 期待大家一起去体验感受一下哦!

资源

项目coding 地址

blog项目地址

Cloud Studio 地址

Cloud Studio

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/9101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python - OpenCV、OCR识别摄像头中的文字

使用Python3的OpenCV库来识别摄像头中的文字&#xff0c;以及使用OCR&#xff08;光学字符识别&#xff09;技术。 安装OpenCV库 在命令行中输入以下命令来安装OpenCV库&#xff1a; pip install opencv-python安装Tesseract OCR库 Tesseract OCR库是一种免费的光学字符识别…

JVM理论(六)执行引擎--垃圾回收

概述 垃圾: 指的是在运行程序中没有任何指针指向的对象垃圾回收目的: 为了及时清理空间使得程序可以正常运行垃圾回收机制: JVM采取的是自动内存管理,即JVM负责对象的创建以及回收,将程序员从繁重的内存管理释放出来,更加专注业务的开发垃圾回收区域: 频繁收集Young区(新生代)…

Docker运行MySQL5.7

步骤如下&#xff1a; 1.获取镜像&#xff1a; docker pull mysql:5.7 2.创建挂载目录&#xff1a; mkdir /home/mydata/data mkdir /home/mydata/log mkdir /home/mydata/conf 3.先启动docker把配置文件拷贝出来&#xff1a; docker run -it --name temp mysql:5.7 /bi…

配置IPv4 over IPv6隧道示例

IPv4 over IPv6隧道&#xff1a; 在IPv4 Internet向IPv6 Internet过渡后期&#xff0c;IPv6网络被大量部署后&#xff0c;而IPv4网络只是散布在世界各地的一些孤岛。利用隧道技术可以在IPv6网络上创建隧道&#xff0c;从而实现IPv4孤岛的互联&#xff0c;IPv4孤岛能通过IPv6公…

2023-07-26力扣每日一题-区间翻转线段树

链接&#xff1a; 2569. 更新数组后处理求和查询 题意&#xff1a; 给两个等长数组nums1和nums2&#xff0c;三个操作&#xff1a; 操作1&#xff1a;将nums1的[l,r]翻转&#xff08;0变1,1变0&#xff09; 操作2&#xff1a;将nums2[any]变成nums2[any]nums1[any]*p&…

MFC CList 类的使用

MFC提供CList 类&#xff1b; 类CList支持可按顺序或按值访问的非唯一对象的有序列表&#xff1b;CList 列表与双链接列表行为相似&#xff1b; 类型POSITION的变量是列表的关键字&#xff1b;可使用POSITION变量作为循环因子来顺序遍历列表&#xff0c;作为书签来保存位置&am…

使用序列化和反序列化函数archivedDataWithRootObject和unarchivedObjectOfClasses的使用和遇到问题及解决方案

为何archiveRootObject和unarchiveObjectWithFile正常&#xff0c;而archivedDataWithRootObject和unarchivedObjectOfClasses一直报错。 [NSKeyedArchiver archiveRootObject:account toFile:path];和c PPAccountModel *account [NSKeyedUnarchiver unarchiveObjectWithFile:…

Linux内核的PCI 框架

Linux内核的PCI框架是一个相对独立的子系统&#xff0c;负责管理PCI&#xff08;Peripheral Component Interconnect&#xff0c;外围设备互联&#xff09;硬件总线。该框架主要包括以下模块和功能&#xff1a; PCI核心框架&#xff1a;负责PCI总线的初始化&#xff0c;并提供…

自动驾驶数据标注有哪些?

自动驾驶汽车&#xff1a;人工智能(AI)的焦点 人工智能驱动汽车解决方案的市场规模预计到 2025年将增长十倍以上&#xff0c;提升车内体验的商机领域以及 AI 模型的无偏见训练数据的重要性。在本篇中&#xff0c;我们将介绍车外体验的关键组成部分&#xff0c;以及自动驾驶数据…

LLM 基础-transformers 库快速入门

一,Transformers 术语 1.1,token、tokenization 和 tokenizer1.2,input IDs1.3,attention mask1.4,bos_token、eop_token、pad_token、eos_token1.5,decoder models1.6,架构与参数二,Transformers 功能 API 概述三,快速上手 3.1,transformer 模型类别3.2,Pipeline&l…

React.js 中用于高质量应用程序的最佳实践和设计模式

原文&#xff1a;Best Practices and Design Patterns in React.js for High-Quality Applications&#xff0c;适当增删 原作者&#xff1a;Ori Baram 文章已获原文作者授权&#xff0c;禁止转载和商用 1. 构建可扩展的React应用程序最佳实践 1.1 目录结构 不按文件类型对组…

01背包相关题

题解&#xff1a;dp[j]表示目标和为j时的最大组合种数 class Solution { public:int dp[1005];int findTargetSumWays(vector<int>& nums, int target) {int val;int sum0;for(int i0;i<nums.size();i){sumnums[i];}int wsumtarget;if(w%21){return 0;}else{valw…

Java基础-泛型、形变和GC

Java基础-泛型、形变和GC 本文链接&#xff1a;https://blog.csdn.net/feather_wch/article/details/131948105 泛型、形变 1、Gson中TypeToken的作用是什么&#xff1f;是如何获得泛型的类型信息的&#xff1f; TypeToken利用匿名内部类会持有泛型的类型信息&#xff0c;在…

区间预测 | MATLAB实现QRGRU门控循环单元分位数回归多输入单输出区间预测

区间预测 | MATLAB实现QRGRU门控循环单元分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRGRU门控循环单元分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 MATLAB实现QRGRU门控循环单元分位数回归分位数回归多输入单输出区间…

微服务Day4——Docker

一、什么是Docker 微服务虽然具备各种各样的优势&#xff0c;但服务的拆分通用给部署带来了很大的麻烦。 分布式系统中&#xff0c;依赖的组件非常多&#xff0c;不同组件之间部署时往往会产生一些冲突。在数百上千台服务中重复部署&#xff0c;环境不一定一致&#xff0c;会…

npm 安装报错:源文本中存在无法识别的标记

npm install -g vue/cli 源文本中存在无法识别的标记。 所在位置 行:1 字符: 16 npm install -g <<<< vue/cli CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException FullyQualifiedErrorId : UnrecognizedToken 解决方…

064、故障处理之OMM_TiDB

oom 内存溢出&#xff0c;内存泄漏&#xff0c;相当于TiDB不能用了 TiDB Server OOM对业务的影响 TiDB Server上的业务SQL会失败业务响应时间升高前端体验变差 诊断方法 客户端应用 ERROR 2013(HY000): Lost connection to MySQL Server during query日志 dmesg -T | gr…

ARM——点灯实验

循环点灯 RCC寄存器使能GPIOE、GPIOF组寄存器 修改GPIOx组寄存器下的值 通过GPIOx_MODER寄存器设置为输出模式通过GPIOx_OTYOER寄存器设置为推挽输出类型通过GPIOx_OSPEEDR寄存器设置为低速输出通过GPIOx_PUPDR寄存器设置为禁止上下拉电阻点灯 通过GPIOx_ODR寄存器设置为高电…

excel中的vlookup如何实现根据多个条件查找?

目录 简述问题公式思路通用公式三条件查找公式实例 简述 Excel 中根据一个条件查找非常方便&#xff0c;Excel 提供了内置函数 VLOOKUP。但是实际中往往有多种情形&#xff0c;需要根据多个条件进行查找操作&#xff0c;目前没有现成的内置函数。 本篇介绍 VLOOKPCHOOSE 组合…

Craps赌博游戏问题C语言

说明一个简单的赌博游戏&#xff0c;游戏规则如下&#xff1a;玩家掷两个骰子&#xff0c;点数为1到6&#xff0c;如果第一次点数和为7或11&#xff0c;则玩家胜&#xff0c;如果点数和为2、3或12&#xff0c;则玩家输&#xff0c;如果和 为其它点数&#xff0c;则记录第一次的…