汽车网站建设论文,网站26个页面收费,wordpress 临时文件夹,做网站可以申请国家补助吗#x1f431; 个人主页#xff1a;不叫猫先生#xff0c;公众号#xff1a;前端舵手 #x1f64b;♂️ 作者简介#xff1a;2022年度博客之星前端领域TOP 2#xff0c;前端领域优质作者、阿里云专家博主#xff0c;专注于前端各领域技术#xff0c;共同学习共同进步… 个人主页不叫猫先生公众号前端舵手 ♂️ 作者简介2022年度博客之星前端领域TOP 2前端领域优质作者、阿里云专家博主专注于前端各领域技术共同学习共同进步一起加油呀 优质专栏vue3vitetypeScript从入门到实践 资料领取前端进阶资料可以找我免费领取 摸鱼学习交流我们的宗旨是在「工作中摸鱼摸鱼中进步」期待大佬一起来摸鱼(文末有我wx或者私信) 目录 一、写在前面二、腾讯云 Cloud Studio云端 IDE1、应用场景1在线编程2腾讯云 SCF 平台集成2、产品优势 三、构建移动端H51、注册2、创建模版3、模版初始化4、开发移动端H5项目5、源代码管理 四、常见问题五、相关链接 一、写在前面
云端 IDE在很多场景都有应用比如githup等平台都有集成。另外云端 IDE之前我也接触过类似的并且也集成在了我们自己项目中。但是功能并不是很完善可以进行在线开发提交代码。但是整体效果并不是很佳。了解到腾讯云 Cloud studio发现这个云端 IDE功能很多并且十分稳定。
二、腾讯云 Cloud Studio云端 IDE
腾讯云云端开发环境 Cloud Studio 是基于浏览器的集成式开发环境Integrated Development EnvironmentIDE为开发者提供了一个稳定的云端工作站。用户在使用 Cloud Studio 时无需安装随时随地打开浏览器就能使用。其功能包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能同时支持实时调试、插件扩展等可以帮助开发者快速完成各种应用的开发、编译与部署工作。
1、应用场景
1在线编程
Cloud Studio 内置丰富的开发环境无需配置即可使用只需打开浏览器即可拥有完备的线上编程体验基于 Web 端的代码编辑器简洁的界面与全面的功能非常适合在线施展编码潜能。
2腾讯云 SCF 平台集成
Cloud Studio 支持在线编辑、在线调试、持久化资源为腾讯云 SCF 行业用户提供开发、测试到部署完整闭环的云原生开发体验。
2、产品优势
Cloud Studio 是腾讯云为用户打造的云端集成开发环境其产品优势如下所示 全功能 无需下载安装随时随地开发编码拥有媲美本地 IDE 的流畅编码体验。 多环境 内置 Node.js、Java、Python 等常见环境也可以连接到云服务器进行资源管理。 在线预览 在线预览快速生成预览链接方便分享他人展示项目或在线调试。 兼容 VS Code 插件 默认的配置无法满足需求可以在线安装 VS Code 插件来增强使用体验。 持久化和快速加载 随开随写随时保存再也无需担心断电未保存不浪费您的每一份灵感。
三、构建移动端H5
我们用云 IDE Cloud Studio 快速搭建还原一个移动端 H5 的页面这里我们打算使用Vue3来实现体验云 IDE 给我们带来的优势。最终结果如下图所示
1、注册
腾讯云 Cloud studio官网注册账号即可这里注册和登录 Cloud Studio 非常方便提供了三种注册方式
使用 CODING 账号注册使用微信授权注册使用 GitHub 授权注册本文使用方式 在这里插入图片描述
2、创建模版
Cloud Studio 控制台中罗列了常见的集成开发环境支持了40的多种模板框架模板、云原生模板、建站模板单击所需模板卡片即可进入对应环境中也可以选择新建工作空间中的云服务器模式连接云服务器进行开发环境搭建。这里我们选择Vue项目模版。
3、模版初始化
创建模版成功后会进行模版初始化会自动加载我们需要依赖然后我们启动项目
yarn dev接下来就看到项目的预览效果如下 4、开发移动端H5项目
1安装vant
yarn add vant^3.6.122按需引入组件样式 在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时可以使用 unplugin-vue-components 插件它可以自动引入组件并按需引入组件的样式。 相比于常规用法这种方式可以按需引入组件的 CSS 样式从而减少一部分代码体积但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致我们推荐使用更简便的常规用法。
// —D表示安装到开发依赖中
yarn add -D unplugin-vue-components^0.22.7需要配置下vite.config.js文件如下
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
// 引入以下2个库
import Components from unplugin-vue-components/vite;
import { VantResolver } from unplugin-vue-components/resolvers;// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 增加以下配置Components({// 不生成类型声明文件自己写dts: false,// 样式需要单独引入resolvers: [VantResolver({ importStyle: false })]}),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
})3安装 Less Vite 和 Webpack 不同不需要 less-loader 等只需安装 less
yarn add -D less^3.12.2vite.config.js文件需要增加以下配置
// 增加以下css配置代码css: {preprocessorOptions: {less: {javascriptEnabled: true,},},},4安装 normalize Normalize.css 是CSS重置的现代替代方案可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。
yarn add -D normalize.css^8.0.15main.js引入相关库和包 import { createApp } from vue
import App from ./App.vue
// 按需引入 Vant
import { Tabbar, TabbarItem } from vant;
import vant/lib/index.css
// CSS 重置的现代替代方案
import normalize.css/normalize.css// 实例化 Vue 实例
const app createApp(App)// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);// 挂载到 #app 节点
app.mount(#app)6移动端适配
!DOCTYPE html
html langenheadmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0titleVite App/title/headbodydiv idapp/divscript typemodule src/src/main.js/script!-- built files will be auto injected --script// rem定义/*720代表设计师给的设计稿的宽度你的设计稿是多少就写多少;100代表换算比例*/getRem(375, 100);window.onresize function() {getRem(375, 100);};function getRem(pwidth, prem) {var html document.getElementsByTagName(html)[0];var oWidth document.documentElement.clientWidth || document.body.clientWidth;html.style.fontSize (oWidth / pwidth) * prem px;}// 安卓机中默认字体大小不让用户修改;(function () {if (typeof WeixinJSBridge object typeof WeixinJSBridge.invoke function) {handleFontSize()} else {if (document.addEventListener) {document.addEventListener(WeixinJSBridgeReady, handleFontSize, false)} else if (document.attachEvent) {document.attachEvent(WeixinJSBridgeReady, handleFontSize)document.attachEvent(onWeixinJSBridgeReady, handleFontSize)}}function handleFontSize() {// 设置网页字体为默认大小WeixinJSBridge.invoke(setFontSizeCallback, {fontSize: 0,})// 重写设置网页字体大小的事件WeixinJSBridge.on(menu:setfont, function () {WeixinJSBridge.invoke(setFontSizeCallback, {fontSize: 0,})})}})()/script/body
/html7App.vue业务代码
templatediv classcontainervan-nav-bartitlee租宝案left-arrow/div classlist_boxdiv classlistdiv classlist-head开庭前准备 5/divdiv classlist_itemdiv classlist_item-headvan-checkbox v-modelradio shapesquare核对证据原件并存档/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--gray03-28 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/divdiv classlist_item list_item--bluediv classlist_item-headvan-checkbox v-modelradio1 shapesquare调取并查阅案卷/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--blue下周一 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/divdiv classlist_item list_item--orangediv classlist_item-headvan-checkbox v-modelradio2 shapesquare领取传票并通知委托人/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--orange明天 17:00 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/divdiv classlist_item list_item--reddiv classlist_item-headvan-checkbox v-modelradio3 shapesquare写委托书/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--red2019-2-12 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/div/div/divvan-tabbar v-modelactivevan-tabbar-item iconcomment-o名片夹/van-tabbar-itemvan-tabbar-item iconshop-o官网/van-tabbar-itemvan-tabbar-item iconuser-o我的/van-tabbar-item/van-tabbar/div
/templatescript
export default {name: App,data() {return {active: 0,radio: false,radio1: false,radio2: false,radio3: false,};},
};
/scriptstyle langless
html,
body {// font-family: PingFangSC-Medium, PingFang SC, Arial, Microsoft Yahei, sans-serif;font-family: Arial, Microsoft Yahei, sans-serif;font-size: 0.14rem;// line-height: 0.24rem;color: #333;background: #f9f9f9;// iPhone 横屏默认会放大文字设置text-size-adjust会解决这个问题-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;text-size-adjust: 100% !important;
}* {outline-style: none !important;
}
/stylestyle langless scoped
.container {position: relative;min-height: 100vh;padding-bottom: 0.5rem;background: #fff;
}.list_box {padding: 0.2rem 0.1rem;box-sizing: border-box;.list {padding: 0.1rem 0.1rem 0.3rem;box-sizing: border-box;background: #f4f4f4;width: 100%;border-radius: 3px;-head {padding: 16px 15px 12px 0;box-sizing: border-box;font-size: 0.16rem;}}
}.list_item {background: #fff;padding: 0.1rem;box-sizing: border-box;border-radius: 3px;margin-bottom: 0.1rem;--gray {background: #cccccc;}--blue {border-left: 2px solid #75A8F7;}--orange {border-left: 2px solid #E8A743;}--red {border-left: 2px solid #E8311F;}-head {display: flex;align-items: center;justify-content: space-between;_name {display: flex;align-items: center;-tag {width: 6px;height: 6px;background: #5F8DD8;border-radius: 50%;margin-right: 0.05rem;}-text {font-size: 0.12rem;color: #989A9C;}}}-info {padding-top: 8px;padding-left: 25px;display: flex;align-items: center;_img {width: 20px;height: 20px;margin-right: 10px;}_tag {padding: 0 5px;box-sizing: border-box;height: 18px;line-height: 18px;background: #989A9C;border-radius: 3px;margin-right: 10px;color: #fff;font-size: 0.1rem;--gray {background: #cccccc;}--blue {background: #75A8F7;}--orange {background: #E8A743;}--red {background: #E8311F;}}_clock {width: 10px;height: 10px;}}
}
/styleCloud Studio 内置预览插件可以实时显示网页应用当代码发生改变之后预览窗口会自动刷新即可在 Cloud Studio 内实时开发调试网页了还提供了二唯码在手机端进行调试。 因为本项目是移动端H5的项目所以需要打开“toggle device”按钮查看样式。
8预览结果 重新启动项目
yarn dev然后就可看到最先提到的预览图我们也可以分享项目的地址链接我的如下https://tbnhxp-xdiocx-5173.preview.myide.io在网页中显示如下 5、源代码管理
这里使用CODING对代码进行管理首先需要注册CODING然后创建项目 1注册 2创建项目 3CODING与腾讯云关联 进入对应的项目点击“Cloud Studio”可以看出 Coding 平台是直接无缝集成 Cloud Studio 的。 4授权
5Cloud studio中选择源码管理侧边栏然后点击【发布到CODING储存库】
6选择账户 7推送 8查看项目
四、常见问题
1 Cloud Studio 支持哪些语言环境 Cloud Studio 目前支持 Python、Java、Node.js 等语言环境我们还在不断扩展。
2Cloud Studio 可以用来做什么 Cloud Studio 可以用来开发中小型项目在线修改代码或者连接云服务器进行部署工作。
3为什么我无法连接自己的云服务器 如果您在创建运行环境为云服务器的工作空间时看到连接不上的提示可以检查下列几项
确定该云服务器正在运行中且可以使用 SSH 连接。确定该云服务器的 SSH 连接端口没被防火墙拦截。 确认云服务器 IP、用户名和端口都填写正确。确定已经将 Cloud Studio 公钥添加至云服务器 ~/.ssh/authorized_keys 文件中。确认 authorized_key 文件权限为600。尝试删除 Cloud Studio 资源目录,具体命令为 rm -rf ~/.coding-cloudstudio然后重新进入工作空间进行一键修复。
4支持连接的云服务器有哪些 Cloud Studio 目前支持64位 Ubuntu 16.04/18.04 和 CentOS 7。
5目前 Cloud Studio 兼容的 VS Code 版本 目前工作空间兼容 VS Code 1.56。
6为什么云服务器工作空间会出现频繁的断线重新 目前由于云服务器工作空间的流量是由 Cloud Studio 服务器进行代理访问路径为本地机器 Cloud Studio 代理服务器 云服务器 会导致 Cloud Studio 由于网络环境的情况导致连接不稳定。目前 Cloud Studio 已经在优化访问路径为本地机器 云服务器以此来提高连接稳定性。
五、相关链接
活动详情介绍 活动报名页面 Cloud Studio产品体验地址 Cloud Studio产品文档
