kangkang212916的博客

原创 vite构建vue3项目

---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------

原创 1.React 路由5.0配置

{/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。(注: 哈希模式用HashRouter 历史模式用BrowserRouter)7, 在需要跳转的页面, 从路由模块导入工具组件 Link。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。

原创 代码片段：react

"description": "这是自定义的react模板"

原创 vue项目打包app

8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。

原创 element-plus使用步骤

1, 安装环境版本要求(此处环境): node: V18.12 npm: V8.12 cnpm: V9.0 yarn: V1.22.19 (或者用yarn安装依赖)2, 按需引入配置后,组件无需再手动引入,会在根目录生成components.d.ts文件,会在此文件中自动引入页面中使用到的组件。4, element-plus 官方在网络差的情况下, 会被路由定向到404页, 一般刷新几下即可恢复。3, icon图标组件组件单独下载安装@element-plus/icons-vue并引入。

原创 ref获取DOM元素

2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用。1, 在父组件中用ref获取子组件对象, 必须保证子组件是类组件, 函数式组件获取结果是undefined。1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 父组件使用ref获取子组件对象后, 可以对子组件状态数据和函数执行调用和修改。3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用。4, 使用hook语法查找DOM。

原创 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{} 设置样式,即为局部样式。

原创 react图片懒加载-webpack

img src={item.room_src} alt="这是一个图片" />2, 在src/assets/目录下放入懒加载占位图 placeholder.gif。5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签。3, 在需要使用懒加载的组件中导入懒加载模块和占位图。4, 在组件rander函数中创建占位图片标签img。// 此模块适用于webpack构建的项目。1, 下载安装懒加载模块。

原创 webpack构建react项目配置代理

也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。

原创 react图片懒加载-vite

官方地址: https://www.npmjs.com/package/react-lazy-load-image-component。2, 在src/assets/目录下放入懒加载占位图 placeholder.gif。3, 在需要使用懒加载的组件中导入懒加载模块和占位图(blur.css虚化样式)5, 在组件模板中给需要懒加载的图片替换成LazyLoadImage。4, 在组件rander函数中创建占位图片标签img。// 适用于vite构建的react项目。1, 下载安装懒加载模块。

原创 vite构建react项目配置代理

在vite.config.js中加入以下代码 (针对react,可全选替换)使用vite构建vue项目和react项目,配置代理等信息的方式是一样的。

原创 webpack + react 安装 创建react项目

注意: 在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令。============= 使用 vite工具构建项目 ================1, 安装react代码行工具(脚手架), 基于webpack工具构建项目。2,创建一个react应用程序, my-app是自定义项目名。2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。

原创 什么是ts

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。[教程](http://ts.xcatliu.com/introduction/what-is-typescript.html)JavaScript 是静态类型语言, TypeScript是动态类型语言, 它们都是弱类型的, 请见附件: 类型扩展.txt。

原创 小程序实现分享的三种方法

2, 调用API wx.showShareMenu({menus: []}) 开启分享功能,可设置分享好友还是分享朋友圈 shareAppMessage指微信好友分享 shareTimeline 指的是微信朋友圈分享 ,, 点击右上角菜单分享。1, 在js文件中实现onShareAppMessage函数,即可点击右上角菜单分享给微信好友 (页面中默认已实现)在js文件中实现onShareTimeline函数,即可点击右上角菜单分享到微信朋友圈 (需要自己添加)

原创 uniapp语法特点

3, 之前写项目时,用到一个背景音频播放API, 在浏览器测试发现报错, 查看官方文档才发现, 背景音乐播放不支持H5端, 只支持app和小程序 在H5端调用背景音频播放接口无效,并报错: Cannot read property 'apply' of undefined。uniapp中组件的数据和结构使用vue的结构 (data, computed, filter, watch等)uniapp中的数据绑定与渲染, 使用vue中的指令语法(v-model, ref, $emit, slot)

原创 Vue项目打包App步骤

8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。

原创 Vue中axios的使用

3, 在任意组件中使用axios(添加$用于和组件内字段区分)2, 在组件的script标签中导入axios。2, 在main.js中导入并设置Vue原型。1, 在vue项目中下载安装axios模块。1, 在vue项目中下载安装axios模块。3, 在当前组件的函数发起ajax请求。局部使用(在某一个组件中用)全局使用(在任意组件中用)

原创 Vue3 图片懒加载

3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。2, 在main.js入口文件中引入图片懒加载模块。1, 安装图片懒加载模块。

原创 代码片段：vue3模版

"vue3": {"body": ["","","",],

原创 vue2创建项目步骤

原创 vue 路由守卫

beforeRouteEnter, beforeEnter, beforeEach, 这三个都是路由进入之前的守卫, 这些路由守卫常用于做登录认证, 在这里判断用户是否已经登录, 如果已经登录,调用next()允许进入, 如果没有登录, 不调用next(),禁止进入 主要针对一些需要登录状态才能访问的页面, 如: 个人信息页。路由守卫也叫路由钩子函数, 它是在路由跳转过程中调用的函数, 通过路由守卫可获取路由信息和阻止路由跳转。路由守卫的参数有三个: to, from , next。

原创 vue目录中，views和components的区别

components: 里边放子组件,这里的组件不能当作一个页面渲染,一般用作子组件,导入到页面父组件展示 如: 轮播图Swiper, 导航栏Nav, 星级评分Stars。views: 里边放整页组件,每一个组件都可以作为一个页面需要,一般由路由控制切换, 如: 主页HomeView, 登录页LoginView, 个人页UserView。相同点: 它们都是静态资源目录, 都可以放静态资源, 组件内都可以引用目录中的资源。3, public中一般放第三方资源, 第三方插件, 工具之类的资源。

原创 服务器的创建和启动方式

4, vue3.x/4.x/5.x项目框架 vue create project-name 初始化 npm run serve 启动。3, vue1.x/2.x项目框架 vue init webpack 初始化 npm run dev 启动。5, react项目框架 create-react-app my-app初始化 npm start 启动。6, angular框架项目 ng new app-name初始化 ng serve 启动。总结几种服务器的创建和启动方式。

原创 代码片段vue组件结构：快捷键myVueCom

"description": "这是我的vue组件结构"-- 组件模板 -->",

原创 代码片段vue模版：快捷键myVue

"description": "我的第一个vue模板"

原创 代码片段：快捷键go

",""," ","

原创 webpack基本用法

(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。