vite学习笔记

news2024/9/22 19:33:58

vite

1.vite是什么？

基于==ES-Module==的前端构建工具

2.为什么选择vite？

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。

缓慢的服务器启动

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。

缓慢的更新

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。也就意味着，vite在启动的时候并不需要打包，也就意味着不用分析模块的依赖，也就是不用编译，因此，启动速度大大加快。按需编译。可以这样理解，vite就是对esbuild的进一步封装。

3.vite为什么比webpack要快？

这样要从两者的机制来看。

webpack

js应用程序静态模块==打包器==。它会递归地构建一个模块关系图，然后将这些模块打包成一个包或者多个包。

可以看到，它的运行过程是一个==串行==过程(由于js是单线程的)，要读取项目中的所有模块，然后打包，最后运行。
在这里插入图片描述

基于 ESModule的打包程序

通过HTTP请求头来请求入口文件，模块中的import都是==动态引入==，即需要哪个，我最后就会引入哪个。

在这里插入图片描述

ESM称为实时绑定的规则，引入和导出的对象都指向同一个内存地址，也就是当值发生变化的时候，也会实时地发生变化。

但打包的过程，vite就没有webpack做的好。

  • vite侧重的是开发过程中的体验。
  • webpack解决的还是打包的问题。

所以vite也称为前端==构建==工具

4.什么是构建工具？

前面一直所说构建工具，这里就来详细谈一下。

【构建工具，主要做以下的工作】

代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。

文件优化：==压缩==JavaScript、CSS、HTML代码，压缩合并图片等。

代码分割：提取多个页面的公共代码，提取首屏**不需要执行部分的代码让其异步加载**。

模块合并：在采用模块化的项目里会有很多个模块和文件，需要==通过构建功能将模块分类合并成一个文件==。

自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。

代码校验：在代码被提交到仓库前需要校验代码==是否符合规范，以及单元测试是否通过==。

自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统

5.使用vite构建vue项目

pnpm create vite@latest

与webpack的差别

在这里插入图片描述

index.html放在根目录：官网的解释是vite是服务器，index.html是项目入口文件

vite.config.js替换vue.config.js，作为vite项目依赖文件

在这里插入图片描述

@vitejs/plugin-vue提供支持vue3单文件组件

6.执行打包会报错

错误信息

Refused to apply style from ‘http://127.0.0.1:5500/assets/index-351bd726.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

引起此类报错的原因是==因为js、css等文件过多，需手动添加（./）获取当前文件路径，但js等文件过多手动添加路径==会引起冲突，所以直接在打包的配置文件中加上base:'./'

7.ES Module解析模块

与common.js不同的是，es module模块是在编译阶段，效率比common.js高。

ESM 的==运行机制是，JS 引擎在对脚本静态分析的时候，遇到模块加载命令import， 会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值(也就是在编译阶段只是做一个标志)。 因此，ESM 是动态引用，并且不会缓存值==，模块里面的变量绑定其所在的模块。

8.vite的依赖预构建

首次执行 vite 时，服务启动后会对 node_modules 模块和配置 optimizeDeps 的目标进行预构建！

为什么要预构建？

目的是为了兼容 CommonJS 和 UMD，以及提升性能。

兼容CommonJs UMD:因为vite的开发服务器将所有模块都视为esm，如果有CommonJs，需要将它转换成ESM.

性能：vite将有许多内置模块的依赖关系转换成单个模块，以便后续页面使用。一些模块将它们自己的文件相互导入，这样，当我们执行import的时候，执行的HTTP请求也会非常多。尽管服务器在处理这些请求时没有问题，但**大量的请求会在浏览器端造成网络堵塞**。导致页面的加载速度相当慢。通过预构建成为一个模块，我们就只需要一个HTTP请求了。

在这里插入图片描述

.vite/deps可以看预构建！！！

裸模块

一个项目中，只有==裸模块==才会构建！

何为裸模块？

  • 用名称去访问的模块是裸模块
  • 用路径去访问的不是裸模块

依赖预构建大致的流程是：

1、先收集打包的依赖，比如我在代码中引入了vue 那么匹配到vue后到node_modules中找到对应vue的esm模块js 2、然后把js都存储到一个对象中 （收集依赖的过程也用到了esbuild build方法，收集的过程是在一个esbuild插件中完成的）

3、得到一个所有依赖的对象后

4、再次用esbuild对这些依赖进行编译，

5、编译后的文件存储到.vite中 下次再使用依赖的时候直接从.vite中获取,不需要再次编译 预构建之后的产物代码，在 node_module 目录下的 .vite 文件夹 依赖预构建的产物会放在 它的deps 目录下

9.vite跨域配置

vite.config.js的配置：
server: {
 open: false,
 host: '127.0.0.1',
 port: 3456,
 proxy: {
 '^/api/': {
 target: 'https://www.bilibili.com/', // 后台服务器地址
 changeOrigin: true, /* 允许跨域 */
 rewrite: (path) => path.replace(/^\/api/, '')
 	}
 		}
 			}

10.vite开发环境，生产环境配置

开发环境：运行在本地的环境 npm run dev

生产环境：放到服务器上面的环境 npm run build

在项目根目录下（与package.json同级）新建配置文件 ----------

【1】 .env： 全局的，没有设置其他环境变量时，会加载这个文件里的内容， 比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行

# .env
NODE_ENV = env
VITE_NAME='全局环境'
VITE_BASE_URL=''

【2】 .env.development： 开发环境下的配置文件,执行npm run dev命令，会自动加载.env.development文件 会覆盖.env这个文件里定义的环境变量

# .env.development
NODE_ENV = development
VITE_NAME='开发环境'
VITE_BASE_URL='/api'

【3】 .env.production： 生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件 会覆盖 .env这个文件里定义的环境变量

# .env.production
NODE_ENV = production
VITE_NAME='生产环境'
VITE_BASE_URL = 'http://xxxxxx/api'

".env.[name]"是可以自定义的，在package.json里面做对应的名称修改

根据Vite的约定规则，只有以“VITE_”开头的变量才会在客户端被捕获 捕获方式为：import.meta.env.{参数名}，然后重新启动服务 执行 npm run dev 时候，vite自动去读取.env.development文件里面的配置 执行 npm run build 进行打包，vite自动将.env.production 的内容打包进去 --------------------

"scripts": {
 "dev": "vite --mode development",
 "build": "vite build --mode production",
 "start": "vite --mode production",
 "build:env": "vite build --mode development"

关于package.json 文件中的配置 dev 默认在本地开启测试环境的服务（mode=‘development’）

start 在本地开启正式环境服务 (mode=‘production’)

build 默认打包到正式环境（基础配置取.env.production 文件中内容）

build:env 默认打包到测试环境（基础配置取.env.development 文件中内容）

11.defineConfig和loadEnv

获取环境变量

loadEnv 接收==三个参数==

mode：模式

envDir：环境变量配置文件所在目录

prefix：接受的环境变量前缀，默认为 VITE_ 在vite中默认是VITE_，为 ‘’，则加载所有环境变量

defineConfig 传入一个方法，方法可以接收一个对象，

对象中两个参数：

command, mode command ：

server(run dev)

build(run build)

export default defineConfig(({ mode, command }) => {
    const config = loadEnv(mode, './')
    console.log(config);
    return {
        server: {
            open: true,
            host: '127.0.0.1',
            port: 3456,
            proxy: {
                '^/api/': {
                    target: 'http://localhost:8080/', // 后台服务器地址
                    // target: config.VITE_TARGET,
                    changeOrigin: true, /* 允许跨域 */
                    rewrite: (path) => path.replace(/^\/api/, '')
                }
            }
        },
        base: './'
    }
})

/*
*{
  VITE_NAME: '开发环境',
  VITE_BASE_URL: '/api',
  VITE_USER_NODE_ENV: 'development'
}
/

然后就可以从config里面读取到配置文件的信息了。

12.如果我们有axios请求，打包后为啥会报错以及解决办法？

打包后dist目录中index.html直接 live server，运行不ok

因为==不是一个服务器==，根本没有跨域

再package.json的scripts中，

添加"preview":"vite preview --mode development"

因为刚才执行打包命令为： build:env 默认打包到测试环境（基础配置取.env.development 文件中内容）

所以预览也添加 --mode development 然后，执行 npm run preview，打包文件执行跨域o

13.vite使用css css module的模块化

vite处理原生css

Vite 默认就支持对 css 代码的处理

​ 可以通过.js文件中import引入css文件

​ 也可以link标签导入css文件

css modules 模块

CSS Module并不是css官方的标准，也不是浏览器的特性。而是通过一些构建工具(vite webpack)对它进行构建。对 CSS 类名和选择器的作用域进行限定的一种方式（类似命名空间）

命名规范为：css模块文件以.module.[css|less|scss]结尾

运行时的方案最典型的就是 BEM

它是通过 .block__element–modifier 这种==命名规范来实现的样式隔离， 不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的==。 但是这种方案毕竟不是强制的，还是有样式冲突的隐患。

css隔离方案有两种：

​ 一类是==运行时的通过命名区分， 一类是编译时==的自动转换 CSS，添加上模块唯一标识。

​ 编译时的方案有两种，一种是 scoped，一种是 css modules

scoped 是 vue-loader 支持的方案， 它是通过编译的方式在元素上添加了 data-xxx 的属性， 然后给 css 选择器加上[data-xxx] 的属性选择器的方式实现 css 的样式隔离

css-modules 在 vue、react 中都可以用， 它是**通过编译的方式修改选择器名字为全局唯一的方式来实现 css 的样式隔离**. CSS-Module引入的时候要以模块引入!!!

14.import模块

import.meta返回当前模块的信息，具体信息看看运行环境！

1、import.meta.url 返回当前模块的 URL 路径

2、import.meta.scriptElement 返回加载模块的那个

15.vite使用css变量

var()函数用于读取变量 还可以使用第二个参数，表示变量的默认值

定义变量：–变量名

全局变量

:root{
 --m-bg:#f00;
}
div{
 background:var(--m-bg)
}

16.vite路径别名

resolve: {
        alias: {
            "@csssrc": 'a/b/c'
        }
    }

17.CSS预处理器配置：

Vite 同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。 没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖

preprocessorOptions: {
 scss: 	{
 		additionalData: `@import "./src/assets/inx.scss";`
 	}}


npm install -g sass
# .scss and .sass
npm add -D sass
# .less
npm add -D less
# .styl and .stylus
npm add -D stylus

18.vite如何批量导入 js模块、json、图片资源

vite导入有两种方法：

1、Vite 支持 import.meta.glob

函数从文件系统导入多个模块 匹配到的文件默认是懒加载的，为动态导入， 通过遍历加 then 方法可拿到对应的模块文件详情信息 构建时，会分离为独立的 chunk 【使用 .then ，变成异步的了，会导致一些问题，此处不展开】

2、import.meta.globEager 直接引入所有的模块, 即静态 import 导入

==它们是 Vite 独有的功能==而不是一个 Web 或 ES 标准

导入批量js文件

const jsObj = import.meta.globEager("./assets/js/*")
console.log(jsObj);

使用

jsObj['./assets/js/1.js'].default()
jsObj['./assets/js/2.js'].default()
jsObj['./assets/js/3.js'].default()

导入批量图片

const imgObj = import.meta.globEager('./assets/img/*')

console.log(imgObj);
const keys = Object.keys(imgObj)
for (let p of keys) {
  images.value.push(imgObj[p].default)
}

导入图片

// 如果我们只是想获取脚本的url，不想导入脚本，可以通过在导入路径后添加 后缀
 //只是想获取脚本的url，不想导入脚本，添加?url后缀。
import jsUrl from './assets/js/a.js?url'
//import导入的图片会转换为一个路径
import imgsrc from './assets/vue.svg' 
 //?raw，以二进制的方式读取
import iconImg from './assets/images/icon.png?raw

19.vite插件的形式

Vite`插件是一个==拥有名称、创建钩子==(build hook)或 生成钩子(output generate hook)的对象

export default {
 	name: 'my-vite-plugin',
 	resolveId(id) {},
 	load(id) {},
 	transform(code) {}
 }

如果插件需要==配置功能==，则是一个接受插件选项，返回插件函数的函数

eg：options是配置选项

export default function(options){
	name:'my-vite-plugin',
   	resolveId(id){},
    load(id){},
    transform(code){}
	}

20.vite插件的钩子

开发时，vite dev server会创建一个钩子容器，按照Roll up调用==创建钩子函数的规则==来请求各个钩子函数。

下面的钩子会在服务启动时调用一次(文件更新也不会调用)

- options：替换或操纵`rollup`选项
 - buildStart：开始创建

vite特有的钩子

- config: 修改Vite配置
 - configResolved：Vite配置确认
 - configureServer：用于配置dev server，可以进行中间件操作
 - transformIndexHtml：用于转换宿主页
 - handleHotUpdate：自定义HMR更新时调用

下面钩子每次有模块请求时都会被调用:（核心hook）

- resolveId：创建自定义确认函数，常用语定位第三方依赖（找到对应的文件）
 - load：创建自定义加载函数，可用于返回自定义的内容（加载文件源码）
 - transform：可用于转换已加载的模块内容（转变源码为需要的代码）

其余

强制插件排序：enforce
 pre：在 Vite 核心插件之前调用该插件
 默认：在 Vite 核心插件之后调用该插件
 post：在 Vite 构建插件之后调用该插件
 plugins: [{enforce: 'pre'}

按需应用插件：apply
 默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。
 apply 属性指明它们仅在 'build' 或 'serve' 模式时调用：
 plugins: [{apply: 'build'}

前置插件的标准模板

export default function viteTransformCSSModulesPlugin() {
 const name = 'vite-plugin-transform-css-modules';
 return {
 enforce: 'pre',
 name,
 // raw，文件里面的代码；id，文件的绝对路径
 async transform(raw, id) { }
 }
 }

插件命名前缀格式

如果你的插件只适用于特定的框架：
 vite-plugin-vue- 前缀作为 Vue 插件
 vite-plugin-react- 前缀作为 React 插件
 vite-plugin-svelte- 前缀作为 Svelte 插件

Vite 专属的插件：
 Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。
 在 package.json 中包含 vite-plugin 关键字。
 在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明
 （如，本插件使用了 Vite 特有的插件钩子）。

在这里插入图片描述

21.transform钩子

处理==图片== CSS VUE组件

transform(code, id)：在每个传入模块请求时被调用，主要是用来转换单个模块；

code 待转换的代码，就是导入的文件内容
id 当前正在解析文件的绝对路径 或者 由 load 返回的值

export default function () {
    return {
        name: 'vite-plugin',
        transform(code, ids) {
            // console.log(typeof ids);
            if (ids.indexOf("1.png") > 0) {
                console.log(code);
                return `export default "/src/assets/3.png"`
            }
            // if (ids.indexof("1.png") > 0) {
            //     console.log(ids);
            //     console.log(code);
            // }
        }
    }
}

22.load钩子

浏览器发起请求以后，dev server 端会通过 middlewares 对请求做拦截，
然后对源文件做 resolve、load、transform 等操作，
然后再将转换以后的内容发送给浏览器。

resolveId 就是去找到对应的文件，输出本地的实际的路径，

load 输出是文件模块的代码字符串
 加载本地文件到内存中
 当然了你也可以在load里修改一下源码，
 然后再传入到 transform
 
transform 就是将源码转变成目标代码
 在这里进一步对源码进行操作
 转换完成的内容直接返回给浏览器
 它处理的是模块
 
 
【load 与 transform】：
 共同点：
 是它们都能修改内容；
 
 区别是：
 load，它处理的是文件
 transform，它转换的是模块
 
所以在load中，可以直接写，<template>之类的代码
但在 transform 中，就要通过h渲染函数

load(id):

(ids.indexof(“1.png”) > 0) {
// console.log(ids);
// console.log(code);
// }
}
}
}




## 22.load钩子

```js
浏览器发起请求以后，dev server 端会通过 middlewares 对请求做拦截，
然后对源文件做 resolve、load、transform 等操作，
然后再将转换以后的内容发送给浏览器。

resolveId 就是去找到对应的文件，输出本地的实际的路径，

load 输出是文件模块的代码字符串
 加载本地文件到内存中
 当然了你也可以在load里修改一下源码，
 然后再传入到 transform
 
transform 就是将源码转变成目标代码
 在这里进一步对源码进行操作
 转换完成的内容直接返回给浏览器
 它处理的是模块
 
 
【load 与 transform】：
 共同点：
 是它们都能修改内容；
 
 区别是：
 load，它处理的是文件
 transform，它转换的是模块
 
所以在load中，可以直接写，<template>之类的代码
但在 transform 中，就要通过h渲染函数

load(id):

在==每个传入模块请求时被调用，可以自定义加载器，可用来返回自定义的内容 输出是文件模块的代码字符串，默认就是直接读取文件内容并返回==

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

YOLOv8来啦！YOLO内卷期模型怎么选？9+款AI硬件如何快速部署？深度解析

YOLOv8来啦！YOLO内卷期模型怎么选？9+款AI硬件如何快速部署？深度解析

在这新春佳节到来之际&#xff0c;回顾整个虎年&#xff0c;堪称YOLO内卷元年&#xff0c;各路YOLO系列神仙打架&#xff0c;各显神通。一开始大部分用户做项目做实验还是使用的YOLOv5&#xff0c;然后YOLOv6、YOLOv7、PP-YOLOE、DAMO-YOLO、RTMDet就接踵而至&#xff0c;于是就…
阅读更多...
SpringBoot原理解析

SpringBoot原理解析

目录 一、Profile功能 &#xff08;一&#xff09;、application-profile功能 &#xff08;二&#xff09;、Profile条件装配功能 &#xff08;三&#xff09;、profile分组 二、外部化配置 &#xff08;一&#xff09;、外部配置源 &#xff08;二&#xff09;、配置文…
阅读更多...
消息队列 ---nsq

消息队列 ---nsq

设计 topic和channel 单个nsqd实例旨在一次处理多个数据流。流称为“主题”&#xff0c;一个主题有 1 个或多个“通道”。每个通道都会收到一个主题的所有消息的_副本_。 主题和通道道_不是_提前配置的。主题是在首次使用时通过发布到指定主题或订阅指定主题的通道来创建的。…
阅读更多...
如何看懂行业分析报告？

如何看懂行业分析报告？

从下面几部分聊聊行业分析&#xff1a;1.什么时候需要做行业分析&#xff1f;2.如何做行业分析&#xff1f;3.案例学习4.在工作中如何应用&#xff1f;5.在生活中如何应用&#xff1f;1.什么时候需要做行业分析呢&#xff1f;当你在对自己进行职业规划的时候&#xff0c;会思考…
阅读更多...
【SpringCloud15】SpringCloud Stream消息驱动

【SpringCloud15】SpringCloud Stream消息驱动

1.消息驱动概述 1.1 为什么要引入消息驱动 1.2 是什么 概述&#xff1a;屏蔽底层消息中间件的差异&#xff0c;降低切换成本&#xff0c;统一消息的编程模型 官网 Spring Cloud Stream是用于构建与共享消息传递系统连接的高度可伸缩的事件驱动微服务框架&#xff0c;该框架提…
阅读更多...
一 、Qml开发之环境搭建

一 、Qml开发之环境搭建

进入官网下载相应版本的qtcreator &#xff1a;https://download.qt.io/archive/qt/5.12/5.12.6/ 1.1 安装的时候注意如下对话框&#xff0c;需要选择下图所示的必须选项&#xff0c;因为我是mac 所以选择的macOS下载完之后进行点击安装&#xff0c;安装后运行软件图片如下&…
阅读更多...
小程序uni-app介绍

小程序uni-app介绍

uni-app介绍 uni-app简介 uni-app 是一个使用**Vue.js **开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;微信/支付宝/百度/头条/QQ/钉钉/淘宝&#xff09;、快应用…
阅读更多...
C++|读写xml文件开源库tingxml2的使用

C++|读写xml文件开源库tingxml2的使用

参考&#xff1a; TinyXML使用方法[通俗易懂] https://cloud.tencent.com/developer/article/2037579 TinyXML2 入门教程&#xff08;这篇写很好&#xff0c;本文侧重讲解使用不过做多介绍&#xff09; 不了解xml的建议自行查阅&#xff0c;在此不赘述。 开源库github链接&…
阅读更多...
Python中的列表、元组、字典

Python中的列表、元组、字典

​​​​​​​列表是一种让程序员在代码中批量表示/保存数据的方式&#xff0c;元组和列表相比&#xff0c;是非常相似的&#xff0c;只是列表中放哪些元素可以修改调整&#xff0c;元组中放的元素是创建元组的时候就设定好的&#xff0c;不能修改调整。 列表和元组类似于其他…
阅读更多...
SpringBoot 2-9-2 ServletAPI

SpringBoot 2-9-2 ServletAPI

使用27个解析器中 ServletRequestMethodArgumentResolver Step1 页面请求 注意RestController ResponseBody Controller Controller 将当前修饰的类注入SpringBoot IOC容器&#xff0c;使得从该类启动后就被实例化 ResponseBody 表示它会以Json字符串的形式返回给客户…
阅读更多...
【日常系列】LeetCode《27·动态规划2》

【日常系列】LeetCode《27·动态规划2》

数据规模->时间复杂度 <10^4 &#x1f62e;(n^2) <10^7:o(nlogn) <10^8:o(n) 10^8<:o(logn),o(1) 内容 1&#xff09;爬楼梯、打家劫舍问题 2&#xff09;0-1&#xff0c;多重&#xff0c;完全&#xff0c;二维被动背包问题 lc 70【剑指 10 - 2】【top100】&…
阅读更多...
Maven仓库集成与使用

Maven仓库集成与使用

1.概念:Maven主要服务于基于java平台的项目构建(编译、测试、生成文档、打包、部署等)&#xff0c;依赖管理和项目信息管理。 2.四大特性: 2.1:依赖管理系统(jar包管理, jar 升级时修改配置文件即可) 依赖(Coordination):由groupId、artifactId、version组成 …
阅读更多...
PHP MySQL 预处理语句

PHP MySQL 预处理语句

预处理语句对于防止 MySQL 注入是非常有用的。 预处理语句及绑定参数 预处理语句用于执行多个相同的 SQL 语句&#xff0c;并且执行效率更高。 预处理语句的工作原理如下&#xff1a; 预处理&#xff1a;创建 SQL 语句模板并发送到数据库。预留的值使用参数 "?" 标…
阅读更多...
Python 实现 JSON 解析器

Python 实现 JSON 解析器

Json 解析 文章目录Json 解析Json 的组成对象结构数组结构词法分析逻辑性解析解析对象类型解析数组类型完整代码小结Json 的组成 JSON结构共有2种 对象结构数组结构 一个合法的JSON字符串可以包含这几种元素: 特殊符号,如"{" “}“表示一个JSON Object&#xff0…
阅读更多...
将DataFrame进行转置的DataFrame.transpose()方法

将DataFrame进行转置的DataFrame.transpose()方法

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 将DataFrame进行转置 DataFrame.transpose() 选择题 关于以下python代码说法错误的一项是? import pandas as pd dfpd.DataFrame({a:[a1,a2],b:[b1,b2]}) print("【显示】df:\n"…
阅读更多...
高德地图红绿灯读秒是怎么实现的？（一）

高德地图红绿灯读秒是怎么实现的？（一）

关于这个读秒实现功能众说风云&#xff0c;目前有两种说法&#xff0c;一种说是靠大数据分析&#xff0c;一种说是靠交管部门数据。 我们先看一下官方的回应&#xff1a;可以自行去抖音看官方号的解释。 以下为原答&#xff1a; 有人说是接入了地方交管数据&#xff0c;其实政策…
阅读更多...
2022年度 FinClip 扩展 SDK 推荐！

2022年度 FinClip 扩展 SDK 推荐！

2022年&#xff0c;FinClip 团队进行了24个产品迭代&#xff0c;为了丰富FinClip 的平台能力&#xff0c;除了核心SDK之外&#xff0c;我们还为开发者们提供了扩展SDK&#xff0c;扩展SDK是一个依赖核心SDK的库&#xff0c;里面提供了核心SDK中所没有的各种小程序API。 官方希…
阅读更多...
arduino和物联网云端平台系列---物模型之事件

arduino和物联网云端平台系列---物模型之事件

事件&#xff0c;先下个简单的定义就是发生了什么事件 系列文章都是已经完成了基本的库安装和使用为前提 物模型之事件 基本的添加步骤不描述了&#xff0c;设置一个测试用例 事件我已经设定好了&#xff0c;输出参数代表的是在云端得到的输出&#xff0c;需要我们在设备进行…
阅读更多...
【程序环境和预处理】C语言

【程序环境和预处理】C语言

前言&#xff1a; 到此节便是我们C语言学习的终章了&#xff0c;对C语言的学习便告一段落了&#xff0c;到学完这一章节我们便要进入下一个主题的学习了。 目录1. 程序的翻译环境和执行环境2. 详解编译链接2.1 翻译环境2.2 编译本身也分为几个阶段2.3 运行环境3. 预处理详解3.1…
阅读更多...
ESP32设备驱动-L3GD20三轴角速率传感器驱动

ESP32设备驱动-L3GD20三轴角速率传感器驱动

L3GD20三轴角速率传感器驱动 1、L3GD20介绍 L3GD20 是一款低功耗三轴角速率传感器。 它包括一个传感元件和一个 I2C 接口，能够通过数字接口 (I2C/SPI) 向外部世界提供测量的角速率。传感元件采用意法半导体开发的专用微加工工艺制造，用于在硅晶片上生产惯性传感器和执行器。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023