Vue3+Vite+TypeScript常用项目模块详解

 

目录

1.Vue3+Vite+TypeScript 概述

1.1 vue3 

1.1.1 Vue3  概述

1.1.2 vue3的现状与发展趋势

1.2 Vite

1.2.1 现实问题

1.2 搭建vite项目

1.3 TypeScript

1.3.1 TypeScript 定义

1.3.2 TypeScript 基本数据类型

 1.3.3 TypeScript语法简单介绍

2. 项目配置简单概述

2.1 eslint 校验代码工具配置

2.1.1 eslint定义

2.1.2 eslint安装

2.2 prettier格式化工具配置

2.2.1 prettier 定义

2.2.2 prettier安装

2.3 stylelint 配置

2.3.1 stylelint定义

2.3.2 scss 安装stylelint依赖

2.4 husky配置

2.4.1 husky定义

2.4.2 husky 安装

3.项目集成

3.1 集成element-plus

3.1.1 安装

3.1.2 应用

3.2 src别名的配置

3.3 Mock

3.3.1 Mock 定义

3.3.2 Mock 使用场景

3.3.3 安装和测试

3.4 axios封装

3.5 集成Sass

3.5.1 sass介绍

3.5.2 安装

3.5.3 sass语法


 

现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。

1.Vue3+Vite+TypeScript 概述

1.1 vue3 

1.1.1 Vue3  概述

Vue.js是一种前端JavaScript框架,可以用于构建交互式Web页面和单页应用程序。Vue.js 3是Vue.js框架的最新版本,于2020年9月正式发布。Vue.js 3相对于Vue.js 2来说有以下的变化和改进:
1. 更好的性能:Vue.js3在性能上进行了优化,通过优化响应式系统,可以提高应用程序的性能。
2. 更好的TypeScript支持:Vue.js 3对TypeScript的支持更好,并且内置了TypeScript支持。
3. 更好的开发人员体验: Vue.js 3 对于模板编译器进行重大升级,所有原始模板现在都被编译成函数,这意味着编译时会更快,运行时将更少依赖于Vue.js本身。
4. 更好的组件API:Vue.js 3引入了Composition API,它可以帮助开发者更轻松、更灵活地编写组件代码。
5. 更好的Tree-Shaking支持:Vue.js 3 支持了更好的树摇功能。它允许您仅包含应用程序中需要的代码,从而大大减少了加载时间和应用程序的大小。

1.1.2 vue3的现状与发展趋势

目前,Vue 3 已经成为前端开发中非常流行的框架之一。很多公司和开发者都在使用 Vue 3 开发他们的项目。以下是 Vue 3 的一些发展趋势:

1.更好的 TypeScript 支持:Vue 3 引入了很多新的 TypeScript 类型定义,提供了更好的类型检查和自动补全功能。这使得开发者可以更加轻松地使用 TypeScript 编写 Vue 应用。
2.Composition API 的普及:Composition API 是 Vue 3 中引入的一种新的组件 API,可以帮助开发者更好地组织和重用组件逻辑。随着越来越多的开发者开始使用 Composition API,它将成为 Vue 3 开发中的一个重要组成部分。
3.更快的性能和更小的包体积:Vue 3 引入了很多性能优化,包括更快的渲染速度、更小的包体积等等。这些改进使得 Vue 3 成为一个更加高效和可靠的框架,可以帮助开发者更快地构建高质量的应用。
4.更多的社区贡献:Vue 3 已经得到了广泛的社区支持,很多开发者和公司都在为 Vue 3 开发新的插件、组件和工具。这将进一步增强 Vue 3 的功能和可用性。

 

1.2 Vite

1.2.1 现实问题

在浏览器支持 ES 模块之前,JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。

然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。

1.2 搭建vite项目

使用 NPM:

npm create vite@latest

使用 PNPM:

pnpm create vite

1.3 TypeScript

1.3.1 TypeScript 定义

TypeScript 简称:TS,是 JavaScript 的超集。在 JS 基础之上,为 JS 添加了类型支持。TypeScript = Type + JavaScript

1.3.2 TypeScript 基本数据类型

如下图所示:

c34d0481e9d24090a7e071606840a946.png

 1.3.3 TypeScript语法简单介绍

1.3.3.1 原始类型

// 数值类型
let age: number = 20// 字符串类型
let myName: string = 'hello'// 布尔类型
let isLoading: boolean = false// undefined
let un: undefined = undefined// null
let timer:null = null

1.3.3.2 联合类型

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

 

let arr: (number | string)[] = [12, 'a']

 1.3.3.3 数组类型

let 变量: 类型[] = [值1,...]let 变量: Array<类型> = [值1,...]

let numbers: number[] = [40, 43, 45] 

 1.3.3.4 函数类型


普通函数:function 函数名(形参1: 类型, 形参2:类型): 返回值类型 { }
箭头函数:const 函数名(形参1: 类型, 形参2:类型):返回值类型 => { }

// 函数声明
function add(num1: number, num2: number): number {return num1 + num2
}// 箭头函数
const add = (num1: number, num2: number): number => {return num1 + num2
}

1.3.3.5 接口

当一个对象类型被多次使用时,可以有两种方式来来描述对象的类型,达到复用的目的。

interface 接口名  {属性1: 类型1, 属性2: 类型2,
}
interface login_form {username:string,password:string
}

如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用

interface 接口1 extends 接口2来实现属性或方法的复用。

1.3.3.6 泛型

泛型,顾名思义,宽泛的类型,就是类型是不固定的;可以适用于多个类型,使用类型变量(比如T)帮助我们捕获传入的类型,之后我们就可以继续使用这个类型。

泛型函数

// T 只是一个名字而已,可以改成其他的,例如 Rfunction fn<T>(value: T): T { return value }
const num = fn<number>(10)

泛型接口
 

interface myinterface<T> {list:Array<T> 
}

当然ts还有很多内容,这里仅仅只是进行简单介绍。

2. 项目配置简单概述

2.1 eslint 校验代码工具配置

2.1.1 eslint定义

官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。

代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。ESLint 这样的工具可以让程序员在编码的过程中发现问题,而不是在执行的过程中发现问题。

2.1.2 eslint安装

安装eslint

pnpm i eslint -D

生成配置文件:.eslint.cjs

npx eslint --init

2.2 prettier格式化工具配置

2.2.1 prettier 定义

有了eslint,为什么还要有prettier?eslint针对的是javascript,他是一个检测工具,包含js语法以及少部分格式问题,在eslint看来,语法对了就能保证代码正常运行,格式问题属于其次;

而prettier属于格式化工具,它看不惯格式不统一,所以它就把eslint没干好的事接着干,另外,prettier支持包含js在内的多种语言。总结起来,eslint和prettier这俩兄弟一个保证js代码质量,一个保证代码美观。

2.2.2 prettier安装

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.3 stylelint 配置

2.3.1 stylelint定义

stylelint为css的lint工具。可格式化css代码,检查css语法错误与不合理的写法,指定css书写顺序等。

2.3.2 scss 安装stylelint依赖

项目中使用scss作为预处理器,安装以下依赖:

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

2.4 husky配置

2.4.1 husky定义

在上面我们已经集成好了我们代码校验工具,但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中,那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。

要做到这件事情,就需要利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行pnpm run format来自动的格式化我们的代码。

2.4.2 husky 安装

安装husky

pnpm install -D husky

执行

npx husky-init

会在根目录下生成个一个.husky目录,在这个目录下面会有一个pre-commit文件,这个文件里面的命令在我们执行commit的时候就会执行。

 

3.项目集成

3.1 集成element-plus

element-plus基于 Vue 3,面向设计师和开发者的组件库。

3.1.1 安装

安装element-plus

pnpm install element-plus

安装组件库

pnpm install element-plus @element-plus/icons-vue

3.1.2 应用

入口文件main.ts全局安装element-plus

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import elementplus from 'element-plus'
import 'element-plus/dist/index.css'
const app=createApp(App)
app.use(elementplus).mount('#app')

组件使用

<script setup lang="ts">import {Plus} from '@element-plus/icons-vue'
</script><template><div><el-button type="primary" :icon="Plus">hello</el-button></div></template>

3.2 src别名的配置

在开发项目的时候文件与文件关系可能很复杂,因此我们需要给src文件夹配置一个别名。

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src}}
})

TypeScript 编译配置

// tsconfig.json
{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录"paths": { //路径映射,相对于baseUrl"@/*": ["src/*"] }}
}

3.3 Mock

3.3.1 Mock 定义

Mock测试就是在测试过程中,对于某些不容易构造或者容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。
Mock可以模拟一个http接口的后台响应,就这么简单,可以模拟request、response。

3.3.2 Mock 使用场景

1.调用第三方系统而无法给客户搭建一套演示环境
2.调用第三方系统而无法进行稳定的开发测试
3.调用第三方系统而无法进行自己系统的性能测试
4.后端未完成接口开发,前端要先一步开发
5.真实场景的返回值覆盖不了测试场景

3.3.3 安装和测试

安装依赖

pnpm install -D vite-plugin-mock@2.9.6 mockjs

在 vite.config.ts 配置文件启用插件。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import {viteMockServe} from 'vite-plugin-mock'export default ({ command })=> {return {plugins: [vue(),viteMockServe({localEnabled: command === 'serve',}),],}
}

在根目录创建mock文件夹:去创建我们需要mock数据与接口,在mock文件夹内部创建一个user.ts文件

//用户信息数据
function createUserList() {return [{username: 'admin',password: '111111',},{username: 'system',password: '111111',},]
}export default [// 用户登录接口{url: '/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username == username && item.password == password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: {message: '登录成功'}  }},},]

最后就可以通过axios进行测试。

3.4 axios封装

在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候我们经常会把axios进行二次封装。

1:使用请求拦截器,可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2:使用响应拦截器,可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

import axios from "axios";
import { ElMessage } from "element-plus";
//创建axios实例
let request = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config => {return config;
});
//响应拦截器
request.interceptors.response.use((response) => {return response.data;
}, (error) => {//处理网络错误let msg = '';let status = error.response.status;switch (status) {case 401:msg = "token过期";break;case 403:msg = '无权访问';break;case 404:msg = "请求地址错误";break;case 500:msg = "服务器出现问题";break;default:msg = "无网络";}ElMessage({type: 'error',message: msg})return Promise.reject(error);
});
export default request;

3.5 集成Sass

3.5.1 sass介绍

Sass 是一种 CSS 的预编译语言。它提供了 变量(variables)、嵌套(nested rules)、 混合(mixins)、 函数(functions)等功能,并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理, 并且易于在项目内部或跨项目共享设计。

3.5.2 安装

pnpm install sass sass-loader

但是你会发现在src/styles/index.scss全局样式文件中没有办法使用变量 ,因此需要给项目中引入全局变量。在style/variable.scss创建一个variable.scss文件!里面存放全局变量,然后在vite.config.ts中配置如下:
 

export default defineConfig((config) => {css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";',},},},}
}

配置完毕你会发现scss提供这些全局变量可以在组件样式中使用了。

3.5.3 sass语法

变量 

 在sass中我们可以把反复使用的css属性定义成变量,然后通过变量名去引用他们,从而不用重复书写这个属性值,使用$符号定义变量。在sass变量名中的中划线和下划线是等同的,不做区分

$highlight-border: 1px solid red;

普通嵌套

 sass提供了一种嵌套式写法,只需写一次且可读性更高

 div{h1{color:$red;}}

伪类选择器

当我们使用到伪类选择器的时候

article a {color: blue;:hover { color: red }
}

 编译后的css代码是这样子的

article a {color: blue;
}
article a :hover {color: red;
}

这时候sass就提供了&给我们使用,&代表的是我们父类的选择器,这里的&代表的就是article a,我们可以把sass代码写成这样

article a {color: blue;&:hover { color: red }
}

混合器mixin

我们可以用@mixin标识符定义一大段的css样式,然后在不同地方用@include重复复用它

@mixin alert {background-color: yellow;color: red;
}h1{@include alert}

 混合器支持像函数一样进行参数传递,来达到模块定制的功能

@mixin alert($text-color,$backgroud-color) {background-color: $backgroud-color;color: $text-color;
}h1{@include alert(red,blue)}

继承

继承是SASS中非常重要的一个特性,可以通过@extend指令在选择器之间复用CSS属性,并且不会产生冗余的代码。

@mixin alert($text-color,$backgroud-color) {background-color: $backgroud-color;color: $text-color;
}h1{@include alert(red,blue)}h2{@extend h1}

@import

 sass可以通过@import的形式导入其他sass文件,达到模块化的效果, 那些专门供别的sass文件import的文件被称为局部文件,sass有个特殊的约定为这些文件命名。那就是以下划线开头,在引入的时候还可以省略下划线。举例来说,你想导入styles/_a.scss这个局部文件里的变量,你只需在样式表中写@import "styles/a"。

这篇文章到此结束,由于篇幅问题其中的很多内容也是仅仅简单的介绍一下比较常用的内容,后面会进行拆分对每一个模块内容进行详细的介绍和代码实战。

23bdfe03155f4defb896601772c8c505.gif

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 简易版王者荣耀

所有包和类 GameFrame类 package newKingOfHonor;import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.io.File; import java.util.ArrayList;im…

电源控制系统架构(PCSA)之系统分区电源域

目录 4.2 电源域 4.2.1 电源模式 4.2.2 电源域的选择 4.2.3 系统逻辑 4.2.4 Always-On域 4.2.5 处理器Clusters 4.2.6 CoreSight逻辑 4.2.7 图像处理器 4.2.8 显示处理器 4.2.9 其他功能 4.2.10 电源域层次结构要求 4.2.11 SOC域示例 4.2 电源域 电源域在这里被定…

Java魔法解密:HashMap底层机制大揭秘

文章目录 一、 源码深度解析1.1 窥探Java集合框架中的设计思想1.2 逐行解读HashMap的源代码1.2.1 类信息1.2.2 常量属性1.2.3 变量属性1.2.4 节点信息1.2.5 构造方法1.2.6 put方法1.2.6.1 putVal方法1.2.6.2 putTreeVal方法1.2.6.3 tieBreakOrder方法1.2.6.4 treeifyBin方法1.2…

Less 安装教程

文章目录 前言LESS的系统要求安装LESS例子输出Less编译css工具后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Sass和Less &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板…

实战Flask+BootstrapTable最简动态表头及数据(ajax方法)

话不多说,有图有源码 1.实现原理:通过ajax从后端获取表头及数据 前端页面内容 <!DOCTYPE html> {% from "common/_macro.html" import static %} <html> <meta charset"utf-8"> <head> <!-- 引入bootstrap样式 --> <l…

【JAVA】学生信息管理系统

目录 前言 一、环境搭建 二、功能实现 1.学生信息类的创建 2.学生信息的添加功能 3.学生信息的删除功能 4.学生信息的修改功能 5.学生信息的查看功能 三、主类的调用 1.界面的搭建 2.学生端和教师端 3.系统和功能的选择 总结 前言 JAVA实现的学生信息管理…

超详细的的PyTorch安装教程,成功率高,适合初学者,亲测可用。

啰嗦几句&#xff1a;网上的教程很多&#xff0c;安装的方法多种多样&#xff0c;操作复杂&#xff0c;成功率还不高。小编在淘宝专门帮助不会安装的小伙伴远程配置环境&#xff0c;这方法都是测试过了&#xff0c;适用大部分人的&#xff0c;完全按照文章来操作&#xff0c;基…

服务化通信OPC实操

实操也是基于视频进行一些笔记&#xff0c;没得写就少写了 准备 Nuget包准备&#xff1a;OPCfoundation 一般都是使用Ua&#xff0c;当然也是有&#xff1a; 客户端链接服务器参数&#xff1a;IP Port 认证 登录用户名 Session 的实例化创建 进行使用&#xff1a; 因为Ses…

【C++】哈希(位图、布隆过滤器)

一、哈希的应用&#xff08;位图和布隆过滤器&#xff09; 1、位图&#xff08;bitset&#xff09; &#xff08;1&#xff09;位图概念 【题目】 给 40亿 个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这 40亿 个数中。…

STM32 CAN协议讲解以及代码

STM32 CAN 文章目录 STM32 CAN前言一、CAN外设1.主控制寄存器CAN_MCR2.位时序寄存器CAN_BTR3.CAN的发送邮箱4.CAN的接收FIFO5.验收筛选器 二、代码配置1.初始化2.发送数据3.接收数据4.main.c 前言 前面学习了CAN的一些理论知识&#xff0c;他在我们的STM32里面是怎么用的呢 前…

VUE简易购物车程序

目录 效果预览图 完整代码 效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

【日常总结】Swagger 3.0 + 集成 knife4j ,并设置header入参

一、场景 环境&#xff1a; 二、问题 思路 &#xff1a; 三、解决方案 &#xff08;推荐&#xff09; Stage 1&#xff1a;接入knife4j 依赖 Stage 2&#xff1a;修改 yaml 配置 Stage 3&#xff1a;修改 swagger 3 配置文件 Stage 4&#xff1a;查看效果 Swagger UI …

Java王者荣耀

本设计所开发实现的是基于Java的一个王者荣耀游戏&#xff0c;主要实现键盘控制人物移动&#xff0c;按钮点击事件&#xff0c;英雄动作的改变&#xff0c;鼠标事件&#xff0c;碰撞检测&#xff0c;妲己的三个技能外加普攻&#xff0c;显示生命值&#xff0c;小兵的自动生成和…

HarmonyOS 位置服务开发指南

位置服务开发概述 移动终端设备已经深入人们日常生活的方方面面&#xff0c;如查看所在城市的天气、新闻轶事、出行打车、旅行导航、运动记录。这些习以为常的活动&#xff0c;都离不开定位用户终端设备的位置。 当用户处于这些丰富的使用场景中时&#xff0c;系统的位置能力…

uni-app打包后,打开软件时使其横屏显示

找到page.json文件&#xff0c;在global加入以下代码&#xff1a; 这样就可以横屏显示了。

String类的学习笔记(上):介绍String类及其常用方法的使用

本文介绍了Java中用来描述操作字符串的String类,和其一些常用的基本操作方法,字符串的创建输出,字符串对象的比较,字符串查找,字符串的转化,字符串的替换,字符串拆分,字符串截取,和大小写转换,去除左右空格,子字符串包含,学会使用这些方法,能更方便的使用操作字符串~ String类的…

链表经典面试题

1 回文链表 1.1 判断方法 第一种&#xff08;笔试&#xff09;&#xff1a; 链表从中间分开&#xff0c;把后半部分的节点放到栈中从链表的头结点开始&#xff0c;依次和弹出的节点比较 第二种&#xff08;面试&#xff09;&#xff1a; 反转链表的后半部分&#xff0c;中间节…

蓝桥杯每日一题2023.11.26

题目描述 奖券数目 - 蓝桥云课 (lanqiao.cn) 将每一个数字进行一一枚举&#xff0c;如果检查时不带有数字4则答案可以加1 #include<bits/stdc.h> using namespace std; int ans; bool check(int n) {while(n){if(n % 10 4)return false;n / 10; }return true; } int m…

C语言,通过数组实现循环队列

实现循环队列最难的地方就在于如何判空和判满&#xff0c;只要解决了这两点循环队列的设计就没有问题。接下来我们将会使用数组来实现循环队列。 接下来&#xff0c;为了模拟实现一个容量为4的循环队列&#xff0c;我们创建一个容量为4 1 的数组。 接下来我们将会对这个数组…

pyenv local x.xx.x不生效

我本地原来有个python&#xff0c;之后用pip安装了pyenv&#xff0c;使用pyenv新安装了一个python&#xff0c;设置某个local的时候发现不生效。 这种情况需要检查3个地方。 1.有没有生成这个文件 2.需要重新开一个cmd 3.需要保证pyenv的path环境变量比之前本地的python优先…