- 博客(37)
- 收藏
- 关注
RSS订阅原创 在vue-element-admin项目中Post 请求带参数 报请求超时
Axios 如果发送Post请求，并且带上请求参数时，会一直报请求超时，如下// src/api/test.jsimport request from '@/utils/request'export default { test () { return request({ url: '/test', method: 'post', data: { "name": "张三" } }) }}这个问题是因为mo
2020-10-27 16:44:59
3962
9
原创 在vue-element-admin项目中解决跨域问题
在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置devServer: { // ... before: require('./mock/mock-server.js'), // 开发环境代理配置 解决跨域问题 proxy: { [process.env.VUE_APP_BASE_API]: { // 是.env.development 文件的 /dev-api target: ' https://w.
2020-10-27 16:30:30
3633
原创 面试题（八）vuex常见面试题
1. vuex 是什么？怎么使用？哪些功能场景使用它？答：vue框架中状态管理。在 main.js 引入 store，注入。新建了一个目录store.js，…export。场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车2.vuex有哪几种属性？答：有五种，分别是 State、Getter、Mutation、Action、Modulestate => 基本数据（数据源存放地）getters => 从基本数据派生出来的数据mutations => 体积更改数
2020-10-27 14:34:12
4391
原创 面试题（七）vue路由相关
1. mvvm框架是什么？答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向数据绑定技术，就说View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。2.vue-router是什么？它有哪些组件？答：vue用来写路由的一个插件。router-link、router-view3.active-class是哪个组件的属性？答：vue-router模块的router-link组件。children数组用来定义子路
2020-10-26 17:11:26
773
原创 面试题（六）vue生命周期函数
1. 什么是 vue 生命周期？有什么作用？答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。（生命周期钩子就说生命周期函数）例如，如果要通过某些插件操作 DOM 节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted中进行。2. 第一次页面加载会触发哪几个钩子？答：beforeCreate，crea
2020-10-26 16:17:04
1854
原创 面试题（五）常见vue相关面试题总结
1.vue 优点答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解
2020-10-23 13:29:55
1253
原创 vue自定义指令 —— directive的用法
Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。1. 注册假设我们需要自定义一个 v-focus 指令，即在 或 标签初始化时获得焦点。注册自定义指令分为全局注册与局部注册两种：全局注册：// 注
2020-10-22 17:16:13
647
原创 vue中数组变动更新检测
Vue包含两种观察数组的方法分别如下：1. 变异方法变异方法会改变被这些方法调用的原始数组，它们也将会触发视图更新，这些方法如下：push()pop()shift()unshift()splice()sort()reverse()2.非变异方法非变异方法与变异方法的区别就说，非变异方法不会改变原始数组，总书返回一个新数组，当使用非变异方法时，可以用新数组替换旧数组，非变异方法大致有：filter() , concat(), slice()arr = arr.filter(item
2020-10-22 16:42:51
629
原创 面试题（四）兼容性问题之1px边框变粗问题
造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。1. 0.5px边框retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和
2020-10-18 18:31:35
841
原创 面试题（三）DIV水平居中
方法一绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）<style> .container{ position: relative; } .inner{ position:absolute; left: 50%; top: 50%; transform: translate(-50% -50%); }</style>
2020-10-18 18:15:27
367
1
原创 面试笔记（二）BFC及其应用
一、常见定位方案我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案：普通流(normal flow)在普通流中，元素按照其在HTNL中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染成完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。浮动(float)在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或者右边偏移
2020-10-18 17:54:15
133
原创 面试题笔记(一）
浏览器的运行机制：构建DOM树构建渲染树布局渲染树绘制渲染树重绘触发重绘的条件：改变元素外观属性。如：color background-color重排（重构/回流/reflow)元素的规模尺寸，布局，隐藏等属性改变时会触发重排，所以重排必定会引发重绘，但重绘不一定会引发重排。触发条件：页面渲染初始化添加或删除可见的DOM元素元素位置的改变，或者使用动画元素尺寸的改变——大小，外边距，边框浏览器窗口尺寸的变化（resize事件发生时）重绘重排的代价：耗时，导致浏览器卡慢
2020-10-18 17:52:06
186
转载 webpack热更新原理
文章首发于@careteen/webpack-hmr目录HMR是什么使用场景配置使用HMR配置webpack解析webpack打包后的文件内容配置HMRHMR原理debug服务端源码服务端简易实现服务端调试阶段debug客户端源码客户端简易实现客户端调试阶段问题总结HMR是什么HMR即Hot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉
2020-10-16 14:16:13
330
原创 uni-app视频播放及下载功能
视频列表页<template> <view class="video_main"> <view class="video_item" v-for="item in list" :key="item.id" @click="handleGoVideo(item)" > <image mode="widthFix" :src="item.img" .
2020-10-15 16:32:02
7170
原创 uni-app中定义全局数据
1. 可以将参数挂载到Vue.prototype上// main.js// Vue.prototype.baseURL = 'http://uniapp.dcloud.io' // 全局参数在 pages/index/index.vue 中调用<script> export default { onLoad(){ console.log(this.baseURL); } } </script&
2020-10-15 15:32:26
1445
原创 uni-app下载图片到系统相册
使用到的 API 有 :uni.downloadFileuni.saveImageToPhotosAlbum<template> <view> <view class="download"> <view class="download_btn" @click="download" >下载图片</view> </view> </view>&
2020-10-14 17:04:51
867
原创 uni-app项目中封装手势滑动组件
小程序原生api中没有封装手势滑动组件手势封装的思路给容器绑定两个触屏事件 touchstart 和 touchend用户按下屏幕事件按下时间: Date.now() 时间戳按下坐标: clientX 和 clientY用户离开屏幕事件离开时间: Date.now()离开坐标: clientX 和 clientY根据两个时间运算判断用户按下屏幕时长是否合法根据两对坐标判断距离是否合法 判断用户滑动方向<!-- demo.vue--><template>
2020-10-14 11:15:07
1270
原创 uni-app自定义组件的使用
以查看专辑详情为例：步骤在 src 根目录下新建 components目录，存放公共组件<!-- src/components/goDetail.vue --><template> <view @click="handleClick"> <slot></slot> <!-- 插槽占位 --> </view></template><script>export defau
2020-10-13 17:37:35
4248
原创 uni-app中使用第三方日期插件moment.js
官方地址： http://momentjs.cn/安装npm install moment --save引用import moment from 'moment'export default { data () { return { stime: 1584720182000 } }, mounted () { console.log(moment(this.stime).format('MM')) // 获取月份 console.log(
2020-10-11 16:31:52
4346
1
原创 axios在vue-cli构建项目中的使用
1. 安装npm install --save axios vue-axios2. 引入// main.jsimport Vue from 'vue'import router from './router'import App from './App.vue'import axios from 'axios' // 1. 引入// 2. 配置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'// 3. 通过axi
2020-10-11 09:49:11
223
原创 uni-app项目中封装异步请求
为什么要封装？原生的请求不支持 promiseuni-api 的请求不能够方便的添加 请求中 (loading) 效果uni-api 的请求返回值是个数组，不方便数据处理封装思路：基于原生的 promise 来封装挂载到Vue的原型上通过 this.request 的方式来使用封装步骤：在src目录下新建utils/request.js// request.jsexport default (params) => { // 加载中效果设置 uni.showL
2020-10-10 17:44:12
753
1
原创 uni-app中扩展组件的使用
1. 安装uni-ui官方文档地址：https://ext.dcloud.net.cn/plugin?id=55npm install @dcloudio/uni-ui2. 使用以使用 Badge 数字角标为例：import {uniBadge} from '@dcloudio/uni-ui'export default { components: {uniBadge}}<uni-badge text="1"></uni-badge><uni-b
2020-10-10 16:40:41
4620
1
原创 使用vue-cli构建的uni-app项目安装 sass 依赖
安装npm install sass-loader node-sass使用方法<style lang="scss"></style>
2020-10-08 16:20:41
1870
原创 脚手架创建uni-app项目
创建uni-app项目命令vue create -p dcloudio/uni-preset-vue my-project启动项目npm run dev:mp-weixin微信开发者工具中导入小程序创建项目成功！
2020-10-08 15:39:00
712
原创 小程序学习笔记之一
与普通的JS差异小程序不是运行在浏览器中，所有没有BOM和DOM对象console.log(window) //=> undefinedconsole.log(document) // => undefined小程序的JS中有一些额外的成员// App 方法： 用于定义应用程序实例对象// Page 方法：拥有定义页面对象// getApp 方法：用来获取全局应用程序对象// getCurrentPages 方法：用来获取当前页面的调用栈// wx 对象：用来提供核心
2020-10-08 13:36:58
147
原创 项目优化之Vue-cli开启Gzip
gzip压缩的目的gzip压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。用法：webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：npm i -D compression-webpack-plugin打开 vue.config.js文件const CompressionPlugin = require('compressi
2020-10-07 11:10:36
752
原创 项目优化之node环境开启Gzip
A.通过node创建服务器创建一个文件夹vue_demo_server存放node服务器使用终端打开vue_demo_server文件夹，输入命令 npm init -y初始化包之后，输入命令 npm i express -S打开vue_demo目录， 复制执行npm run build命令后生成的dist文件夹，粘贴到vue_demo_server中在vue_demo_server文件夹中创建app.js文件,编写代码如下：const express = require('express'
2020-10-07 10:37:05
683
原创 Vuex的基本使用总结
1.Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。使用Vuex管理数据的好处：能够在vuex中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新什么样的数据适合存储到 Vuex 中一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。2.vuex的使用安
2020-10-06 23:27:53
778
原创 使用pm2应用管理node进程
node.js 是单进程，进程被关掉后整个服务就无法开启，此时可以使用进程管理工具。pm2是一个进程管理工具,可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能特性内建负载均衡（使用Node cluster 集群模块）后台运行0秒停机重载(维护升级的时候不需要停机).具有Ubuntu和CentOS 的启动脚本停止不稳定的进程（避免无限循环）控制台检测提供 HTTP API远程控制和实时的接口API ( Nodejs 模块,允许和PM2
2020-10-06 16:28:03
264
原创 vue-cli路由懒加载
当打包构建项目时，JavaScript包会变得非常大，影响页面加状。如果我们把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样会更高效。路由被访问时才加载对应的路由文件，就是路由懒加载。路由懒加载实现步骤：安装 @babel/plugin-syntax-dynamic-import作用：用以解析识别import()动态导入语法—并非转换，而是解析识别npm install babel-plugin-syntax-dynamic-import使用在babe
2020-10-06 16:21:17
598
原创 通过chainWebpack自定义打包入口
默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack需要通过vue.config.js来配置。在项目根目录中创建vue.config.js文件把 main.js 文件重命名为 main-prod.js 设置为发布模式的入口文件；复制相同一份 main.js 重命名为 main-dev.js 设置为开发模式的入口文件module.exports = { chainWebpack: config => { // 发布模式 c
2020-10-06 14:43:45
3252
2
原创 webpack项目发布阶段移除所有console
使用插件 babel-plugin-transform-remove-console1. 安装npm install babel-plugin-transform-remove-console --save-dev2. 使用// babel.config.jsconst productPlugins = [] // 项目发布阶段所需要的 babel 插件if (process.env.NODE_ENV === 'production') { // 发布模式下使用插件 productP
2020-10-06 10:08:28
666
原创 vue中树形表格vue-table-with-tree-grid的用法
1.命令行安装依赖npm i vue-table-with-tree-grid -S2.在main.js中使用import TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table', TreeTable)3.使用API文档：https://www.npmjs.com/package/vue-table-with-tree-grid
2020-10-03 17:47:40
1145
原创 vscode关于ESLint代码格式化的设置
{ "editor.fontSize": 16, "editor.formatOnSave": true, // 保存自动格式化 "editor.minimap.enabled": false, "files.autoSave": "onFocusChange", "workbench.startupEditor": "newUntitledFile", "workbench.colorTheme": "Visual Studio Dark", "editor.cursorBli
2020-10-02 14:22:46
317
原创 把代码添加到码云的git操作
如果是第一次安装git 需要初始化gitgit init检查一下项目的状态：git status有一些文件需要再提交一下,先把文件提交到暂存区：git add .然后在本地做一次提交git commit -m "add files"再次检查一下状态git status此前都是在本地操作，提交到码云中git remote add origin https://gitee.com/tangchaolizi-co/vue_shop.git本地仓库跟云端仓库做一些关联gi
2020-09-24 20:09:55
130
原创 Vue脚手架的三种安装方式
Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cn.vuejs.org/index.html使用步骤1.安装 3.x 版本的 Vue 脚手架npm install -g @vue/cli2.基于 3.x 版本的脚手架创建vue项目基于 交互式命令行 的方式，创建 新版 vue 项目vue create vuedemo基于 图形化界面 的方式，创建 新版 vue 项目vue ui再次打开可以输入命令行直接启动项目输
2020-09-24 10:36:03
1105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人