【腾讯云 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 blog
 npm run dev

报错信息

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

bash 复制代码
blog git:(master) ✗ npm run dev 

> blog@1.0.0 dev
> nuxt

internal/modules/cjs/loader.js:892
  throw 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.js
    at 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 缓存:
bash 复制代码
npm cache clean --force
  1. 删除 package-lock.json 文件和 node_modules 目录:在项目根目录下执行以下命令删除 package-lock.json 文件和 node_modules 目录:
bash 复制代码
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

vue 复制代码
<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>

首页配置

html 复制代码
<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-image
                style="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

相关推荐
何遇mirror3 小时前
云原生基础-云计算概览
后端·云原生·云计算
嚯——哈哈5 小时前
轻量云服务器:入门级云计算的最佳选择
运维·服务器·云计算
请你喝好果汁6415 小时前
Kingfisher 下载ENA、NCBI SRA、AWS 和 Google Cloud)序列数据和元数据
云计算·aws
九陌斋5 小时前
如何使用AWS Lambda构建一个云端工具(超详细)
云计算·aws
嚯——哈哈5 小时前
AWS云服务器:开启高效计算的新纪元
服务器·云计算·aws
徒步僧5 小时前
ThingsBoard规则链节点:AWS SNS 节点详解
云计算·aws
九河云5 小时前
如何对AWS进行节省
大数据·云计算·aws
Akamai中国1 天前
出海第一步:搞定业务系统的多区域部署
开发语言·网络·架构·云计算·智能路由器·云服务·云平台
hotlinhao1 天前
阿里云IIS虚拟主机部署ssl证书
阿里云·云计算·ssl
天草二十六_简村人1 天前
Java语言编程,通过阿里云mongo数据库监控实现数据库的连接池优化
java·jvm·数据库·mongodb·阿里云·微服务·云计算