- 博客(269)
- 收藏
- 关注
RSS订阅
原创 vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架启动项目git clone https://github.com/teach-tian/h5-vue-cli4.gitcd h5-vue-cli4npm installnpm run serve目录√ Vue-cli4√ 配置多环境变量√ rem 适配方案√ vm 适配方案√ VantUI 组件按需加载√ Sa
2020-12-25 17:18:04
4681
2
原创 vue项目如何部署到nginx服务器
mac下安装nginx安装工具：homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度）步骤：1、打开终端，习惯性命令：更新brew update2、终端继续执行命令：brew search nginx //查询要安装的软件是否存在3、这里我们多执行一步“废”命令，不过有利于我们后面的配置：brew info nginx我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/v
2020-11-12 17:29:02
31595
2
原创 vue-cli4打包最强优化（10M变300kb）
一、去除生产环境sourceMapsourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false,}二、对资源文件进行压缩需要下载 compression-webpack-plugincnpm i compression
2020-10-15 11:07:36
23026
21
原创 微信小程序授权登陆
微信小程序登录授权我们在项目中，登录，授权页面，都必须要传递token值。一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。token是什么？token是前端鉴权的一种方式，token由后端生成， 是有时效性的。微信小程序如何登录授权，拿到token第一步：登录流程前端—>后端—>腾讯服务器wx.login—>wx.request—>后端—>小程序(腾讯)服务器小程序wx.login官方文档https://developers.weixi
2020-10-05 08:59:37
3868
3
原创 前端总结大全
记住 88 条精简前端面试题，让面试成为享受前言HTML&CSSJavaScriptVUE网络性能相关前言背的最少、面的最好。你的面试我帮你，夜色正黑，我们出发，感谢各位一直默默关注本侠的小伙伴，你们的关注，是我永恒动力，在此奉上一份大礼。次面试技能题不是最全，却是最精。后期持续优化改进。HTML&CSS浏览器内核 ;盒模型、flex布局、两/三栏布局、水平/垂直居中；BFC、清除浮动；css3动画、H5新特性。JavaScript继承、原型链、this指向、设计模式
2020-08-17 11:47:18
114764
21
原创 express+mongodb+bootstrap搭建个人博客系统（十四）
一、项目分析该项目用到的技术栈：express 、 mongodb+mongoose 、bootstrap 、jquery目录结构：viewadmin (管理员)main (普通用户)index 注册登录页完成的功能：注册登录、身份权限、cookies30天免登录、添加分类、分类下的内容添加、集合的关联、退出。二、项目搭建express -e blogcd blogyarn installnpm startlocalhost:3000bootstrap
2020-05-12 11:17:00
1323
1
原创 2023高频前端面试题-浏览器
首先，同源是指资源地址的 “协议 + 域名 + 端⼝” 三者都相同，即使两个不同域名指向了同⼀ IP 地址，也被判断为⾮同源。下面是一些地址的同源判断示例：以下不同地址的页面, 去请求一个接口:同源策略是浏览器的一种⽤于隔离潜在恶意⽂件的重要安全保护机制!!!(服务器没有这个策略限制)<img><link>script。
2023-10-26 16:44:20
354
原创 2023高频前端面试题-TCP
DNS 域名解析采用的是递归查询的方式，过程是，先去找 DNS 缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级，这样递归查找之后，找到了，给我们的 web 浏览器
2023-10-26 16:05:27
629
原创 2023高频前端面试题-http
1.为什么需要 https二因为 HTTP 协议明文传输数据，太不安全利用 HTTPS 协议可以更安全，在HTTP基础上进行加密 2.https又是如何保证安全?底层实际是 对称加密 和 非对称加密配合，实现加密数据传输U(1) 使用非对称加密，加密对称加密的密钥，进行密钥的交换(2) 后续就使用对称加密进行数据传输 3.如何保证你访问的网站是安全的? 如何保证你浏览器第一次请求某个网站拿到的公钥是安全CA证书 =>数字证书，由权威CA机构，申请统一发布的!证书中，就会包含公钥，
2023-10-26 09:05:14
849
原创 2023高频前端面试题-CSS
**CSS 选择器的优先级顺序：**`内联样式` > `ID选择器` > `类选择器` > `标签选择器`**优先级的计算：**优先级是由 A、B、C、D 四个值来决定的，具体计算规则如下- A={如果存在内联样式则为 1，否则为 0}- B={ID 选择器出现的次数}- C={类选择器、属性选择器、伪类选择器出现的总次数}- D={标签选择器、伪元素选择器出现的总次数}
2023-10-24 16:38:09
380
原创 2023高频前端面试题-vue
**Model 层**: 数据模型层通过 `Ajax`、`fetch` 等 API 完成客户端和服务端业务模型的同步。**View 层**: 视图层作为视图模板存在，其实 View 就是⼀个动态模板。**ViewModel 层**: 视图模型层负责暴露数据给 View 层，并对 View 层中的数据绑定声明、 指令声明、 事件绑定声明, 进行实际的业务逻辑实现。**数据变化了, 视图自动更新** => ViewModel 底层会做好监听 Object.defineProperty，当
2023-10-24 15:01:24
693
原创 2023高频前端面试题-HTML
HTML 超文本标记语言: 是一个标记语言, 就有对应的语法标准DOCTYPE 即 Document Type，网页文件的文档类型标准。主要作用是告诉浏览器的解析器要使用哪种 **HTML 规范** 或 **XHTML 规范** 来解析页面。
2023-10-24 14:40:24
813
原创 抖音如何起号并开展直播带货(9个详细流程讲解)
引流款一般是不怎么赚钱的，可以拉长讲解时间，多多带入使用场景，刺激客户痛点，并去放大，这样的目的是用低价以及场景化去吸引客户停留，提高点击转化率、增加停留时长，这样可以获得持续的推流。视频拍什么内容，就拍你今天要上的引流款商品，重点讲低价，把所有的引流款商品介绍一遍就OK，结尾引导浮力都在直播间，引导刷到视频的人进直播间抢福利。要记住，抖音上购物的都属于冲动消费，你讲的能不能吸引到他，就在他刚进直播间的那几秒钟，抓住就抓住了，抓不住他就跑了。开播前，一定要拍视频，一定要拍视频，一定要拍视频。
2023-07-25 09:30:26
1376
原创 直播运营岗
再往后马上回过利润款，可能在直播间成交数量并不是很高，但利润空间很高，可以提高整体收益。再往后上形象款，并不是为了成交的，而是提高直播间格调的。又称为“小房子”直播问，适合本地商家直播，直播间内提供店铺券，需要客户购买后到线下接销。主要销售使用券，优惠券，比如：“鲜花”、“连锁店（海底捞）”，需要客户线下核销的，适用于团购商家的选择。又称为“小风车”直播问，以用户在直播问留下线索为目的，适用于定制类产品或者超高客单直播间。比如“卖车”，“家具定制”，“房产咨询”，有意向的留下自己的联系方式。
2023-04-04 16:24:03
878
2
原创 mac电脑有很多._开头的文件
导入项目时发现每个项目都会有这个备份文件解决办法，控制台进到对应目录下执行find . -name "._*" | xargs rm -f
2022-05-23 15:07:20
4348
1
原创 vue2双向数据绑定原理
先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的
2022-03-21 15:03:07
3294
原创 vue3_03_vuex4
什么是状态管理在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 状态管理。在前面我们是如何管理自己的状态呢？在Vue开发中，我们使用组件化的开发方式；而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state；在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；在模块中我们会产生一些行为事件，处理这些行为事件时，有可能会修改state，这些行
2022-02-24 14:12:18
779
原创 vue3_02_vue-router
认识前端路由路由其实是网络工程中的一个术语：在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器：事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段；前后端分离阶段；单页面富应用（SPA）；后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的.服务器直接生产渲染好对
2022-02-22 14:48:20
1347
3
原创 vue3_01_composition-API
vue2中Options API的弊端在Vue2中，我们 编写组件的方式是Options API：Options API的一大特点就是在对应的属性中编写对应的功能模块； p比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；但是这种代码有一个很大的弊端：当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分
2022-02-18 14:24:32
722
原创 vue3-01mixin&extend
认识mixin目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。n 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：pMixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；p一个Mixin对象可以包含任何组件选项；p当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；Mixin的基本使用Mixin的合并规则如果Mixin对象中的选
2022-02-18 14:00:12
403
原创 Node版本管理工具n
管理 Node 版本的工具有 n 和 nvm。n 不支持Windows安装npm install -g n常用命令n <version> // 下载某一版本号node e.g：n 10.16.0n latest // 安装最新版本n stable // 安装最新稳定版n lts //安装最新长期维护版(lts)n rm <version> // 删除某个版本 e.g：n rm 10.16.0n // 输入命令后.
2022-02-16 16:29:22
2364
原创 Vue3+TypeScript + vite 创建项目步骤
项目搭建vitenpm init vite-app <projectName> //或者yarn create vite-app <projectName>vue-cli如果已经全局安装过旧版本的vue-cli，先卸载。npm uninstall vue-cli -g //yarn global remove vue-cli安装新版@vue/clinpm install -g @vue/cli //或者 yarn global add @vue/cli
2022-02-16 14:54:15
2229
2
原创 vue路由导航守卫
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.b.
2022-01-11 14:20:44
676
1
原创 日期格式化插件dayjs在vue中如何使用
1. 下载dayjscnpm install dayjs --save2. 创建untils/formate.jsimport dayjs from 'dayjs'import rTime from 'dayjs/plugin/relativeTime'// 全局使用中文dayjs.locale('zh-cn')// 对时间进行格式化export function formatTime(data = new Date(), type = 'YYYY-MM-DD') { return
2022-01-10 15:58:23
1668
原创 vue中样式穿透
在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped1、stylus的样式穿透 使用 >>>备注: 不太推荐使用这种方式,据说有点问题！.wrapper >>> .swiper-pagination-bullet-active { background: #fff}2、sass 和 less 的.
2022-01-10 14:23:30
11843
原创 vue调试工具vue-devtools安装及使用(支持vue3版本)
github下载地址：https://gitee.com/h5web/devtools-6.0.0-beta.151.下载Github源文件 devtools-6.0.0-beta.15git clone https://gitee.com/h5web/devtools-6.0.0-beta.15.git2.打开终端，切换到devtools-6.0.0-beta.15文件夹所在目录：cd devtools-6.0.0-beta.153.安装所需npm依赖包，这里建议用国内淘宝的镜像：安装好c
2021-12-15 11:32:16
9145
10
原创 vue3+ts完成axios封装
1.安装依赖：命令行：引入相应的axios和vue-axioscnpm install axios vue-axios -S2.axios封装接下来我们使用class来封装，而不是传统的函数封装，因为类更具有封装性，更加灵活。2.1创建request.jsimport axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';import {message, notification} from 'ant-d
2021-12-01 11:25:09
3738
3
原创 vue项目无法启动
重新安装一次，如果还是不可以的话，在把之前装的都清空rm -rf node_modulesrm package-lock.jsonnpm cache clear --forcenpm install
2021-11-23 09:10:47
930
原创 函数节流详解
一、什么是函数节流（throttle）首先函数节流的概念是什么？限制一个函数在一定时间内只能执行一次。举个栗子：接下来，我给大家举个栗子，。二、为什么需要函数节流前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很
2021-11-05 14:21:37
3546
4
原创 react-脚手架
生成一个react项目构架create-react-appcreate-react-app官方的一个生成react项目,安装时后面跟一个项目名称，需要在一个空的文件夹下安装create-react-app 安装的时候会自动帮我们下载react(需要的react)，react-dom(主要是渲染)，react-script(可以认为继承了webpack的脚手架)加-g是全局安装安装create-react-appnpm install create-react-app -g//mac 安
2021-10-26 15:03:11
284
原创 什么是回流，什么是重绘，有什么区别？
什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。什么是重绘？页面中，某些元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。有什么区别？回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变应用场景：（减少回流
2021-09-28 15:52:53
849
原创 前端开发规范
目录前端代码规范一．编程规约(一) 命名规范1.1.1 项目命名1.1.2 目录命名1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名1.1.4 命名严谨性(二) HTML 规范 （Vue Template 同样适用）1.2.1 HTML 类型1.2.2 缩进1.2.3 分块注释1.2.4 语义化标签1.2.5 引号(三) CSS 规范1.3.1 命名1.3.2 选择器1) css 选择器中避免使用标签名2) 使用直接子选择器1.3.3 尽量使用缩写属性1.3.4 每个选择器及属性独占一行1.3
2021-08-06 10:46:16
1060
2
原创 vue2与vue3双向数据绑定的区别
前言：新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()Vue2双向数据绑定存在的问题：关于对象： Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的。关于数组： Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] =
2021-06-29 11:38:39
4869
3
原创 vue3 中 script setup
在不使用<script setup>,我们代码是：<template> <h1 v-text="count"></h1> <p v-text="double"></p> <button @click="add">count++</button></template><script>import { ref, unref, computed } from 'vue'exp
2021-06-23 18:59:17
3802
1
原创 iframe的优缺点？
iframe的优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。iframe的缺点：1.会产生很多页面，不容易管理。2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话
2021-06-11 13:51:00
2106
原创 position定位属性值有几个
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元.
2021-06-10 17:17:20
6310
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人