![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 57
_孤傲_
知其然 知其所以然
展开
-
vue入门到精通
vue的优点:轻量级框架组件化mvvm数据驱动型双向数据绑定对 MVVM 的理解Model:代表数据模型,数据和业务逻辑都在Model层中定义View:代表UI视图,负责数据的展示ViewModel:就是与界面(view)对应的Modelmodel和view没有直接关联,通过ViewModel来进行关联,让model和view有双向数据绑定的联系vue常用的指令v-if v-show 显示/隐藏v-for 循环v-bind 动态绑定属性v-on 绑定事件v-mode原创 2020-07-06 09:14:14 · 12486 阅读 · 1 评论 -
堆空间与栈空间
栈(stack)会自动分配内存空间,会自动释放。堆(heap)动态分配的内存,大小不定也不会自动释放。原创 2023-03-27 12:25:51 · 378 阅读 · 1 评论 -
webpack和vite的区别
从入口文件开始解析各个模块的依赖关系,非js的文件使用loader解析成js,使用plugin注入钩子,打包合并模块,生成打包文件,然后使用express开启本地服务,浏览器请求打包后的文件。使用koa开启本地服务,没有像webpack那样需要解析模块的依赖、打包合并的过程。vite会在浏览器请求需要的模块时,再对模块进行编译。vite的热更新比webpack更快。因为webpack在改动一个模块时候,其他有依赖关系的模块也会重新进行打包。CommonJs 加载的是整个模块,把模块里的所有方法都加载进来;原创 2022-11-14 11:30:45 · 1919 阅读 · 0 评论 -
npm 原理集合
1、执行 npm run xxx 时,会先从当前目录下的node_modules/.bin中去查找对应的可执行程序执行。4、将压缩包解压到项目的node_modules文件夹中(require的查找顺序会在该包下面查找)。2、如果无法找到,就会在npm的全局安装路径进行查找,也就是npm i -g xxx时安装的路径。5、查找到,会获取缓存中的压缩文件,并且将压缩文件解压到node_modules文件夹中。2、不一致,那么会重新构建依赖关系,直接会走顶层的流程。3、如果还找不到,就会从系统环境变量中查找。原创 2022-10-18 10:37:00 · 961 阅读 · 0 评论 -
腾讯云cos上传文件功能封装
要使用cos要先去腾讯云创建cos储存桶,创建完储存桶按步骤来就可以了。原创 2022-10-12 15:31:56 · 1645 阅读 · 0 评论 -
package.json 与 package-lock.json 的关系
使用 node 和 npm 可以很方便的下载管理项目所需的依赖模块。package.json 用来描述项目及项目所依赖的模块信息。原创 2022-10-10 11:26:57 · 429 阅读 · 0 评论 -
让JavaScript代码尽可能的优雅
在代码评审中发现很多地方不优雅的地方,也不是说不能运行,只是造成代码量增多,可读性变差而已。取值在程序中非常常见,从对象obj中取值差:优:关于合并数据比如合并两个数组,合并两个对象差:优:关于if中判断条件差:优:关于获取对象属性值差:优:关于输入框非空的判断在处理输入框相关业务时,往往会判断输入框未输入值的场景差:优:.........原创 2022-06-24 22:50:34 · 315 阅读 · 1 评论 -
vue页面与iframe页面通讯
项目是中后台管理系统,系统中需要接入高拍仪设备。由于把高拍仪设备提供的html二次开发源码重构成vue时间成本太高,因此把html采用iframe的方式嵌入vue,使用postMessage来作为vue页面与iframe页面通讯。...原创 2022-06-24 11:40:07 · 1358 阅读 · 0 评论 -
Vue3的优化总结
vvue2.x通过 Object.defineProperty 去劫持数据的getter和setter> 缺陷:> 1. 必须预先知道要拦截的key,所以不能检测对象属性的添加和删除> 2. 要劫持内部深层次的对象变化需要递归遍历这个对象,有性能负担> vue3.x使用 Proxy 做数据劫持,Proxy可以劫持整个对象或数组的变化,不用无脑递归遍历,这种处理方式很大程度提升了性能...原创 2022-06-23 22:56:26 · 707 阅读 · 0 评论 -
vue同时使用两个版本的依赖
业务需求开始时间和结束事件的框不能让它们联动。因为ant-design-vue3的日期选择器功能不支持,ant-design-vue2支持,所以选择安装ant-design-vue2然后按需引入日期选择器。这样就可以和现有的版本共同使用package.json:...原创 2022-06-17 17:49:04 · 1662 阅读 · 0 评论 -
Js实现深拷贝的几种方法与利弊
Js实现深拷贝的几种方法与利弊原创 2022-06-16 17:12:08 · 825 阅读 · 0 评论 -
vue数据加密/解密
使用crypto-js来进行加密和解密原创 2022-06-14 11:31:04 · 4931 阅读 · 3 评论 -
TypeScript入门到精通
TypeScript是什么?TypeScript是强类型的JavaScript语言它添加了我们对强类型语言所期望的一些特性TypeScript带来的好处TypeScript的编译步骤可以让你及早发现问题,而不是等待运行时失败它可以让你的代码以JavaScript无法描述的方式进行自我描述TypeScript缺点TypeScript是一个预处理器,代码必须编译,因此每次更新和测试运行需要稍长一点时间安装 TypeScriptnpm install -g typescript原创 2020-07-03 14:00:47 · 10651 阅读 · 1 评论 -
前端知识点查漏补缺
vue中组件是用来复用的,为了防止data复用,将其定义为函数当我们组件的date单纯的写成对象形式,这些实例用的是同一个构造函数,由于JavaScript的特性所导致,所有的组件实例共用了一个data,就会造成一个变了全都会变的结果当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。原创 2022-03-15 14:52:33 · 1400 阅读 · 2 评论 -
Vue3.2 setup语法糖总结
Vue3.0 暴露变量必须 return 出来,template中才能使用;Vue3.2 中 只需要在 script 标签上加上 setup 属性,组件在编译的过程中代码运行的上下文是在 setup() 函数中,无需return,template可直接使用。文件结构<template> // Vue2中,template标签中只能有一个根元素,在Vue3中没有此限制 // ...</template><script setup> // ....原创 2022-02-14 11:24:10 · 1961 阅读 · 0 评论 -
Vuese自动生成vue组件文档
1.安装Vuesenpm i vuese --save-d2.在根目录下新增配置文件 .vueserc{ "include": [ "./components/**/*.vue" ], "title": "ASui-doc", "genType": "docute", "outDir": "./docs"}include:指定构建组件目录。title: 文档名称genType: 指定生成的文档类型,docute 会把vue文件构建出的所有markdo原创 2021-09-14 11:04:42 · 1943 阅读 · 0 评论 -
vue组件库开发上传npm
1.先构建vue项目运行vue-clivue create vui我们将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件但是cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:module.exports = { publicPath: "./", assetsDir: "static", productionSourceMap:原创 2021-09-13 18:34:53 · 499 阅读 · 0 评论 -
TCPlayerLite使用(腾讯云播放器)
Web播放器 TCPlayerLite(腾讯云播放器)先npm引入npm install v-tcplayer引入import { VTcPlayer } from ‘v-tcplayer’使用demo<template> <div id="demo"> <div> <VTcPlayer ref="tcPlayer" :options="options" elmId="1"原创 2021-08-19 18:23:55 · 3143 阅读 · 0 评论 -
electron中JS报错:Uncaught ReferenceError: require is not defined
Electron已经发布了6.0正式版,升级后发现原来能运行的代码报错提示Uncaught ReferenceError: require is not defined解决办法:修改创建BrowserWindow部分的相关代码,设置属性webPreferences.nodeIntegrationnew BrowserWindow({ width: 800, height: 600, minHeight: 990, minWidth: 1560,原创 2021-07-09 09:58:11 · 882 阅读 · 0 评论 -
vue项目部署到云服务器
云服务器我使用的liunx系统需要用到的环境Git Docker Nginx Node安装Docker查看是否已安装Docker列表yum list installed | grep docker安装Dockeryum -y install docker-y表示不询问安装,直到安装成功,安装完后再次查看安装列表启动Dockersystemctl start docker查看本地镜像docker images查看运行中的容器docker ps关闭容器docker sto原创 2020-11-06 10:15:02 · 1764 阅读 · 2 评论 -
vite.config.js常用配置
vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:快速的冷启动,不需要等待打包操作;即时的热模块更新,替换性能和模块数量的解耦让更新飞起;原创 2020-11-02 13:54:28 · 48323 阅读 · 11 评论 -
Vue移动端尺寸适配
安装依赖包npm install amfe-flexiblenpm install postcss-px2rem在项目入口文件main.js中引入lib-flexibleimport 'amfe-flexible/index.js'配置vue.config.jsmodule.exports = { css: { loaderOptions: { css: {}, postcss: { plugins:原创 2020-10-27 10:29:46 · 1843 阅读 · 2 评论 -
H5通过URL Scheme协议唤起App
场景在 h5 页面上,用户点击打开app按钮,如果已经安装了App则打开app,否则引导用户前往应用市场。实现思路在 h5 页面上唤醒app ,需要用到 scheme协议(由app端提供),但是在微信浏览器里scheme不起作用,因此需要先判断是否为微信浏览器,是微信浏览器的话,提示到浏览器打开,不是的话,再判断是Android端还是iOS端,然后尝试scheme协议唤醒app,如果唤醒失败再转向应用市场。URL Scheme协议URL Scheme是一种页面内跳转协议,通过这个协议可以比原创 2020-08-28 10:38:42 · 19614 阅读 · 6 评论 -
ts:报错Could not find a declaration file for module xxx
我们在 typescript 的项目中安装一些包的话,可能会报错 Could not find a declaration file for module ‘xxx’ ,这是因为这个包可能不是.ts文件而是.js文件,那么如何解决呢?如果有这个包的 ts 版本,则npm install @types/xxx没有ts版本,找到根目录下的 shims-vue-d.ts 文件declare module '*.vue' { import Vue from 'vue' export defa.原创 2020-10-20 11:58:37 · 4533 阅读 · 2 评论 -
Vue项目使用.env文件配置全局环境变量
.env 默认全局配置文件.env.development 开发环境配置文件.env.production 生产环境配置文件文件名为Vue的约定,不可随意更改配置环境变量格式://其中“VUE_APP_”是规定的环境变量名前缀,如果变量名不是以此开头,则在程序中不能调用此环境变量VUE_APP_{自定义环境变量名} = {值}//列如VUE_APP_API = "https:https://blog.csdn.net/weixin_45292658/article/details/.原创 2020-10-20 11:02:04 · 3697 阅读 · 0 评论 -
Vue2.x项目中愉快使用3.0特性
Vue2.x项目中愉快使用3.0特性早在 Vue3 源码公布之前,Vue 官方已经透露了代表下一代 Vue 技术的 Vue3 将采取的新的接口使用方式。这种新的方式叫做 Composition API (组合式 API)。随着Vue3 pre-alpha版本的发布,相信小伙伴们已经按耐不住跃跃欲试的心情,下面我为大家简单介绍如何在项目中平滑引入vue3.0特性。Composition API(组合 API)@vue/composition-api 是早期推出用来让开发者能在第一时间体验到vue3原创 2020-10-16 09:14:29 · 2880 阅读 · 0 评论 -
Vue3新特性 组合式Api
setup - 组件内使用 Composition API 的入口点setup 作为组合式 API 的入口点,也就是说,组合式 API 都必须只能在 setup 中使用<template> <div> <h1>setup - 组件内使用 Composition API 的入口点</h1> <p>{{username}}</p> </div></template><scr原创 2020-10-15 13:56:25 · 7694 阅读 · 4 评论 -
js-cookie封装获取cookie方法
先安装依赖原创 2020-10-13 14:31:43 · 2448 阅读 · 0 评论 -
H5与Android和ios原生交互
判断是Android还是iosisIos() { // 判断是否是Ios return /(iPhone|iPad|iPod|iOS|Mac|Mac)/i.test(navigator.userAgent)}isAndroid() { // 判断是否是Android return /(Android)/i.test(navigator.userAgent)}H5调用原生方法的方式原生需要写方法来让H5调用,H5在window中获取方法。/*** ios壳中方法全部放在w原创 2020-09-07 17:16:32 · 7994 阅读 · 3 评论 -
iOS通用链接(Universal Links)使用教程
什么是 Universal Links在开发中我们需要从浏览器,Safari中去唤醒App,iOS 9之前我们通过配置scheme从而实现这种跳转,但是这种方式需要提前判断系统中是否安装了能够响应对应scheme的app,这种方式在微信中是被禁用的。Universal Links是iOS 9推出的一项功能,我们可以通过配置Universal Links使用户能够通过一个链接进入app或者指定页面,这个不会被微信禁用。配置文件首先我们需要有一个支持Https的域名,必须支持Https创建一个内原创 2020-09-07 16:16:02 · 12901 阅读 · 1 评论 -
微信公众号网页授权
这里我使用的vue框架。菜鸡的我一直以来很喜欢用vue 感觉挺香的哈哈哈。设置data变量data () { isWechat: true, // 是否为微信环境(true:是;false:否) wx: { wxAppId: '', // 微信公众号 ID wxSecret: '', // 微信公众号 密钥 code: '', // 授权原创 2020-07-06 09:16:59 · 10965 阅读 · 0 评论 -
vue.config.js常用配置
const path = require("path");const resolve = function(dir) { return path.join(__dirname, dir);};module.exports = { publicPath: process.env.NODE_ENV === "production" ? "./" : "./", outputDir: "dist", assetsDir: "static", lintOnSave: true, //原创 2020-07-06 09:15:46 · 11414 阅读 · 0 评论 -
Axios封装请求
先创建文件夹 utils 在里面创建文件 Service.js 配置axiosimport axios from "axios";// 添加请求拦截器axios.interceptors.request.use(config => { config.headers["Content-Type"] = 'application/json;charset=UTF-8'; // 所有请求带上token config.headers['Authorization'] = localStor原创 2020-07-06 09:15:13 · 10915 阅读 · 0 评论