- 博客(25)
- 收藏
- 关注
RSS订阅原创 通用综合后台管理系统(js) 1-1
安装element-plus: npm install element-plus (参考element-plus官网)创建框架:npm create vue@latest (参考vue.js官网)项目总体搭建(vue + element-plus)大致配置已完成,可以启动项目。
2023-10-08 16:50:32
65
原创 less和sass
2:使用Vscode 安装 Easy less 插件 写好less文件之后 ctrl +s 保存 就可以直接编译成css 文件 然后在html文件中引入即可。缺点:这种方式是在客户端把less文件编译成css文件,如果less文件体量比较大,会影响页面渲染速度。1:直接引入less文件,再引入js文件把less编译成css。官网:https://lesscss.com.cn/2.在项目中途使用less 下载安装。官网:https://www.sass.hk/sass 使用方式和less 类似。
2023-07-17 15:09:10
61
转载 高阶组件
一,高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组件, 而是一个函数, 这个函数接受一个react组件作为参数,并返回一个新组件, 实现了对原有组件的增强和优化, 可以对原有组件中的state, props和逻辑执行增删改操作, 一般用于代码重用和组件增强优化。1, 属性代理: 通过创建新组建来包裹原始组件, 把原始组件作为新组件的子组件渲染 功能: 可实现对原始组件的。
2023-07-10 20:57:46
67
原创 设置淘宝镜像
博客:https://blog.csdn.net/weixin_42779969/article/details/102475725。运行报错: 1.系统禁止脚本运行 说明 powerShell 没有管理权限 需要设置管理员权限。yarn init // 同npm init，执行输入信息后，会生成package.json文件。2.安装完成如果使用的时候报错 说明下载被拦截 关闭 电脑管家防火墙....Yarn是facebook发布的一款取代npm的包管理工具。如果还想使用原来的国外的镜像。
2023-07-10 20:53:28
101
原创 Hooks
4, 使用setState函数返回的更新函数修改状态值, 参数是新值,修改后自动刷新界面。// 第二个参数是一个数组,可选, 数组中是状态名, 指定那些状态值更新会触发回调函数。// 如果第二个参数是空数组, 则只在初始化时调用,状态更新时不会调用。// 如果第二个参数数组中有状态名, 则只会在数组中的状态更新时调用。// 如果不加第二个参数, 初始化时调用, 任何状态更新都会调用。// 第一个参数是回调函数, 当组件初始化完成和状态更新时调用。2, 在函数式组件中, 使用setState创建状态数据。
2023-07-10 15:41:26
46
原创 4.React路由6.0+hooks配置
v5: <Link to={{pathname:'/user', data:{}}} 接收: props.location.data data名自定义。博客:https://blog.csdn.net/qq_45799465/article/details/124257523。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。import User from "../pages/User/User" // 跳转文件。导入需要路由跳转的组件。
2023-07-10 15:34:50
41
1
原创 vue状态管理与图片懒加载
4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中。2, 在/src目录下新建文件 /src/store/index.js 导入vuex。-- state在映射到计算属性中之后,当作计算属性来用 -->-- state在映射到计算属性中之后,当作计算属性来用 -->3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。3, 在/src/store/index.js中创建管理仓库, 并导出。1, 在组件中使用状态数据。
2023-07-03 20:02:59
42
原创 vant组件库使用
官网:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/移动端组件库参考: https://www.jianshu.com/p/c3c671787d1d。在根目录的babel.config.js文件中添加plugins字段。最后, 在组件中直接复制官方文档中的组件代码即可显示。然后在组件中直接复制官方文档中的组件代码即可显示。导入所有组件: 在main.js中添加如下代码即可。在mian.js中按需导入需要用到的组件。按需导入组件(推荐)
2023-07-03 20:00:08
96
原创 element ui组件库
PC端组件库参考: https://www.jianshu.com/p/669d3e41dca6。element 官网 https://element.eleme.cn/#/zh-CN。在balbel.config.js文件中添加plugins字段。下载安装插件 babel-plugin-component。在main.js中按需导入需要的组件。在组件中直接使用组件标签即可。注意: 有几个特殊的使用如下。1, 下载安装组件库。
2023-07-03 19:55:29
66
原创 跨域解决方案
同源策略:是浏览器出于安全考虑,针对ajax请求的一种限制,浏览器会精致ajax请求非同源接口和数据。同源/同域:当前url和请求数据的url具有相同的协议 域名 ip 端口。1.在客户端所在的同源服务器中设置服务器代理。1.在目标服务器中,设置cors。2.在前端页面中正常发起请求即可。优点:直接绕开了同源策略对ajax的限制。方案三:使用jsonp发起跨域请求。方案二:目标服务器设置cors头。缺点:客户端请求比较复杂,2.在客户端请求数据的时候。方案一:设置cors插件。优点:快捷方便,一句代码。
2023-07-03 19:32:19
27
1
原创 express项目生成器
参照博客:https://blog.csdn.net/qq_38274119/article/details/110388240。1.在任意目录打开终端 输入指令 cnpm i express-generator -g (全局安装 express项目生成器)/bin 服务器的启动文件 /bin/www 文件中监听了3000端口号 并启动了服务器。6.直接在浏览器输入http://localhost:prot/ 访问服务器。4.切换到项目的根目录 输入指令 npm i 下载所有的依赖模块包。
2023-07-03 19:27:44
181
1
原创 vue中自定义指令
vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。私有 自定义指令 在每个vue组件中，可以在directives节点下声明私有自定义指令。全局 自定义指令 全局共享的自定义指令需要通过 Vue.directive()进行声明。vue指令: 指在vue中定义的标签属性,一般以v-开头,以实现特定功能。元素全屏指令 v-screenfull。字符串整形指令 v-format。元素说明指令 v-tooltip。响应缩放指令 v-resize。拖拽指令 v-drag。
2023-07-03 19:26:55
32
1
原创 vue路由总结
前三种(url拼接传值,友好url传值,query对象传值)的方式,都会把数据拼接到url路径上,刷新页面不会丢失,但是由于url长度有限制(不同浏览器对url的长度限制不同),数据量不能太大。// < router - link :to = "'/main/'+msg" > 主页</router - link >// { path: "/main", component: MainCom,name:"吴亦凡"},// name:"吴亦凡",//命名路由可通过路由名跳转。
2023-07-03 19:24:41
28
1
原创 vue框架目录说明
components: 里边放子组件,这里的组件不能当作一个页面渲染,一般用作子组件,导入到页面父组件展示 如: 轮播图Swiper, 导航栏Nav, 星级评分Stars。views: 里边放整页组件,每一个组件都可以作为一个页面需要,一般由路由控制切换, 如: 主页HomeView, 登录页LoginView, 个人页UserView。相同点: 它们都是静态资源目录, 都可以放静态资源, 组件内都可以引用目录中的资源。3, public中一般放第三方资源, 第三方插件, 工具之类的资源。
2023-07-03 19:22:38
79
1
原创 vue3.x,4.x,5.x脚手架创建项目
参考文档: https://www.cnblogs.com/wisewrong/p/9740173.html。在vue/cli5.x之后, 项目搭建时,vue.config.js会自动创建, 结构如下。以上是vue/cli 3.x/4.x的写法, 手动创建vue.config.js。host: 'localhost', // 主页地址。publicPath:'/', // 启动页地址。outputDir: 'dist', // 打包的目录。publicPath: '/', // 启动页地址。
2023-07-03 19:19:05
48
1
原创 vue项目配置代理
此文件基于vue脚手架5.0实现, 把以下代码替换项目中vue.config.js的内容, 修改代理target即可。// 在vue.config.js中的devServer.proxy字段设置代理服务器。// 这个文件是服务器的配置文件, 所以这个文件的修改需要重启项目生效。lintOnSave: true, // 在保存时校验格式。publicPath: '/', // 启动页地址。outputDir: 'dist', // 打包的目录。服务端设置的一些功能。
2023-07-03 19:15:59
68
1
原创 vue项目使用axios
3, 在任意组件中使用axios(添加$用于和组件内字段区分)2, 在组件的script标签中导入axios。2, 在main.js中导入并设置Vue原型。1, 在vue项目中下载安装axios模块。1, 在vue项目中下载安装axios模块。3, 在当前组件的函数发起ajax请求。
2023-07-03 19:15:23
63
1
原创 vue2.x搭建项目
4, vue3.x/4.x/5.x项目框架 vue create project-name 初始化 npm run serve 启动。src文件夹，是存储项目源代码的文件夹（类似express项目中的bin），所有前端的代码文件都存储在src中。static文件夹，是存储静态资源文件的静态文件夹(类似于express项目中的public)在vue项目根目录下，index.html就是项目的首页，其他文件是项目的各种配置文件。2,创建项目文件夹,并在这个文件夹下打开命令行。
2023-07-03 19:03:31
210
1
原创 Git基本命令
1, 下载并安装git (Git_2.39.exe)2,安装后,从开始菜单中打开Git Bash ,会弹出一个类似代码行工具的窗口,然后就可以输入git命令了mkdir 文件夹名 新建文件夹pwd 命令用于显示当前目录cat 文件名 查看文件内容git 查看主要git功能指令git --help 查看主要git功能指令的帮助git --version 查看git版本git init 新建一个git本地仓库。
2023-07-03 14:21:12
71
1
原创 2. vite构建react项目配置代理
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。
2023-06-28 17:47:56
277
原创 react样式隔离
2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入 代替 import './xxx.css'1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css。如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式。4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式。
2023-06-28 17:46:24
59
原创 react图片懒加载
2, 在src/assets/目录下放入懒加载占位图 placeholder.gif。3, 在需要使用懒加载的组件中导入懒加载模块和占位图(blur.css虚化样式)在src/assets/目录下放入懒加载占位图 placeholder.gif。5, 在组件模板中给需要懒加载的图片替换成LazyLoadImage。5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签。4, 在组件rander函数中创建占位图片标签img。3, 在需要使用懒加载的组件中导入懒加载模块和占位图。
2023-06-28 17:41:46
287
原创 安装react代码行工具(脚手架)
在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令。1, 安装react代码行工具(脚手架), 基于webpack工具构建项目。3,启动react项目 (需要cd进入项目my-app根目录)2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。2,创建一个react应用程序,npm版本过高或node版本过低。4, 运行,启动vite项目。
2023-06-28 17:24:12
116
1
原创 webpack基本用法
webpack : 类似于中文文档 http://webpackdoc.com/英文文档 https://webpack.js.org/1,什么是webpack?Webpack 是当下最热门的前端资源模块化管理和打包工具。2,webpack 有什么作用?(1)它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源(2)将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
2023-05-25 17:51:15
64
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人