CSS Grid布局入门：从零开始创建一个网格系统

CSS Grid布局入门：从零开始创建一个网格系统

引言

在响应式设计日益重要的今天，CSS Grid布局系统是前端开发中的一次革新。它使得创建复杂、灵活的布局变得简单而直观。本教程将通过分步骤的方式，让你从零开始掌握CSS Grid，并在实际项目中运用它构建一个网格系统。
在这里插入图片描述

第1部分：理解CSS Grid布局基础

什么是CSS Grid布局？

CSS Grid布局是一种二维布局系统，它允许开发者在网页中创造行和列的布局，管理元素的位置和大小。与传统的布局如float或flexbox相比，Grid布局提供更高的灵活性和控制力。

开始使用CSS Grid

首先，要使用Grid布局，需要一个容器元素，这个元素将成为Grid的“容器”。在这个容器上声明display: grid;样式，就能将它变成一个Grid布局。

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <!-- ...更多的子元素 -->
</div>

.grid-container {
  display: grid;
}

定义行与列

使用grid-template-columns和grid-template-rows属性来定义容器内部的列和行。你可以指定固定的尺寸，或者使用fr单位来分配容器中可用空间的一部分。

.grid-container {
  display: grid;
  grid-template-columns: 100px 3fr 1fr;
  grid-template-rows: 200px auto;
}

在上面的例子中，我们定义了三列和两行。第一列宽度固定为100像素，第二列是第三列的三倍宽，而第二行则自动填充剩余的垂直空间。

Grid间隙（Gaps）

Grid提供gap，row-gap，和column-gap属性来指定行与行、列与列之间的间隙。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 同时设置行间隙和列间隙 */
  row-gap: 15px; /* 只设置行间隙 */
  column-gap: 20px; /* 只设置列间隙 */
}

以上，你已经掌握了Grid布局的基本概念和如何设置一个简单的网格。下一部分，我们将了解如何在网格中定位项目并控制其大小。请继续关注后续内容。

—#### 第2部分：在网格中定位项目与控制尺寸

Grid项的定位
在Grid布局中，每个直接子元素自动成为一个Grid项（grid item）。我们可以利用grid-column和grid-row属性来决定这些项在网格中的位置。

.grid-container > div:first-child {
  grid-column: 1 / 3; /* 从第1列开始，跨越到第3列 */
  grid-row: 1; /* 定位在第1行 */
}

上述代码将容器的第一个子元素跨越两列的空间，而其它子元素将按照源顺序自动定位在网格中的其它单元格。

Grid项的尺寸调整
我们可以通过相同的grid-column和grid-row属性来指定一个Grid项要跨越的行和列数，从而调整其大小。

.grid-container > div:nth-child(2) {
  grid-column: 2 / span 2; /* 从第2列开始，跨越2列 */
  grid-row: 2 / span 2; /* 从第2行开始，跨越2行 */
}

在这个例子中，第二个子元素被设置为跨越两列和两行。

使用grid-area简化布局
有时候，我们需要涉及到多个行和列设置位置时，可以使用grid-area属性来简化代码。

.grid-container > div:nth-child(3) {
  grid-area: 1 / 1 / 3 / 3; /* 行起始 / 列起始 / 行结束 / 列结束 */
}

这将把第三个子元素定位在从第一行第一列开始到第三行第三列结束的区域内。

第3部分：创建复杂布局与命名区域

复杂布局的实现
利用前面提到的基础知识，我们可以开始创建更加复杂的布局。通过组合不同的grid-template-rows、grid-template-columns和Grid项的定位属性，我们能够设计出丰富多样的界面结构。

命名网格线
同时，CSS Grid也允许我们通过给网格线命名来简化布局的创建过程。

.grid-container {
  display: grid;
  grid-template-columns: [start] 100px [mid] auto [end];
  grid-template-rows: [row-start] 200px [row-end];
}

在这个例子中，我们定义了列和行的开始和结束位置的名称。

命名区域
您还可以给Grid区域命名，然后直接引用这些名称来定位Grid项。

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.grid-container > header {
  grid-area: header;
}

.grid-container > nav {
  grid-area: sidebar;
}

.grid-container > main {
  grid-area: content;
}

.grid-container > footer {
  grid-area: footer;
}

在上述代码中，我们创建了一个具有页眉（header）、侧栏（sidebar）、主内容区（content）和页脚（footer）的布局，并通过grid-area属性将Grid项放入相应的区域。

第4部分：构建响应式设计与CSS Grid

媒体查询与网格布局
响应式设计是现代网页设计不可或缺的一部分，CSS Grid 能够与媒体查询（media queries）无缝结合，使得根据不同屏幕尺寸调整布局变得简单。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr; /* 在小屏幕上使用两列布局 */
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* 在超小屏幕上使用单列布局 */
  }
}

使用媒体查询可以根据视口的宽度更改网格的列数，从而实现响应式布局。

自动填充与自动流动
Grid 提供了 auto-fill 和 auto-fit 关键字，结合 repeat 函数，它们可以创建灵活的网格布局，网格项能够根据可用空间自动填充或收缩。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

这里，auto-fill 会在容器中尽可能多地放置宽度至少为200px的列。minmax 函数保证了列宽可以在200px到1fr之间灵活变化。

网格对齐与层叠
Grid 也提供了控制对齐的属性，例如 justify-items、align-items、justify-content 和 align-content，使得在整个容器内或单独的网格项内对内容进行对齐变得简单。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* 所有网格项在行方向居中对齐 */
  justify-content: space-between; /* 网格在容器中两端对齐，项之间间隔相等 */
}
第5部分：CSS Grid 高级技巧

在这里插入图片描述

隐式网格与显式网格
CSS Grid 的另一个特点是能够创建显式网格（explicit grid）和隐式网格（implicit grid）。当你没有为所有的网格项指定位置时，Grid自动生成隐式网格行或列来容纳它们。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 显式网格：3列 */
}

.grid-container > div:nth-child(4) {
  grid-column: 1 / 4; /* 隐式创建第4行来容纳这个网格项 */
}

网格模板与重复模式
使用 grid-template 属性，可以同时定义网格的行、列和区域。repeat 函数的另一个强大之处是它可以配合 auto-fit 和 auto-fill 使用，创建重复的模式。

.grid-container {
  display: grid;
  grid-template: 
    "header header header" 50px
    "sidebar content content" 1fr
    "footer footer footer" 30px / 1fr 2fr 1fr;
}

在这个例子中，grid-template 属性定义了一个具有三行三列的网格模板，行和列都有各自的尺寸，而且还有命名区域。

—### Vue.js快速入门：构建你的第一个SPA（单页应用）

第1部分：Vue.js基础与环境搭建

什么是Vue.js？
Vue.js 是一套用于构建用户界面的渐进式JavaScript框架。与其他重量级框架不同，Vue被设计为可以自底向上逐层应用。Vue的核心库专注于视图层，不仅易于上手，还便于与第三方库或既有项目集成。
在这里插入图片描述

安装与创建第一个Vue应用
开始之前，你需要有Node.js环境。之后，可以通过NPM安装Vue CLI，Vue.js的官方脚手架工具，用于快速生成项目结构。

npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

接下来，创建一个新的Vue项目：

vue create my-first-spa

终端会提示你选择预设配置或手动配置项目。选择默认预设（babel, eslint）即可，这对于初学者来说是个不错的起点。

创建项目后，进入项目文件夹，并启动开发服务器：

cd my-first-spa
npm run serve

浏览器会自动打开localhost:8080，展示你的Vue应用。

第2部分：理解Vue组件与单文件组件

Vue组件
Vue.js 的一个核心概念是，界面中的所有东西都是组件。一个Vue组件本质上是一个拥有预定义选项的一个Vue实例。组件用于构建可复用的视图，同时它们也能够和数据进行交互。
在这里插入图片描述

单文件组件（.vue）
在Vue中，一个.vue文件定义了一个单独的组件。这个文件包含三部分：<template>、<script>和<style>。分别用于定义组件的结构、逻辑和样式。

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style>
.hello {
  font-weight: bold;
}
</style>

在<template>中，你定义了HTML结构；<script>中定义了组件的数据和方法；而<style>则是组件的专有样式。

第3部分：组件间的交互与通信

父子组件通信
在Vue.js中，组件间的数据流通常是单向的，从父组件流向子组件，这种模式通过props实现。父组件通过props传递数据给子组件，子组件则通过事件来通知父组件其内部发生的变化。

<!-- 父组件 -->
<template>
  <div>
    <child-component :child-msg="parentMsg" @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMsg: 'Message from Parent'
    };
  },
  methods: {
    handleChildEvent(data) {
      // 处理子组件事件
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="emitEvent">Click Me</button>
  </div>
</template>

<script>
export default {
  props: ['childMsg'],
  methods: {
    emitEvent()
    {
  // 子组件发送事件
  this.$emit('child-event', 'Data from Child');
}};</script>

在上面的例子中，父组件<child-component>标签中使用了:child-msg来绑定一个传给子组件的prop，同时使用了@child-event来监听子组件触发的事件。子组件通过调用this.$emit来发射事件，事件名为child-event，并传递数据给父组件。

非父子组件通信

有时候，非父子组件之间也需要通信，Vue.js提供了一个事件总线（Event Bus）或Vuex来解决这一问题。

使用事件总线时，我们可以创建一个新的Vue实例作为中央事件总线，在一个组件中触发事件，并在另一个组件中监听这个事件：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在组件中使用：

// 发射事件
EventBus.$emit('my-event', someData);

// 监听事件
EventBus.$on('my-event', data => {
  // 做些什么
});
第4部分：Vue Router 与单页应用路由

Vue Router 简介

Vue Router是Vue.js官方的路由管理器。它和Vue.js核心深度集成，让构建单页应用变得易如反掌。使用Vue Router可以定义页面路由，实现不同页面的切换而不重新加载整个页面。
在这里插入图片描述

安装和设置路由

假设你已经通过Vue CLI创建了应用，可以通过以下命令安装Vue Router：

npm install vue-router

然后，创建一个router.js文件来设置路由：

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage
    },
    {
      path: '/about',
      name: 'About',
      component: AboutPage
    }
  ]
});

在main.js中引入并使用路由：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Vue Router 允许你将组件映射到路由，并通过<router-view>来在应用中渲染它们。例如，在App.vue中：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
第5部分：状态管理与Vuex

Vuex 简介

对于大型应用，组件间的所有状态将会非常难以管理。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装和配置Vuex

npm install vuex --save

创建store.js：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});

在main.js中引入store并将其注入到所有的子组件中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

现在你可以在任何子组件中通过this.$store来访问Vuex store。

第6部分：Vuex高级用法

模块化
为了让state管理更加结构化和易于维护，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action 甚至是嵌套子模块。

// store/modules/user.js
const user = {
  state: () => ({
    name: 'John Doe'
  }),
  mutations: {
    SET_NAME(state, payload) {
      state.name = payload;
    }
  },
  actions: {
    updateName({ commit }, newName) {
      commit('SET_NAME', newName);
    }
  }
};

export default user;

然后在主 store 文件中引入模块：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user
  }
});

Getters
Vuex 允许我们定义 getters，可以认为是 store 的计算属性。Getters 可以用来声明性地获取 store 中的状态。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

Namespaced
在大型应用中，可能需要将 Vuex 模块划分命名空间。开启命名空间的模块所有的 mutations、actions 和 getters 会自动根据模块注册的路径调整命名。

const moduleA = {
  namespaced: true,
  // ...
};
第7部分：Vue的过渡与动画

Vue 提供了<transition>和<transition-group>组件，允许我们在 DOM 元素或组件的进入/离开过渡中应用动画。

<template>
  <div id="demo">
    <button @click="show = !show">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
第8部分：性能优化

异步组件和懒加载
在大型应用中，将应用分割成小块，并只在需要时从服务器加载相应的组件，能够显著提高应用性能。

Vue.component('async-component', () => import('./AsyncComponent.vue'));

使用v-if和v-show智能化
v-if是“真正”的条件渲染，因为它确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。而v-show简单地切换元素的CSS属性display。

根据需要选择合适的指令，可以避免不必要的渲染开销。

计算属性和方法
当你有一些数据需要根据其它数据变化时，使用计算属性而不是方法，计算属性是基于它们的响应式依赖进行缓存的。

以上内容提供了关于 Vue.js 的进阶使用方法和性能优化的指导。随着你对 Vue.js 的深入了解，你将能够构建更加高效、可维护和强大的Web应用。
本文由AI全程改编：https://r5ai.com/

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【NLP】RAG 应用中的调优策略

【NLP】RAG 应用中的调优策略

​ 检索增强生成应用程序的调优策略 没有一种放之四海而皆准的算法能够最好地解决所有问题。 本文通过数据科学家的视角审视检索增强生成&#xff08;RAG&#xff09;管道。它讨论了您可以尝试提高 RAG 管道性能的潜在“超参数”。与深度学习中的实验类似&#xff0c;例如&am…
阅读更多...
MyBatisPlus简介

MyBatisPlus简介

1 简介 MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 2、特性 无侵入 只做增强不做改变&#xff0c;引入它不会对现有工程产生影响&#xff0c;如丝般顺滑…
阅读更多...
Java+Swing: 从数据库中查询数据并显示在表格中 整理11

Java+Swing: 从数据库中查询数据并显示在表格中 整理11

分析&#xff1a;要想从数据库中查询数据并分页展示到表格中&#xff0c;我觉得应该按照这个思路&#xff1a;首先就是发起请求&#xff0c;此时需要向数据库中传递三个参数&#xff1a;当前页码&#xff08;pageNum&#xff09;、每一页的数量&#xff08;pageSize&#xff09…
阅读更多...
无代码开发让合利宝支付与CRM无缝API集成，提升电商用户运营效率

无代码开发让合利宝支付与CRM无缝API集成，提升电商用户运营效率

合利宝支付API的高效集成 在当今快速发展的电子商务领域&#xff0c;电商平台正寻求通过高效的支付系统集成来提升用户体验和业务处理效率。合利宝支付&#xff0c;作为中国领先的支付解决方案提供者&#xff0c;为电商平台提供了一个高效的API连接方案。这种方案允许无代码开…
阅读更多...
项目计划书

项目计划书

项目开发计划包括项目描述、项目组织、成本预算、人力资源估算、设备资源计划、沟通计划、采购计划、风险计划、项目过程定义及项目的进度安排和里程碑、质量计划、数据管理计划、度量和分析计划、监控计划和培训计划等。 软件全套资料获取&#xff1a;点我获取
阅读更多...
炫酷CSS加载动画

炫酷CSS加载动画

HTML结构 首先是HTML代码&#xff0c;定义了一个类名container的<div>容器&#xff1a; 1.在这个容器里面包含了一些加载器.loader&#xff0c;每个加载器都具有不同的旋转角度自定义属性--r(1~4)&#xff0c;而每个加载器里面有20个<span>元素&#xff0c;并且也都…
阅读更多...
vue编辑页面提示 this file does not belong to the project

vue编辑页面提示 this file does not belong to the project

背景 打开vue项目工程 文件夹被锁定&#xff08;有黄色背景&#xff09;&#xff0c;编辑页面时&#xff0c;报错。 报错提示&#xff1a; vue编辑页面提示 this file does not belong to the project 原因 一不下心打开了错误的文件包 解决方案 1、删除.idea文件夹 2、…
阅读更多...
光学仿真 | 推动高精度且微型化摄像头以满足市场需求

光学仿真 | 推动高精度且微型化摄像头以满足市场需求

光学设计人员面临着一项持续挑战&#xff0c;即满足消费者对摄像头等体积更小、更轻量化设备的需求&#xff0c;同时要不断提高图像质量。一般来说&#xff0c;能否获得最佳质量取决于镜头数量&#xff1a;可装入设备的镜头越多&#xff0c;分辨率和色彩精度就越高。 就智能手机…
阅读更多...
隐语开源｜周爱辉：隐语 TEE 技术解读与跨域管控实践

隐语开源｜周爱辉：隐语 TEE 技术解读与跨域管控实践

“隐语”是开源的可信隐私计算框架&#xff0c;内置 MPC、TEE、同态等多种密态计算虚拟设备供灵活选择&#xff0c;提供丰富的联邦学习算法和差分隐私机制 开源项目 github.com/secretflow gitee.com/secretflow 11月25日&#xff0c;「隐语开源社区 Meetup西安站」顺利举办&…
阅读更多...
Pinia无废话，快速上手

Pinia无废话，快速上手

Pinia无废话&#xff0c;快速上手 Vue3 状态管理 - Pinia 1. 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 &#xff0c;是 Vuex 状态管理工具的替代品 2. 手动添加Pinia到Vue项目 后面在实际开发项目的时候&#xff0c;Pinia可以在项目创建时自动添加&#xff0c;现…
阅读更多...
项目播报 | 河北信投数字科技签约璞华科技，以数字化方式全面提升采购效率

项目播报 | 河北信投数字科技签约璞华科技，以数字化方式全面提升采购效率

近日&#xff0c;璞华科技签约河北信投数字科技有限责任公司&#xff08;以下简称“河北信投数字科技”&#xff09;。璞华科技基于璞华采云链产品帮助客户打造采购数字化全景解决方案&#xff0c;实现智慧采购数字化转型升级。 本次强强联合&#xff0c;双方就采购数字化平台建…
阅读更多...
【产品设计】软件系统三基座之三：用户管理

【产品设计】软件系统三基座之三：用户管理

软件系统中的用户管理该如何做&#xff1f;系统设计过程中要考虑哪几方面&#xff1f;用户体验设计从哪些点来考察&#xff1f; 软件系统三基座包含&#xff1a;权限管理、组织架构、用户管理。基于权限控制、组织搭建&#xff0c;用户可以批量入场。 一、用户管理 在系统构建…
阅读更多...
深入理解RBAC权限系统

深入理解RBAC权限系统

最近&#xff0c;一位朋友在面试中被问及如何设计一个权限系统。我们注意到目前许多后台管理系统&#xff08;包括一些热门的如若依快速开发平台&#xff09;都采用了RBAC访问控制策略。该策略通过将权限授予角色&#xff0c;然后将角色分配给用户&#xff0c;从而实现对系统资…
阅读更多...
【Spark精讲】Spark任务运行流程

【Spark精讲】Spark任务运行流程

Spark任务执行流程 部署模式是根据Drvier和Executor的运行位置的不同划分的。client模式提交任务与Driver进程在同一个节点上&#xff0c;而cluster模式提交任务与Driver进程不在同一个节点。 Client模式 Clinet模式是在spark-submit提交任务的节点上运行Driver进程。 执行流…
阅读更多...
day01、什么是数据库系统？

day01、什么是数据库系统？

数据库系统介绍 1.实例化与抽象化数据库系统2.从用户角度看数据库管理系统的功能2.1 数据库定义功能2.2 数据库操纵2.3 数据库控制2.4 数据库维护功能2.5 数据库语言与高级语言 3.从系统&#xff1a;数据库管理系统应具有什么功能 来源于战德臣的B站网课 1.实例化与抽象化数据库…
阅读更多...
Git篇---第五篇

Git篇---第五篇

系列文章目录 文章目录 系列文章目录前言一、提交对象包含什么？二、如何在Git中创建存储库？三、怎样将 N 次提交压缩成一次提交？前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分…
阅读更多...
D30|继续贪心

D30|继续贪心

别太贪心了&#xff0c;做出一道贪心就应该知足呜呜呜 860.柠檬水找零 初始思路&&题解复盘: 确实不难&#xff0c;按照这个思路书写即可。 情况一&#xff1a;账单是5&#xff0c;直接收下。 情况二&#xff1a;账单是10&#xff0c;消耗一个5&#xff0c;增加一个10…
阅读更多...
『 Linux 』进程地址空间概念

『 Linux 』进程地址空间概念

文章目录 &#x1fad9; 前言&#x1fad9; 进程地址空间是什么&#x1fad9; 写时拷贝&#x1fad9; 可执行程序中的虚拟地址&#x1fad9; 物理地址分布方式 &#x1fad9; 前言 在c/C中存在一种内存的概念; 一般来说一个内存的空间分布包括栈区,堆区,代码段等等; 且内存是…
阅读更多...
长三角区域部分行业企业是如何实践招标采购供应链系统建设的？

长三角区域部分行业企业是如何实践招标采购供应链系统建设的？

长三角城市群是我国经济发展最活跃、开放程度最高、创新能力最强的区域之一&#xff0c;在国家现代化建设大局和全方位开放格局中具有举足轻重的战略地位。今年前三季度&#xff0c;长三角实现地区生产总值约22万亿元&#xff0c;占全国经济总量的24&#xff05;。 采购作为供…
阅读更多...
从零构建属于自己的GPT系列6：模型本地化部署2（文本生成函数解读、模型本地化部署、文本生成文本网页展示、代码逐行解读）

从零构建属于自己的GPT系列6：模型本地化部署2（文本生成函数解读、模型本地化部署、文本生成文本网页展示、代码逐行解读）

&#x1f6a9;&#x1f6a9;&#x1f6a9;Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在PyCharm中进行 本篇文章配套的代码资源已经上传 从零构建属于自己的GPT系列1&#xff1a;数据预处理 从零构建属于自己的GPT系列2&#xff1a;模型训…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站