中芯12341-优快云博客

原创 nvm动态切换node版本、pnpm安装

因为项目初始化需要使用pnpm install --force，pnpm，因为node未安装pnpm所以无法初始化，此时node版本未18.12，安装完进行初始化pnpm install --force，仍然报错，提示node版本过低。

2025-05-15 19:26:05 786

原创 css基础-学习css 09position定位、grid网格布局

本文介绍了CSS中的定位和网格布局。定位包括五种类型：static（默认流式布局）、relative（相对定位，常与absolute配合使用）、absolute（绝对定位，脱离文档流）、fixed（固定定位，相对于视口）和sticky（混合定位，滚动到阈值后固定）。z-index用于调整元素层级。网格布局通过display: grid实现，grid-template-columns控制列网格大小，grid-gap调节网格间距，minmax()函数设置行/列尺寸范围。网格布局提供了灵活的布局方式，适用于复杂页

2025-05-15 13:49:35 348

原创 css基础-学习css 08 float浮动的使用

浮动（float）是CSS中用于调整元素布局的一种技术，它使元素脱离正常的文档流，并可以向左或向右移动，直到碰到父容器或另一个浮动元素。通过浮动，可以实现文本环绕图片等复杂布局效果。例如，通过设置float: left;，可以让一个盒子元素向左浮动，并让文本环绕其右侧。然而，浮动元素会影响后续元素的布局，因此需要使用清除浮动（clear）技术来避免这种影响。常见的清除浮动方法包括使用clear: both;、overflow: auto;或display: flow-root;。这些方法可以确保浮动元素不会

2025-05-14 14:34:50 355

原创 css基础-学习css 08css溢出内容

在CSS中，overflow属性用于控制内容溢出时的显示方式。默认情况下，overflow: visible允许内容溢出容器而不进行隐藏。通过设置overflow: hidden，可以隐藏超出容器尺寸的内容。使用overflow: scroll会为溢出部分添加滚动条，而overflow: auto则让浏览器根据内容是否溢出来决定是否显示滚动条。此外，overflow-x和overflow-y可以分别控制水平和垂直方向的溢出处理，如为水平溢出添加滚动条而隐藏垂直溢出，或反之。这些属性为开发者提供了灵活的方式来

2025-05-14 09:26:55 195

原创 css基础-学习css 07min- 和 max-

在网页设计中，min和max属性用于控制元素的最小和最大尺寸，确保元素在不同情境下保持适当的尺寸。min-height可以确保元素高度至少为设定值，若内容超出，元素高度会自动增加以适应内容。max-width则确保元素宽度不超过设定值，常用于图片等元素，防止其超出容器或过度拉伸。通过合理使用min和max属性，可以实现更灵活的布局和更好的用户体验，避免内容溢出或元素尺寸不当的问题。

2025-05-13 17:27:34 322

原创 css基础-学习css 06css样式层叠以及优先级、继承

在CSS中，子元素通常会继承父元素的某些样式属性，如颜色和字体大小。然而，并非所有属性都默认继承，因此需要根据常识判断。通过使用inherit、initial、revert、revert-layer和unset等属性值，可以控制样式的继承行为。例如，unset可以将属性重置为自然值，而all: unset则可以取消大部分样式的继承。此外，CSS的层叠顺序和优先级决定了样式的最终呈现，其中!important可以强制覆盖其他样式。内联样式具有最高优先级（1000），其次是ID（100）、类（10）和元素（1）

2025-05-13 13:58:23 858

原创 css基础-学习css 05box盒模型

盒模型是CSS布局中的核心概念，主要分为两种计算规则：content-box和border-box。默认情况下，块级元素使用content-box模型，其最终宽度为width + padding + border。例如，width: 200px、padding: 20px、border: 5px的元素最终宽度为250px。而border-box模型则直接将宽度锁定为width值，内部内容区域会根据padding和border自动压缩。例如，width: 200px、padding: 20px、border:

2025-05-12 16:10:18 371

原创 css基础-学习css 04关系选择器

关系选择器是CSS中用于选择特定元素关系的工具，主要分为四类：1. 后代选择器（如.box p），选择所有嵌套在指定元素内的子元素或孙元素；2. 子代关系选择器（如ul > li），仅选择直接子元素；3. 邻接兄弟选择器（如h1 + p），选择紧接在指定元素后的第一个兄弟元素；4. 通用兄弟选择器（如h1 ~ p），选择所有在指定元素后的兄弟元素。这些选择器通过不同的符号（如空格、>、+、~）来定义元素之间的关系，从而实现精确的样式控制。

2025-05-12 14:22:04 277

原创 css基础-学习css 03区分伪类和伪元素

伪类和伪元素在CSS中用于选择和样式化特定部分的元素，但它们的应用方式和目的有所不同。伪类以单冒号（:）开头，用于选择元素的特定状态或位置，如:hover、:first-child等，它们不脱离原始元素，仅改变其状态或样式。伪元素以双冒号（::）开头，如::first-line、::before，它们可以创建或选择元素的某一部分，甚至插入新的内容，这些内容在DOM中并不存在，但可以像普通元素一样被样式化。简而言之，伪类用于增强现有元素的状态，而伪元素则用于创建或选择元素的特定部分。

2025-05-12 13:59:06 701

原创关于css中text-decoration文本装饰线解惑-补充学习css-02

在CSS3中，text-decoration属性已升级为简写属性，包含四个独立子属性：text-decoration-line（装饰线类型）、text-decoration-color（装饰线颜色）、text-decoration-style（装饰线样式）和text-decoration-thickness（装饰线粗细）。这些子属性可以单独或组合使用，例如text-decoration: underline dotted red;。此外，还有扩展属性如text-decoration-skip-ink（控制文

2025-05-09 15:45:48 356

原创 css基础-css学习02

在CSS中，em是一个相对单位，其长度基于元素的font-size属性。默认情况下，1em等于16px，但具体值取决于font-size的设置。em单位可以用于设置width、height、margin、padding等样式。在父子元素中，如果子元素未设置font-size，则继承父元素的font-size；若子元素设置了font-size，则em基于子元素的font-size计算。此外，DOM是HTML和CSS的结合体，浏览器通过解析HTML和CSS来渲染页面。CSS还提供了多种文本装饰样式，如under

2025-05-09 15:19:16 281

原创 css基础-学习 css

CSS规则集由选择器和声明组成，选择器用于指定HTML元素，如<p>标签，而声明则包含属性和属性值，如color: red;。声明需放在大括号{}内，属性和属性值之间用冒号:分隔，多个声明用分号;隔开。选择器类型包括元素选择器、ID选择器、类选择器、属性选择器和伪类选择器。CSS盒子模型包括内边距（padding）、边框（border）和外边距（margin），可以通过简写形式设置。阴影效果通过text-shadow属性实现，display属性用于控制元素的显示方式，如将行级元素转换为块级元素。

2025-05-09 11:31:02 707

原创使用css Reset适配不同浏览器css样式

import './assets/css/reset.less' ###############添加。结语：这样就实现了统一的css样式布局，它的作用会简化很多我们的原始样式，效果还是很不错的，希望对你有所帮助！3、也可以按照自己的风格去规定重置配置。1、不同浏览器处理浏览器的兼容性。目录：关于不同的浏览器再打开vue3项目的时候，是不可以避免，所以就有了这个css Reset。5、配置好了就一定要使用，在main.ts里面删除css源文件，添加自定义文件路径。// 引入自定义的兼容性css。

2023-10-26 11:05:55 214

原创 vue3 element-plus暗黑模式简单实用

1、首先一定要下载element-plus，相信小伙伴们都是下载了element-plus的。结语：其实这个很简单，就是搞一套这个css文件就可以了，希望对你有一定的帮助！目录：这个是element对vue3新推出的支持一键切换css样式的方式。3、给index.html的html标签上配置class=“light”4、我们想要使用在全局，所以可以再app.vue文件中引入他。4、创建一个vue文件，我们传建一个dark.vue。2、在main.js文件中添加黑暗模式css。在html部分使用它。

2023-10-26 09:44:37 851

原创 vue从0-1使用echarts的方法

（1）、html部分去注册这个div成为echarts，声明一个class即可（获取这个节点）（2.1 ）、js部分注册，这个声明的echarts （这里声明的是option）结语：这样再修缮一下data内容就可以正常展示啦！记住主要的注册步骤其实很好理解！echarts不会去区分v2或者v3的区别，所以普遍上来说，还是可以通用这一套流程的。（2）使用echarts——在mian.js文件中使用。（2）、通过js事件、去声明这个echarts的结构。（一定要仔细看下面代码的注释）好啦，希望对你有所帮助！

2023-10-26 09:19:43 231

原创 vue3项目搭建流程cli脚手架搭建、组件安装、axios封装、vuex封装等操作

闲来无事了解到了vue3的搭建流程和比较好的封装方法，这里对它的内容进行总结，分享给大家；

2023-10-11 12:45:47 374

原创 vue使用echarts基本原理以及报错提示undefined (reading init )“bug解决

的问题，原因是有些博客很老当然使用的echarts的引入方式也根据版本在不断更新，所以我们并不能使用老的引入方式echarts（列入）：（错误引入方式）这里一定会萌新看不懂，这是怎么简历的关联的呢？

2023-08-04 16:05:14 1867 1

原创 vue项目时间选择器怎么默认显示起止时间elementUI el-date-picker设置显示默认开始时间和结束时间

这个操作就是获取new data然后获取年和月，我们的查询范围是默认本年的一月到当前月，所以uptime代表起始时间，overtime代表截止时间。然后在push进去我们的空数组RQ，因为RQ通过v-model进行绑定所以我们直接使用就可以了，就在页面初始加载默认显示了。，但是在el-date-picker组件中是不可以不携带日的，其实也就很明显，我们这样如图的时间就是【‘20230101’，‘20230801’】因为我们new data是需要我们自己手动进行格式编辑的。这是RQ在data数据里面的格式；

2023-08-04 16:03:54 3297 1

原创 vue分辨率自适应不同版本的分辨率排雷和出错

px转换成rem操作，pc端不同分辨率屏幕自适应，css不同分辨率显示布局自适应，vue项目适配屏幕分辨率与屏幕的缩放适配

2023-02-23 16:28:32 2858 1

原创关于更改了vue版本报出的错误：Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a

Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function。 Vue packages version mismatch:- vue@2.6.14 (D:\company_project\jcek\jcek-frame-web\node_modules\vue\dist\vue.runtime.common.js)- vue-template-compiler@2.7.10 (

2023-02-16 08:54:58 2775

原创 vue的created函数中方法执行的顺序设置方法

vue的created函数中方法执行的顺序设置方法

2023-01-06 14:54:34 4697

原创关于项目npm run serve之后的首部报错Multiple assets emit different content to the same filename index.html解决方案

我们都是经常传输文件夹，所以当我们传送到同一个桌面或同一个文件夹之中，那么计算机会自动给我们加上下标也就是英文式的(x),你可以理解为多个同名文件自动排序这个(1)就是我们同一个桌面或同一个文件夹之中的第二个sx项目，你可以这样理解，所以在code这个打开方式是不正确的，我们只需要删掉这个英文格式的()就可以了如果您不是这个问题，那么就考虑你的父文件夹是否有中文了讲项目关闭1把index.html重命名为index.ejs2在node_nodules/webpack/bin/webpack.js中加入

2022-12-05 09:08:25 517

weixin_63136716的博客