第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例:深度解析响应式布局支持

传奇开心果系列

  • 系列博文目录
    • Vant开发移动应用示例系列
  • 博文目录
    • 前言
    • 一、Vant响应式布局介绍
    • 二、媒体查询实现响应式布局示例代码
    • 三、短点设置实现响应式布局示例代码
    • 四、响应式工具类实现响应式布局示例代码
    • 五、栅格系统实现响应式布局示例代码
    • 六、响应式组件实现响应式布局示例代码
    • 七、内置的媒体查询工具类来设置样式实现响应式布局示例代码
    • 八、自定义断点设置实现响应式布局示例代码
    • 九、Flex实现响应式布局示例代码
    • 十、归纳总结

系列博文目录

Vant开发移动应用示例系列

博文目录

前言

在这里插入图片描述Vant提供了响应式布局的支持,可以根据不同的手机屏幕尺寸自动适配布局,使得组件在不同的终端上都能够呈现良好的展示效果。

一、Vant响应式布局介绍

在这里插入图片描述以下是Vant响应式布局的具体介绍:

  1. 媒体查询:Vant使用CSS媒体查询来实现响应式布局。通过设置不同的媒体查询规则,可以根据屏幕宽度、高度或方向等条件,为不同的设备提供不同的样式和布局。

  2. 断点设置:Vant定义了一组断点,用于根据不同的屏幕宽度进行响应式布局。这些断点定义了不同屏幕尺寸下的布局规则,开发者可以根据需求自定义断点设置。

  3. 响应式工具类:Vant提供了一系列响应式的CSS类,用于控制组件在不同屏幕尺寸下的显示和布局。开发者可以通过在元素上添加相应的CSS类,实现响应式的样式调整。

  4. 栅格系统:Vant还提供了栅格系统,用于实现灵活的响应式布局。开发者可以将组件放置在栅格中,根据不同的屏幕尺寸设置栅格的列数和宽度,实现自适应的布局效果。

  5. 响应式组件:Vant提供了一些特定的响应式组件,如van-rowvan-col`。这些组件可以配合栅格系统使用,以便更好地控制组件在不同屏幕尺寸下的布局。

  6. 媒体查询工具类:除了使用媒体查询来自定义样式外,Vant还提供了一些内置的媒体查询工具类,方便开发者根据不同的屏幕尺寸设置样式。例如,可以使用.van-xs.van-sm.van-md.van-lg.van-xl等类名来针对不同的屏幕尺寸设置样式。

  7. 自定义断点:Vant提供了默认的断点设置,但也支持开发者根据项目需求自定义断点。通过配置断点,可以更精细地控制组件在不同屏幕尺寸下的布局和样式。

  8. Flex布局:Vant在设计和布局上广泛使用Flexbox弹性布局模型,这使得组件在不同屏幕尺寸下能够更好地自适应和排列。

通过结合以上的特性和工具,开发者可以实现灵活的响应式布局。Vant的响应式布局能够使组件在不同的手机屏幕尺寸下呈现出最佳的显示效果,并提供良好的用户体验。

二、媒体查询实现响应式布局示例代码

在这里插入图片描述Vant通过媒体查询实现响应式布局的示例代码如下:

<template><div class="container"><van-button class="responsive-button">Responsive Button</van-button></div>
</template><style>
.container {display: flex;justify-content: center;
}/* 媒体查询 */
@media screen and (max-width: 768px) {.responsive-button {font-size: 14px;padding: 10px 20px;}
}@media screen and (min-width: 769px) {.responsive-button {font-size: 18px;padding: 15px 30px;}
}
</style>

在这个示例中,我们使用了Vant的Button组件,并通过媒体查询来设置按钮在不同屏幕尺寸下的样式。

首先,我们定义了一个容器.container,使用display: flexjustify-content: center将按钮水平居中显示。

然后,在@media规则内,我们设置了两个媒体查询。第一个媒体查询针对最大宽度为768px的屏幕,设置了较小的字体大小和内边距。第二个媒体查询针对最小宽度为769px的屏幕,设置了较大的字体大小和内边距。

这样,根据不同的屏幕尺寸,按钮的样式会自动适应并改变。

通过使用媒体查询,我们可以根据不同的屏幕尺寸设置组件的样式,从而实现响应式布局。这使得组件能够在不同的设备上以最佳的方式呈现,并提供更好的用户体验。

在这里插入图片描述下面是一个更全面的示例代码,展示如何使用Vant的媒体查询和响应式工具类来实现更复杂的响应式布局:

<template><div class="container"><van-row :gutter="20"><van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }"><div class="box">Box 1</div></van-col><van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }"><div class="box">Box 2</div></van-col><van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }"><div class="box">Box 3</div></van-col></van-row></div>
</template><style>
.container {padding: 20px;
}.box {background-color: #f2f2f2;height: 200px;display: flex;align-items: center;justify-content: center;font-size: 24px;color: #333;
}/* 媒体查询 */
@media screen and (max-width: 768px) {.box {font-size: 18px;}
}@media screen and (min-width: 769px) and (max-width: 1024px) {.box {font-size: 20px;}
}
</style>

在这个示例中,我们使用了Vant的RowCol组件来创建一个响应式的布局。其中,Row表示行,Col表示列,可以根据不同的屏幕尺寸设置列的宽度。

Col组件上,我们使用了:lg:md:sm属性来设置不同屏幕尺寸下的列宽。对于大屏幕(lg),每列占据8份;对于中等屏幕(md),每列占据12份;对于小屏幕(sm),每列占据24份,即一整行。

在样式部分,我们定义了一个.box类,表示每个盒子的样式。通过媒体查询,我们根据不同的屏幕尺寸设置了不同的字体大小。

当屏幕宽度小于等于768px时,字体大小为18px;当屏幕宽度在769px到1024px之间时,字体大小为20px。

这样,无论是在大屏幕、中等屏幕还是小屏幕下,盒子的列宽和字体大小都会自动调整,实现了响应式布局。

通过这个示例,您可以更好地理解如何使用Vant的媒体查询和响应式工具类来实现灵活的响应式布局。您可以根据具体的需求,调整和扩展代码,以满足您的项目要求。

三、短点设置实现响应式布局示例代码

在这里插入图片描述Vant提供了一组预定义的断点,用于根据不同屏幕宽度进行响应式布局。您可以根据自己的需求自定义这些断点设置。以下是一个示例代码,演示了如何使用Vant的断点设置:

import { createApp } from 'vue';
import { createBreakpoint } from 'vant';// 自定义断点设置
const customBreakpoints = {xs: 320,    // 小屏幕设备(手机)上的断点sm: 576,    // 中等屏幕设备(平板电脑)上的断点md: 768,    // 中大屏幕设备上的断点lg: 992,    // 大屏幕设备(电脑)上的断点xl: 1200    // 超大屏幕设备上的断点
};// 创建断点实例
const breakpoint = createBreakpoint(customBreakpoints);// 注册断点实例到Vant
createApp(App).use(breakpoint).mount('#app');

在这个示例代码中,我们首先通过createBreakpoint函数创建了一个断点实例,并传入了自定义的断点设置对象customBreakpoints。然后,将断点实例注册到Vant的Vue应用中。

通过自定义断点设置,您可以根据需要定义不同屏幕尺寸下的断点值。例如,xs表示小屏幕设备(手机)上的断点,sm表示中等屏幕设备(平板电脑)上的断点,以此类推。您可以根据实际需求调整断点的数值。

四、响应式工具类实现响应式布局示例代码

在这里插入图片描述Vant提供了一系列响应式的CSS类,用于控制组件在不同屏幕尺寸下的显示和布局。您可以通过在元素上添加相应的CSS类,实现响应式的样式调整。以下是一些常用的响应式工具类示例代码:

  1. 隐藏和显示类:
<!-- 在手机设备上隐藏该元素 -->
<div class="van-xs-hide">内容</div><!-- 在平板电脑设备上显示该元素 -->
<div class="van-sm-show">内容</div>
  1. 布局类:
<!-- 在小屏幕设备上设置元素宽度为100% -->
<div class="van-xs-24">内容</div><!-- 在中等屏幕设备上设置元素宽度为50% -->
<div class="van-md-12">内容</div><!-- 在大屏幕设备上设置元素宽度为33.33% -->
<div class="van-lg-8">内容</div>
  1. 偏移类:
<!-- 在小屏幕设备上设置元素左侧偏移为20px -->
<div class="van-xs-offset-20">内容</div><!-- 在中等屏幕设备上设置元素右侧偏移为10px -->
<div class="van-md-offset-right-10">内容</div>
  1. 对齐类:
<!-- 在小屏幕设备上设置元素居中对齐 -->
<div class="van-xs-text-center">内容</div><!-- 在中等屏幕设备上设置元素右对齐 -->
<div class="van-md-text-right">内容</div>

这些是一些常用的响应式工具类示例代码,您可以根据实际需求选择合适的类应用于元素上,以实现在不同屏幕尺寸下的样式调整。

五、栅格系统实现响应式布局示例代码

在这里插入图片描述Vant提供了栅格系统,用于实现灵活的响应式布局。您可以将组件放置在栅格中,根据不同的屏幕尺寸设置栅格的列数和宽度,实现自适应的布局效果。以下是一个示例代码,演示了如何使用Vant的栅格系统:

<van-row :gutter="20"><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第一列内容 --></van-col><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第二列内容 --></van-col><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第三列内容 --></van-col><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第四列内容 --></van-col>
</van-row>

在这个示例代码中,我们使用了van-rowvan-col组件来创建栅格布局。van-row表示一行,包含多个列。van-col表示每一列,可以设置不同的列宽。

通过设置:span属性值,可以控制每列在不同屏幕尺寸下所占的宽度比例。例如,:sm="12"表示在小屏幕设备(如手机)上,该列占据总宽度的一半,:md="8"表示在中等屏幕设备(如平板电脑)上,该列占据总宽度的三分之一,:lg="6"表示在大屏幕设备(如电脑)上,该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容,并根据不同屏幕尺寸调整:span属性值,以达到您想要的响应式布局效果。

六、响应式组件实现响应式布局示例代码

在这里插入图片描述Vant的栅格系统是通过van-rowvan-col组件来实现的,这两个组件用于创建栅格布局。可以根据不同屏幕尺寸设置每列的宽度,从而实现响应式布局。以下是一个示例代码:

<template><van-row :gutter="20"><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第一列内容 --></van-col><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第二列内容 --></van-col><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第三列内容 --></van-col><van-col :span="24" :sm="12" :md="8" :lg="6"><!-- 第四列内容 --></van-col></van-row>
</template><script>
export default {// 组件逻辑代码
}
</script><style scoped>
/* 样式代码 */
</style>

在这个示例代码中,我们使用了van-rowvan-col组件来创建栅格布局。通过设置:span属性值,可以控制每列在不同屏幕尺寸下所占的宽度比例。例如,:sm="12"表示在小屏幕设备(如手机)上,该列占据总宽度的一半,:md="8"表示在中等屏幕设备(如平板电脑)上,该列占据总宽度的三分之一,:lg="6"表示在大屏幕设备(如电脑)上,该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容,并根据不同屏幕尺寸调整:span属性值,以达到您想要的响应式布局效果。

七、内置的媒体查询工具类来设置样式实现响应式布局示例代码

在这里插入图片描述以下是使用Vant内置的媒体查询工具类来设置样式的示例代码:

<template><div><div class="van-xs">Extra Small Screen</div><div class="van-sm">Small Screen</div><div class="van-md">Medium Screen</div><div class="van-lg">Large Screen</div><div class="van-xl">Extra Large Screen</div></div>
</template><style>
.van-xs {/* 样式针对 extra small 屏幕尺寸 */
}.van-sm {/* 样式针对 small 屏幕尺寸 */
}.van-md {/* 样式针对 medium 屏幕尺寸 */
}.van-lg {/* 样式针对 large 屏幕尺寸 */
}.van-xl {/* 样式针对 extra large 屏幕尺寸 */
}
</style>

在上面的示例中,我们使用了.van-xs.van-sm.van-md.van-lg.van-xl这些类名来分别针对不同的屏幕尺寸设置样式。你可以根据需要在对应的类名下编写样式规则,以实现在不同屏幕尺寸下的样式适配。

八、自定义断点设置实现响应式布局示例代码

在这里插入图片描述要自定义断点并配置Vant的断点设置,可以按照以下示例代码进行操作:

// 在项目的入口文件中引入 Vant
import { createApp } from 'vue';
import { vant } from 'vant';
import 'vant/lib/index.css';const app = createApp(App);
app.use(vant);
app.mount('#app');
// 创建一个自定义的 Vant 断点配置文件(例如 breakpoints.js)
export default {xs: 480, // extra smallsm: 576, // smallmd: 768, // mediumlg: 992, // largexl: 1200, // extra large
};
// 在项目中的需要的地方引入自定义的断点配置文件
import breakpoints from './breakpoints';// 在使用 Vant 之前,修改 Vant 的默认断点配置
import { use } from 'vant';use({install(app) {app.config.globalProperties.$vant = {...app.config.globalProperties.$vant,...breakpoints,};},
});

通过上述代码,我们在项目中引入了 Vant,并创建了一个自定义的断点配置文件 breakpoints.js。在该文件中,我们定义了自己的断点尺寸,例如 xssmmdlgxl

然后,在项目中需要使用 Vant 的地方,我们引入了自定义的断点配置文件,并通过 Vant 的 use 方法修改了默认断点配置。这样,Vant 将使用我们自定义的断点配置来进行布局和样式的适配。

请注意,以上示例中的代码是基于 Vue 3.x 和 Vant 3.x 的。如果你使用的是其他版本的 Vue 或 Vant,请根据相应的版本文档进行适配。

九、Flex实现响应式布局示例代码

在这里插入图片描述Vant广泛使用Flexbox弹性布局模型来设计和布局组件,以实现在不同屏幕尺寸下的自适应和排列。以下是一个使用Vant Flex布局的示例代码:

<template><div class="container"><div class="flex-container"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div></div></div>
</template><style>
.container {width: 100%;height: 300px;
}.flex-container {display: flex;flex-wrap: wrap;
}.flex-item {flex: 1 0 33.33%;padding: 10px;box-sizing: border-box;
}
</style>

在上面的示例中,我们创建了一个容器 .container,并在其中使用了Flex布局。.flex-container 是一个Flex容器,它的子元素 .flex-item 会根据剩余空间自动排列。

通过设置 .flex-itemflex 属性,我们指定了子元素的弹性,其中 flex: 1 0 33.33% 表示子元素的弹性比例为1,不允许缩小,初始宽度为33.33%。这样,无论容器的宽度如何变化,子元素都会平均占据一行的三分之一空间。

你可以根据需要在Flex容器和子元素上应用不同的样式,并根据项目要求进行调整。这样,Vant的Flex布局能够帮助你实现在不同屏幕尺寸下的自适应和排列效果。
在这里插入图片描述下面是一个更复杂的示例代码,展示了如何在Vant中使用Flex布局,并结合其他组件进行更丰富的布局和排列:

<template><div class="container"><van-row><van-col span="12"><div class="box">Box 1</div></van-col><van-col span="12"><div class="box">Box 2</div></van-col></van-row><van-row><van-col span="8"><div class="box">Box 3</div></van-col><van-col span="8"><div class="box">Box 4</div></van-col><van-col span="8"><div class="box">Box 5</div></van-col></van-row></div>
</template><style>
.container {width: 100%;height: 300px;
}.box {height: 100%;display: flex;align-items: center;justify-content: center;background-color: #f5f5f5;border: 1px solid #ccc;
}
</style>

在上面的示例中,我们使用了Vant的 van-rowvan-col 组件来实现更灵活的布局。通过在 van-row 中使用 van-col,我们可以将内容划分为多个列,并根据需要进行自适应排列。

每个 van-col 组件都可以设置 span 属性来指定所占的列数。在示例中,我们在第一行中有两个 van-col,每个占据了12列(即占据了一半的宽度),而在第二行中有三个 van-col,每个占据了8列(即占据了三分之一的宽度)。

在每个 van-col 的内部,我们放置了一个具有 .box 类的 div 元素,用于展示灵活的内容。通过设置 .box 的样式,我们使其垂直居中并水平居中,同时给它一个背景颜色和边框,以便更好地展示布局效果。

你可以根据自己的需求和设计来修改和扩展这个示例,利用Vant的Flex布局和其他组件,实现更丰富的自适应布局和排列效果。

十、归纳总结

在这里插入图片描述当涉及到Vant的响应式布局,以下是一些重要的知识点:

  1. 使用Flexbox弹性布局:Vant广泛使用Flexbox弹性布局模型来实现组件的自适应和排列。通过设置容器和子元素的display: flex,可以创建一个Flex容器,并使用flex属性来控制子元素的弹性。

  2. 使用van-rowvan-col组件:Vant提供了van-rowvan-col组件,用于更灵活地实现响应式布局。van-row表示一行,可以在其中放置多个van-col组件,每个van-col组件代表一个列,并可以根据需要设置所占的列数。

  3. 使用span属性控制列数:在van-col组件中,可以使用span属性来控制所占的列数。例如,span="12"表示占据12列(即占据一半的宽度),span="8"表示占据8列(即占据三分之一的宽度),以此类推。

  4. 自定义样式:可以根据需要在Flex容器和子元素上应用自定义的样式,例如设置宽度、高度、对齐方式等。通过调整样式,可以实现不同屏幕尺寸下的自适应布局和排列效果。

在这里插入图片描述这些知识点可以帮助你在Vant中实现响应式布局。根据具体的项目需求,你可以灵活运用这些知识来创建适应不同屏幕尺寸的布局。

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

软件测试风险管理

1 软件测试风险管理 软件测试风险管理是识别、评估和控制测试过程中可能出现的风险&#xff0c;以确保测试活动能够按计划进行并达到预期目标的过程。软件测试风险管理是软件测试过程中的一个关键组成部分&#xff0c;它涉及到识别、评估和控制可能影响软件测试项目成功的不确…

图解密码技术——第六章 混合密码系统

一、混合密码系统 1.介绍 混合密码系统将对称密码和公钥密码的优势结合在一起。使用对称密码对信息进行加密&#xff0c;使用公钥密码对加密信息的对称密码的秘钥进行加密。这样&#xff0c;解决了对称密码的密钥配送问题&#xff0c;由于秘钥较短&#xff0c;所以公钥密码处…

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】

文章目录: 1.清除默认样式 1.1清除内外边距1.2清除列表圆点(项目符号) 3.外边距问题-合并现象4.外边距问题–塌陷问题5.行内元素垂直内外边距6.圆角与盒子阴影 6.1圆角 6.2 盒子模型-阴影(拓展) 综合案例一 产品卡片 综合案例二 新闻列表 1.清除默认样式 在实际设计开发中,要…

寒假9-蓝桥杯训练

//轨道炮 #include<iostream> using namespace std; #include<algorithm> int logs[100010]; int main() {int n;cin >> n;for (int i 1;i < n;i){cin >> logs[i];}sort(logs 1, logs n 1);int ans 1000000000;for (int i 2;i < n;i){if (…

【Jenkins】Jenkins关闭Jenkins关闭、重启

目录 一、Jenkins关闭、重启 二、Jenkins服务的启动、停止方法。 一、Jenkins关闭、重启 1.关闭Jenkins 只需要在访问jenkins服务器的网址url地址后加上exit&#xff0c;关闭Jenkins服务。 例如&#xff1a;http://localhost:8081/exit 2.重启Jenkies 只有在Jenkins服务启动…

Matplotlib初探:认识数据可视化与Matplotlib

Matplotlib初探&#xff1a;认识数据可视化与Matplotlib Fig.1 利用Matplotlib进行数据可视化( 可视化代码见文末) &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;一、数据可视化简介&#x1f333;&#x1f333;二、Matplotlib库简介&#x…

为什么说 2023 年是 AI 视频生成的突破年?2024 年的 AI 视频生成有哪些值得期待的地方?

Diffusion Models视频生成-博客汇总 前言&#xff1a;2023年是 AI 视频生成的突破年&#xff0c;AI视频已经达到GPT-2级别了。去年我们取得了长足的进步&#xff0c;但距离普通消费者每天使用这些产品还有很长的路要走。视频的“ChatGPT时刻”何时到来&#xff1f; 目录 前言 …

小程序-上传图片功能

技术前置&#xff1a; 1.框架采用colorUI 2.原生开发 功能&#xff1a; 上传图片 1.上传已经拍摄的图片 2.实时拍摄上传 3.设置上传图片数量&#xff0c;每次上传数量 4.上传等待 ChooseImage() {if(this.data.imgList.length>4){_this.ErrorEvent("最多上传4…

网络安全检查表

《网络攻击检查表》 1.应用安全漏洞 2.弱口令&#xff0c;默认口令 3.服务器互联网暴露 4.操作系统&#xff0c;中间件安全漏洞 5.研发服务器&#xff0c;邮件服务器等安全检查

Linux中FIFO管道

介绍&#xff1a; FIFO被称为命名管道&#xff0c;pipe只能用于有血缘关系的进程间通信&#xff0c;但通过FIFO&#xff0c;不相关的进程也可以进程间通信。 FIFO是linux基础文件类型的一种&#xff08;文件类型为p&#xff09;&#xff0c;FIFO文件在磁盘上没有数据块&#…

用code去探索理解Llama架构的简单又实用的方法

除了白月光我们也需要朱砂痣 我最近也在反思&#xff0c;可能有时候算法和论文也不是每个读者都爱看&#xff0c;我也会在今后的文章中加点code或者debug模型的内容&#xff0c;也许还有一些好玩的应用demo&#xff0c;会提升这部分在文章类型中的比例 今天带着大家通过代码角度…

HTTP 超文本传送协议

1 超文本传送协议 HTTP HTTP 是面向事务的 (transaction-oriented) 应用层协议。 使用 TCP 连接进行可靠的传送。 定义了浏览器与万维网服务器通信的格式和规则。 是万维网上能够可靠地交换文件&#xff08;包括文本、声音、图像等各种多媒体文件&#xff09;的重要基础。 H…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Divider组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Divider组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Divider组件 提供分隔器组件&#xff0c;分隔不同内容块/内容元素。 子组件 …

设计模式学习笔记05(小滴课堂)

讲解Adapeter设计模式和应用场景 接口的适配器案例实战 代码&#xff1a; 定义一个接口&#xff1a; 编写适配器&#xff1a; 写我们的商品类&#xff1a; 会员类&#xff1a; 这样我们不同的需求可以根据需要去实现不同的接口方法&#xff0c;而不用实现全部接口方法。 适配…

python+django咖啡网上商城网站

全网站共设计首页、咖啡文化、咖啡商城、个人信息、联系我们5个栏目以及登录、注册界面&#xff0c;让用户能够全面的了解中国咖啡咖啡文化宣传网站以及一些咖啡知识、文化。 栏目一首页&#xff0c;主要放置咖啡的起源及发展进程的图文介绍&#xff1b;栏目二咖啡文化&#xf…

《Linux 简易速速上手小册》第2章: 命令行的艺术(2024 最新版)

文章目录 2.1 基本 Linux 命令2.1.1 重点基础知识2.1.2 重点案例&#xff1a;整理下载文件夹2.1.3 拓展案例 1&#xff1a;批量重命名文件2.1.4 拓展案例 2&#xff1a;查找并删除特定文件 2.2 文件和目录管理2.2.1 重点基础知识2.2.2 重点案例&#xff1a;部署一个简单的网站2…

中国电子学会2020年9月份青少年软件编程Scratch图形化等级考试试卷三级真题(编程题)

编程题(共3题&#xff0c;共30分) 36.题目&#xff1a;魔术表演“开花” 1.准备工作 &#xff08;1&#xff09;将舞台设置为"Party"&#xff1b; &#xff08;2&#xff09;删除默认角色&#xff0c;自行绘制椭圆花瓣角色&#xff1b; &#xff08;3&#xf…

fast.ai 机器学习笔记(一)

机器学习 1&#xff1a;第 1 课 原文&#xff1a;medium.com/hiromi_suenaga/machine-learning-1-lesson-1-84a1dc2b5236 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自机器学习课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这些笔记将继续更…

【Django】Django项目部署

项目部署 1 基本概念 项目部署是指在软件开发完毕后&#xff0c;将开发机器上运行的软件实际安装到服务器上进行长期运行。 在安装机器上安装和配置同版本的环境[python&#xff0c;数据库等] django项目迁移 scp /home/euansu/Code/Python/website euansuxx.xx.xx.xx:/home…

C#系列-Entity Framework 架构(18)

下图展示了EF的整体架构。现在让我们逐个地看看架构的各个组件&#xff1a; EF组件图 EDM&#xff08;Entity Data Mode 实体数据模型&#xff09;:EDM 由三个主要部分组成&#xff1a;概念模型&#xff0c;映射和存储模型。 Conceptual Model&#xff08;概念模型&#xff0…