qq_40259123的博客

原创 如何在VScode中运行TS 代码

3. 全局安装typeScript 编译器（npm install -g typescript）执行这个命令的作用是生成【hello.js】文件。1. 安装VSCode。2. 安装node.js。命令，这个ts 文件就执行了。编译器，然后新建一个Ts 文件。

原创 uni.setNavigationBarColor 设置字体颜色及背景色无效的四个原因

uni.setNavigationBarColor 设置字体颜色及背景色无效的四个原因。1.只设置了背景色，背景色无效。 2. 字体颜色只支持小写的十六进制，否则字体颜色和背景色均无效

原创 iconfont 图标如何在uniapp中的tabBar使用

iconfont 图标如何在uniapp中的tabBar使用

原创 如何使用eslint 搭配 vscode 进行代码格式化

eslint的使用 及 eslint 配合 vs code 进行 代码格式化处理。

原创 关于程序员入职一家公司需要问咨询的一些的问题（面试总结）

关于薪资福利：1.五险一金 以我的薪资为标准，一个月公司缴纳多少钱2.是否有车补，房补，餐补的等补贴，如果有每个月有多少3.节假日是否按照法定放假，比如年休假是几天，年假是几天4.个人公积金部分，自己是否可以按照最高的12%缴纳5.关于奖金部分：按季度发放，最低是多少，绩效如何评定的。关于岗位：（里面有些问题是外包岗位的）1.由于是外包项目，那么项目是怎么分包的（比如我们是做前端，华为提供后端接口）2.公司目前，我所要去的项目组前端开发工程师大概的平均工作年限是几年3.公司做的外包项目，存

原创 vue 如何把封装的组件以install 的方式提供给组员

1. 创建packages文件夹（与src同级）2. 把组件我们封装的组件移入到packages文件夹里面，并在文件内创建index.js 文件由于我这边有icon 样式，所以把样式表也要放进去3.在packages文件下index.js文件中对封装组件进行注册。// 统一导出// 导入颜色选择器组件import Button from './button'import Dialog from './dialog'//导入字体图标import './fonts/font.scss'

原创 vue中transition动画标签的使用

transition使用的关键就在于；使用name的属性值去拼接enter，enter-to 等类名。这样子就可以触发transtion 的动画了普通的写法 <ms-button @click="handle">按钮</ms-button> <transition name="aa"> <div v-if="!visible">12321321</div> </transition> <.

原创 vue2封装input 组件（输入的双向绑定）

重点首先我们要明白 vue中v-modle 的对于input 做了什么 <input type="text" v-model="username"> <input type="text" :value="username" @input="username = $event.target.value">以上的两行代码，所呈现的效果是一样的。也就是说: v-model=“username” 在input中做了两件事情。:value 绑定了值@input=“user

原创 webpack面试题总结

一：Loader概念：Loader就是将Webpack不认识的内容转化为认识的内容原因：webpack 默认支持处理JS与 JSON 文件，其他类型都处理不了，这里必须借助Loader来对不同类型的文件的进行处理。举例一下我们常用的loaderfile-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)在webpack5，内置了资源处理模块，可以不用装url-loader：与 file-loader 类似，区别是用户可以设置一个阈值

原创 SASS 常用功能：最全，最细，最小白

变量声明、应用；多种嵌套使用、引入；混合；基础；算术运算符

原创 BFC可以解决哪些问题

BFC(Block formatting context)`直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。外部元素也不会影响这个渲染区域内的元素。

原创 vue2,vue3 中 v-if 和v-for 指令优先级问题

vue2,vue3 指令执行优先级问题

原创 vue 自定义全局指令-v-drag ，弹窗拖动

1.首先在src目录下建立一个指令文件夹及文件2.进入drag.js,复制下面代码export const drag = { inserted(el) { let oDiv = el // 左边距最大值 let maxLeft = el.parentNode.clientWidth - el.clientWidth // 上边距最大值 let maxTop ...

原创 前端初中级面试题及部分答案

初中级前端部分高频面试题

原创 简单说下VUE 中 $nextTick 的作用

解释nextTick的作用首先得了解js 的时间执行机制，js 事件执行分为 同步和异步，执行的任务又分为宏任务和微任务，js 代码从上到下依次执行，先同后异，先宏后微。 解析：js 代码和计时器等都属于宏任务，像promise .then() 和 process 都属于微任务，每一个宏任务都会产生很多异步和微任务，这些代码都会同步执行完成之后去执行。微任务还在异步任务之后。 而$nextTick 原理其实是采用的process 对象的nextTick 方法...

原创 项目上线之 --- 配置HTTPS 服务 ---vue-cli3 ---SSL证书申请

首先：配置这个服务呢，不是我们前端要去做的事，一般都是由后台完成！了解即可为什么要启用HTTPS服务？1.传统的HTTP协议采用的是明文传输数据，不安全2.采用HTTPS协议对传输数据进行了加密处理，可以防止数据被中间人窃取，更加安全首先：我们要去申请 SSL证书（https://freessl.cn）1.进入申请证书的官网，输入要申请的域名并选择品牌2.输入自己的邮箱并选择相关选项3.验证DNS （在域名管理后台添加TXT记录）4.验证通过之后，下...

原创 移动端flexible 屏幕适配（推荐使用）

1.简介2. flexible.js 下载 链接：https://mp.youkuaiyun.com/console/upDetailed

原创 移动端rem 适配方案（一）

（这种方法很一般，不推荐使用在公司项目中）1. rem 实际开发适配方案： rem+ 媒体查询+ less 技术2. 设计高常见尺寸宽度注： 一般情况下，我们以一套或者两套效果图适应大部分的屏幕，放弃极端屏或者对其优雅降级，牺牲一些效果；现在基本以 750 为准3. 动态设置html 标签font-siz...

原创 媒体查询：根据不同屏幕大小引入不同的css样式文件！

这个不算全，还需要用加上rem；这样子才可以达到较好的适配

原创 echarts 饼状图制作 legend 在右边且带有自定义参数，title在图标中间！

var data = [ {value:40, name:'货币'}, {value:20, name:'股票'}, {value:40, name:'债券'} ]option = { title: [ { text: '交易总数', x: "center", top: "52%", text...

原创 vue 向 iframe 中传参

iframe页面：window.unit= { addlayer:function(val){ console.log(val) //这是从vue中获取到的参数 }}vue 页面；variframe=document.getElementById("mapDiv");variwindow=iframe.contentWindow;iwindow.util.addlayer("这是从vue中传递到iframe 的参数");...

原创 iframe页面 向 vue页面传参

iframe 向 vue 页面传参：vue 页面；iframe 页面：

原创 实现图片不给宽高，垂直水平居中div

原创 flex 实现左边固定右边自适应布局

原创 微信小程序--获取用户地址--未封装

1获取用户的收获地址1.绑定点击事件2.调用小程序内置API获取用户的收获地址！wx.chooseAddress({complete:(res)=>{},})出现点击取消之后，无法在获取地址bug--（为什么要做第三步） 3.获取用户对小程序所授予获取地址的权限scope1.假设用户点击获取收货地址的提示框确定authSettingscope.addressscope值true...

原创 微信小程序--点击轮播图，预览大图效果

1.点击轮播图预览大图1.给轮播图绑定点击事件2.调用小程序APIpreviewImage----------------------------index.js文件--------------------------------------------2. -----------------------------index.wxml文件 -------------------------------...

原创 微信小程序--请求接口时：添加全局的正在加载中图标效果

1.首先在封装的request.js文件中加上wx.showLoading()和 wx.hideLoading()；2.以上这样子已经实现了显示和加载！但是为了避免同时多次请求的发送，出现多个loding图标，我们需要加上请求的次数，这样子就可以实现全局图标的加载的！...

原创 微信小程序将原始的请求接口方法改为promise 请求！ --- es7三次封装 ---async- await

1.首先去gitHub上把runtime.js下载下来！ （GitHub搜索regenerator）2.在项目pages文件夹同级目录下建立新的文件；然后把runtime.js放进去3.在你需要请求接口页面的js文件中导入4.应用示例；...

原创 微信小程序将原始的请求接口方法改为promise 请求！ --- 二次封装

接口完整路径：https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

原创 微信小程序将原始的请求接口方法改为promise 请求！ --- 一次封装

1. 首先在pages同级目录下新建文件夹：request ，然后在文件夹内新建文件：index.js;把代码黏贴进去2.在你需要调用接口的文件中引入request中的index.js 文件！

原创 关于同步异步，宏任务，微任务的执行顺序。

顺序是： 同步--->微任务 ----> 异步（宏任务）1. 什么是同步，什么是异步；同步任务： 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行下一个任务；异步任务：不进入主线程，认识进入“任务队列” 的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行2. 什么是宏任务，什么微任务；查了一下，貌似除了微任务，别的都是宏任务!宏任务： 整体的 script 和 setTimeout 等！而微任务貌似只有 ： pr...

原创 vue 脚手架配置跨域

https://blog.youkuaiyun.com/misnice/article/details/96133240

原创 vue项目上线---开启gzip 使用！ --- vue-cli3

1.首先在上线的文件中下载compression插件运行： npm i compression -D打开你的app.js文件，在里面引用插件；这样子就可以了！

原创 vue --项目上线 相关配置 ---vue-cli3

通过node创建 web服务器 创建node项目，并安装express，通过express快速创建web服务器！ 将vue项目打包生产dist文件夹，托管为静态文件；1.首先先新建一个文件夹！2.在文件夹内运行npminit -y 给项目初始化3.安装依赖插件express得到以下这些内容！4.把打包好的dist文件放入到当前的文件夹内！然后再创建一个app.js!5.最后运行node app.js...

原创 项目优化之路由懒加载的实现 -- vue-cli3

当我们打包够将项目时，js包会变得很大，影响页面的加载。如果我们把不同的路由分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样子就更加高效了具体三步骤：①：安装 @babel/plugin-syntax-dynamic-inport包②：在babel.config.js配置文件中声明该插件③：将路由改为按需加载的形式，示例代码如下：const Login = () => import(/* webpackChunkName:"login_hom...

原创 vue项目优化之通过CDN 优化Element.ui 的打包 --- vue-cli3 优化

其实element.ui的优化是比较简单的！①：在main.prod.js中注释掉element-ui 的加载代码②：在public下的index.html文件中，引入CDN加载element-ui的js和css就可以了！<!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index...

原创 vue项目优化之----通过externals 加载外部cdn 资源 ---vue-cli3 使用

1.为什么需要用引用外部CDN资源 当我们使用 npm run build 打包我们的vue项目时，你会看到有一个vendor.js的文件，2.06MB！其实这个里面的js文件打包的都是我们install的element，lodash ，echarts 等外部文件！2.接下来我们就需要在vue.config.js中的发布模式中把这段代码黏贴过去3.把发布模式的main-prod.js文件中的css文件删除 ；比如你的富文本编辑器的css文件4.接...

原创 打包发布项目时，清除项目中的所有console.log --- babel-plugin-transform-remove-console 使用！

首先：cnpm i babel-plugin-transform-remove-console --save-dev 下载这个插件其次在项目中找到 .babel.config.js 文件 ；

原创 关于执行 npm run build 打包的时候一直卡着不动的问题-- 显示： node  build/build.js

卡着不动显示：nodebuild/build.js在执行命令之前先运行：npm config set registry http://registry.cnpmjs.org然后再打包：运行--- npm run build这样子就好了！

原创 vue项目中使用 Nprogress，进度条显示！

1.运行 cnpm i nprogress -S 下载nprogress插件2.找到项目中的main.js 文件夹这样子就可以了哦！