- 博客(25)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 svg 在 vue 项目中的使用方法及步骤
svg 在 vue 项目中的使用方法及步骤1. 安装 svg-sprite-loadernpm install -D svg-sprite-loader2. 配置 vue.config.js'use strict'const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack(config){
2021-07-15 16:57:29
697
原创 在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解：参考原有的代码基础上，完成了一个地图迁徙的组件先了解一下整体代码， 有能力的可以参照整体完成， 下面也会列出详细步骤解答前言以下封装了组件作为在地图中国使用 只需传入以下格式的数据即可[ { 'name': '北京', 'value': 6 }, { 'name': '湖南', 'value': 3 }, { 'name': '广东', 'value': 2 }, { 'name': '山西', 'val
2021-07-13 15:59:58
2677
4
原创 link和@import的区别
link和@import的区别面试中被问到link和@import的问题，直接懵逼，用过但没有太过于研究这些，css引入一般普遍都用link，@impot少些接触，就此来谈一下两者的区别代码引入格式如下：@import引入@import url('css文件地址')link引入<link rel="stylesheet" href="css文件地址">功能的区别@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载
2021-06-28 10:50:51
263
原创 初级前端程序员就职指南-入职必备配置清单git，vscode...
开发环境的搭建1. 本篇文章概述：◇ 新电脑如何配置开发环境◇ 新电脑应该安装那些工具◇ chrome 的安装以及设置小技巧◇ Vscode 相关配置◇ Git 相关配置◇ Node 和 npm 的配置◇ 脚手架工具的安装◇ postman 工具的安装◇ 脚手架工具的安装◇ 其他推荐2. 前言 在正式入职或者在日常重装系统以后，如果公司给配置了新的电脑。都需要对开发环境重新搭建，搭建环境的过程是非常痛苦的，因为不知道哪些东西
2021-06-12 12:06:31
3952
5
原创 新手前端程序员就职指南之 - 入职第一天
新手程序员就职指南之 - 入职第一天第一篇 - 入职第一天1. 本篇内容概述：◇ 了解入职当天的工作内容◇ 入职资料的准备◇ 配置开发环境◇ 公司或者开发账号的申请◇ 熟悉公司的环境2. 正文Hello， everybody经过 刻苦学习，又加上痛苦的面试过程，这时候很多同学都已经拿到了心仪的 offer，经过短暂的欣喜、激动，对新公司充满好奇的同时，很多同学心里也充满了各种担忧、困扰，例如：入职第一天我需要做什么 ？入职第一天需要注意哪些东西 ？到公司里面我需要做什么
2021-06-12 11:51:26
13663
3
原创 函数调用的方式封装消息提示组件
函数调用的方式封装消息提示组件1. 准备好消息提示组件样式message.vue<template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-if="flag"> <!-- 上面绑定的是样式 --> <i class="iconfont" :class="[style[type].icon]"><
2021-05-27 20:55:35
181
原创 Vue3指令方式实现图片懒加载
Vue3指令方式实现图片懒加载vue3中 createApp方法每执行一次 都会生成一个独立的vue应用实例而每一个独立的应用实例 各自拥有自己的作用域 并不会共享全局指令// 这是我的第一个实例化对象import { createApp } from 'vue'const app1 = createApp({})// 我们在上面自定义一个指令app1.directive('one', { mounted(el, binding){ console.log(el, binding)
2021-05-18 20:27:16
478
2
原创 简单实现组件数据懒加载
VueUse 组件数据懒加载VueUse 组件数据懒加载1. 理解2. 如何实现3.封装成能够实现基本业务逻辑复用的函数VueUse 组件数据懒加载1. 理解本节目标: 从实际角度理解组件数据懒加载指的是什么思考俩个问题我们一般的数据请求在哪里发起？生命周期钩子函数的特点是什么？我们现在每个组件中发起ajax请求一般都是在created钩子函数或者mounted钩子函数中发起的，生命周期有一个特点：跟着组件的初始化过程走自动执行，开发者无法控制，所以我们现在首页中的人气推荐/新鲜好物等
2021-05-18 18:16:52
850
原创 Less的自动化导入
Less的自动化导入本节目标: 让业务组件自动加入公共样式（全局字体色值）我们开发的应用有些样式是公用的，比如我们常见的配色色值，为了做到统一修改的目的往往需要定义成less变量，很多的业务组件都需要使用这些变量，如果我们每一个业务组件都手动引入然后使用的话，开发量巨大，所以为了解决这个问题，我们采取自动导入的方式，方便我们业务组件使用全局less变量1. 手动引入方案（1）准备样式变量文件src/assets/styles/variables.less// 主题@xtxColor:#2
2021-05-18 14:07:16
227
原创 axios封装处理（含携带token请求，token过期处理，请求数据中的大数处理问题）
axios封装处理（含携带token请求，token过期处理，请求数据中的大数处理问题）目标:基于axios封装一个请求模块，调用接口时使用(1) 安装 axiosnpm i axios(2) 新建 src/utils/request.js 模块import axios from 'axios'import store from '@/store'import router from '@/router'// 超时处理 和 公共路径const instance = axios.cre
2021-05-15 20:20:33
1010
原创 Object.definePerproty
Object.definePerproty对象的定义与赋值经常使用的定义与赋值方法obj.key =value或者obj['key']=value第二种的key可以是变量代码落地let obj = {}// 通过obj.key = value 给对象添加属性obj.name = 'zs'/** * 通过obj[key]给对象添加属性 * 1. 定义变量 * 2. obj[year变量] = 18 */year = 'age' obj[year] = 18 // 打印o
2021-05-14 17:30:38
793
8
原创 Vuex-持久化
Vuex-持久化在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储，再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页需要存储在本地本节目标: 使用插件让在vuex中管理的状态数据自动同时存储在本地免去自己存储的环节实现步骤安装vuex-persistedstate 插件vuex中准备user模块和cart模块将插件配置到vuex的plugins选项中，配置user模块和cart模块进行状态持久化(1）安装一个vuex的插件vuex-p
2021-05-13 17:37:50
195
1
原创 Vue3.0入门基础
Vue3.0入门基础1. Vue3.0介绍1.1 为什么要学习 vue 31.2 Vue3带来的新变化1.3 破坏性语法更新2. Vue3开发环境搭建3. 组合式API3.1 composition vs options3.2 案例对比3.2.1 理解需求3.3 setup入口函数3.4 响应式系统API3.4.1 reactive 函数3.4.2 ref 函数3.4.3 toRefs 函数3.4.4 computed3.4.5 watch 侦听器3.5 生命周期函数3.6 父子通信3.7 provide
2021-05-12 18:00:22
504
原创 RBAC权限设计思想
RBAC权限设计思想场景为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。其权限模式如下:三个关键点:用户： 就是使用系统的人权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上的有不同的操作）角色：不同的权限点的集合给用户分配角色给角色分配权限点给角色一定的权限点、再把角色分配给用户， 比如：我把权限点都给了人事经理，我在
2021-05-11 08:10:41
109
原创 Vue脚手架中使用多种语言
Vue脚手架中使用多种语言1. 多语言支持1.1 目标1.2 安装国际化的包1.3 ElementUI多语言配置1.4 在main.js中挂载 i18n的插件1.5 验收效果2. 自定义内容多语言配置2.1 背景2.2 目标2.3 步骤2.4 配置2.5 实现title中英文切换2.6 理解中英文切换原理3. 实现动态切换中英文3.1 目标3.2 思路3.3 **封装多语言组件**3.4 全局注册3.5 **在Navbar组件中引入使用组件**1. 多语言支持国际化处理vue项目中的多语言支持使用的是
2021-05-09 19:26:19
622
6
原创 图片存储到腾讯云结合elementui实现图片上传
图片保存到腾讯云的使用结合elementui实现图片上传图片保存到腾讯云的使用1. 图片存储方案介绍2.腾讯云cos申请配置3.在项目中封装上传组件4. 实现上传图片到腾讯云图片保存到腾讯云的使用1. 图片存储方案介绍目标：了解主流的图片存储方案方案一：存到自己公司购买的服务器上由于图片都存放到自己的服务器上，占据空间很大方案二：存到三方云服务器（阿里云，七牛云，腾讯云）各种云有专门的为图片存储提供的云服务器，我们自己的服务器只存储图片地址即可2.腾讯云cos申请配置目标：使用
2021-05-07 11:01:36
1465
5
原创 网络请求的三次握手
TCP连接的三次握手注意： 发送端 就是客户端 接受端就是服务器第一次握手建立连接时，客户端发送SYN包到服务器进入SYN_SENT状态，等待服务器确认第二次握手服务器收到SYN包，必须确认客户端发来的SYN包，同事自己也发送一个SYN包，SYN+ACK包，此时服务器进入SYN_RECV第三次握手客户端收到服务器的SYN+ACK包，向服务器发送确认包ACk，此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手...
2021-04-20 12:38:43
324
原创 简单上手Vue Router路由使用
1. 路由 - 介绍（1）前端路由的本质, 对url的hash值进行改变和监听，切换挂载点的component组件（2）vue 中的路由 : 是 hash 和 component 的对应关系, 一个哈希值对应一个组件2.利用Vue Cli创建项目注意： 需要在全局配置Vue Clinpm install -g @vue/cli或yarn global add @vue/cli(1) 创建项目在想要创建项目文件夹的地方输入cmd唤醒命令窗口vue create xxxx(文件名)
2021-04-18 22:05:19
382
原创 ?? 和?.运算符
1. 空值合并操作符（??）空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。console.log(null ?? 666) console.log(undefined ?? 666)// 以上输出结果都为6662.可选链操作符( ?. )可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为
2021-04-17 21:48:41
1215
原创 环境变量.env.development，.env.production是如何工作的
1.环境变量文件夹了解.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件 2.命名规则属性名必须以VUE_APP_开头,比如VUE_APP_XXX3.执行环境.env.development 在开发环境中 (yarn serve , npm run serve).env.production 在生产环境中（yarn build , npm run build）4.访问中的变量process.env.属性名 可以同过定义属性
2021-04-15 21:17:10
973
3
原创 fastmock的基本使用
fastmock的使用1.创建项目登录成功后进入到“我的项目”页面，这个时候项目列表应该是空的。点击页面中间的“创建项目”或者右上角的“+”可以开始创建项目。在这里插入图片描述字段说明：项目名称：用于标识项目项目基础路径：重要，基础路径用于为每个项目分配访问时的基础url。项目描述：关于该项目的描述信息。创建完成在我的项目查看2. 创建接口点击新增接口添加接口定义接口名，类型(method)，url3.接口定义成功，测试接口Postman把需要测试的接口放入Postman中
2021-04-15 20:31:31
3042
原创 页面标签pre和code标签添加高亮的样式
pre和code标签代码块高亮显示基于 highlight.js 美化详情页的代码片段（1） 下载此插件到项目中如果(yarn或node基于自己环境决定)yarn add highlight.js@10.6.0 -Dnpm i highlight.js@10.6.0 -D（2）.在main.js 引入即可import 'highlight.js/styles/default.css' // 代码高亮的样式它会自动给页面标签pre和code标签添加高亮的样式...
2021-04-14 15:52:31
3241
1
原创 数组去重的5种方法
数组去重的5种方法第一种：遍历数组法这种方法最简单最直观，也最容易理解，代码如下： let arr = [2, 8, 5, 0, 5, 2, 6, 7, 2, 6, 8, 9] let newArr = [] for (let i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]) } } c
2021-03-11 21:09:38
2448
6
空空如也
webstorm编译器index.js没了高亮显示
2021-06-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人