...新手小试使用Cloud Studio 搭建移动端 H5 页面(Vue框架)_百度...
发布网友
发布时间：2024-09-30 18:08
共1个回答
热心网友
时间：2024-09-30 21:29
Cloud Studio申请地址：cloudstudio.net/
注册登录：这里注册和登录Cloud Studio非常方便，提供了三种注册方式。
选择模板：Cloud Studio控制台中罗列了常见的集成开发环境，支持了40+的多种模板（框架模板、云原生模板、建站模板），单击所需模板卡片即可进入对应环境中，也可以选择新建工作空间中的云服务器模式，连接云服务器进行开发环境搭建。
这里我们选择Vue来实现，Vue是一款用于构建用户界面的JavaScript框架，它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，具有丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。
点击Vue.js模板卡片，进入集成环境加载页面，加载成功后即可进入开发环境进行编程。
点击后做个实名认证后加载IDE界面并自动打开README预览界面，整个IDE开发环境布局与VScode基本一致。
启动后当前路径：/workspace/vuepress-deploy
当前用户：root
当前磁盘空间：7G
当前node.js版本：v18.13.0
1. 安装相关依赖包（1）安装 Vant: 版本3.6.12
Yarn是由Facebook、Google、Exponent、Tilde联合推出的一种新的Javascript包管理工具，通过它使用全世界开发者的代码，或者分享自己的代码给全世界的开发者。
（2）按需引入组件样式
（3）在根目录下vite.config.js文件中配置插件
在项目根目录新建vite.config.js文件，填写配置信息如下：
完成以上安装和修改配置文件两步，就可以直接在模板中使用Vant组件了，unplugin-vue-components会解析模板并自动注册对应的组件。
（4）安装Less
（5）修改js配置文件增加less的配置
（6）安装normalize
Normalize.css是CSS重置的现代替代方案，可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
2. 主文件main.js引入相关库和包
js的编程风格跟python很像，也许是python的编程风格类似js吧。
3.首页index.html增加移动端默认样式
4. src/App.vue增加主要代码
想当初e租宝就在我那家公司楼上，暴雷后楼下停着好多警车，e租宝的大玻璃门也被封条封上了。；-)
5. 执行查看效果
在控制台输入命令
yarn run dev --host 0.0.0.0 --port=5173
右侧窗口会弹出demo预览界面
点击打开“toggle device”按钮(页面右上角红框)即可模拟手机打开的页面样式
复制内置Chrome浏览器窗口的地址栏可以分享给团队的其它成员，还免去了部署nginx的繁琐配置。
代码上传版本库
由于Cloud Studio本身不能保存代码，当网络中断或无操作超时退出后，重新连接会重置IDE开发环境，安装过的包必须重新安装。因此，必须有一个代码托管地方。这里可以选择发布到CODING平台或github上进行代码托管。
github托管（1）初始化仓库
在Cloud Studio新建终端，使用命令进行git初始化仓库。
(2) 发布GitHub
点击“Publish Branch” -> 选择"Publish To Github"
编辑提示“扩展Github希望使用GitHub登录” -> 点击"允许"，会打开一个新的页面进行Github授权，授权完后再跳回原页面。 点击“Publish Branch” -> 选择"Publish To Github private repository"
CODING托管（1）在coding新建项目和团队 ： coding.net/
（2）在Cloud Studio选择publish to coding
（3）输入CODING账户的团队域名前缀
CODing中查看团队域名前缀
我的名称是：metaofmeta，会弹出授权页面授权成功后，选择你要推送的刚刚创建的项目：
（5）代码发布
等待一会代码发布至CODing成功！
在CODING下就能看到你项目对应代码了！
