当铺鬼-CSDN博客

原创代码规范约定

0. Initialize[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlUUqOJ1-1631704152516)(未命名.assets/image-20210915092350411.png)]1. Editorconfig.editorconfig，编辑器配置# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style

2021-09-15 19:12:37 162

原创模拟数据 json-server

0. 零json-servernpm install -g json-serverCreate a db.json file with some data{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "na

2021-08-24 09:34:05 115

原创项目打包优化，体积减少了 97%

0. 直接打包npm run build1. 按需加载第三方库例如 ElementUI、lodash 等npm install babel-plugin-component -Dbabel.config.jsmodule.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ 'component', { libraryName: 'element-ui'

2021-08-22 12:53:32 447 1

原创 Vue 动画

1. 过渡效果<template> <div style="text-align: center;margin-top: 60px;"> <button @click="isShow = !isShow">click</button> <transition>  <div v-if="isShow"

2021-08-21 17:41:17 109

原创导航钩子和组件钩子执行流程

从 News 进到 UserApp.vue<template> <div> <div> <router-link to="/user?id=zs">User zs</router-link>    <router-link to="/user?id=ls">User ls</router-link>  &a

2021-08-11 22:42:52 57

原创 Vuex 数据持久化

1. 刷新后，Vuex 中的数据丢失store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({ state: { token: 'x' }, mutations: { setToken(state, uname) { state.token = uname; }

2021-08-11 18:26:21 49

原创在项目中使用 Mock.js

1. 模拟数据生成指定字符import Mock from 'mockjs';const data = Mock.mock({ str: '????'});console.log(data);指定字符的具体个数const data = Mock.mock({ 'str|3': '????'});指定字符和区间const data = Mock.mock({ 'str|3-5': '????'});生成随机字符const data = Mock.mo

2021-08-11 10:37:40 254

原创电商后台项目总结

0. 路由导航守卫router.beforeEach((to, from, next) => { // to 要访问的路径 // from 从哪里来的 // next() 直接放行，next('/login') 表示跳转 // 要访问 /login 的话那直接放行 if (to.path === '/login') return next() const tokenStr = window.sessionStorage.getItem('token')

2021-06-12 21:57:21 73

原创 TS 基础掌握

00. TS 优势JS 的超集，具有更好的错误提示、更好的语法提示、类型约束（不易出错且语义化）01. 初体验观察输入 data. 会有对应的属性提示function demo(data: { x: number; y: number }) { return Math.sqrt(data.x ** 2 + data.y ** 2);}const r = demo({ x: 3, y: 4 });console.log(r);使用类型别名优化上面代码type Point = {

2021-05-22 22:07:22 169

原创 JSON.stringify()

第 2 个参数是函数const user = { "name": "ifer", "age": 26,};const r = JSON.stringify(user, function (key, value) { // 注意，第一次 value 永远是 user 这个对象本身，必须返回 // 过滤 string if (typeof value === 'string') { return undefined; } return

2021-04-25 15:19:12 72

原创项目中用到的 lodash 函数

_.differenceBy从 A 数组中筛选出 B 数组中不存在的选项，注意是有顺序关系的！_.difference([2, 1], [2, 3]) // => [1]_.difference([2, 3], [2, 1]) // => [3]实际需求：从 allChannels 筛选出 myChannels 不包含的选项const allChannels = [ { id: 2, name: '开发者资讯' }, { id: 3, name: 'ios' },

2021-04-09 19:38:28 264

原创 Vue 自定义指令的钩子函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><body> <div id="app">

2021-03-19 18:45:46 86

原创【面试】Vue 双向数据绑定代码

0. 目标Vue把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setterObserver能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 DepCompiler解析每个元素中的指令/插值表达式，并替换成相应的数据Dep添加观察者(watcher)，当数据变化通知所有观察者Watcher数据变化更新视图目标<div id="app"> <h2>差值表达式</

2021-03-11 10:20:03 124

原创为什么对象的有些属性在 Chrome 控制台中显示是淡色的

淡色属性代表不可枚举！注意不可枚举的属性会影响 for ... in、Object.keys()、JSON.stringify() 等的结果！function Person() { this.name = 'ifer';}Person.prototype.age = 18;const p = new Person();Object.defineProperty(p, 'sex', { value: 'man', // 内容 writable: true, // 修改.

2021-03-09 00:05:22 1004

原创 GitHub 多人合作

Git 的访问慢的问题粘贴下面内容到 C:\Windows\System32\drivers\etc\hosts 文件140.82.112.4 github.com151.101.185.194 github.global.ssl.fastly.net203.98.7.65 gist.github.com13.229.189.0 codeload.github.com185.199.109.153 desktop.github.com185.199.108.153 guides.github.

2021-03-08 09:18:05 164

原创 Vue-Quill-Editor

Vue-Quill-EditorCDNstaticfile、jsdelivr、vue-quill-editor<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt

2021-03-08 09:07:08 212

原创头条项目优化

0. 统一错误处理参考链接src/utils/request.jsimport { Toast } from 'vant';request.interceptors.response.use( function (response) { return response; }, function (error) { console.dir(error); const status = error.response.status;

2021-03-04 14:54:27 169 1

原创处理 Axios 拿到的大数字

后端代码// 后端返回的是 JSON 格式的字符串，字符串中的数字超出了 2 的 53 次方，即大数字require('http') .createServer((req, res) => { // exceed Math.pow(2, 53) res.end('{"id": 900719925474099288}'); }) .listen(3000, () => console.log('Server running on http

2021-03-04 08:30:25 1654 2

原创关于 ElementUI 中 Form 组件的 resetFields 方法

项目场景需求：期望在 App.vue 中点击按钮展示 EditUserDialog.vue 中的弹框，并在弹框的表单中填充数据，关闭弹框时调用 resetFields 方法重置表单字段为初始值src/App.vue<template> <div id="app"> <edit-user-dialog ref="editUserDialog"></edit-user-dialog> <el-button type="primary

2021-02-23 21:26:46 1521

原创列表数据转树状

案例需求const arr = [ { id: 'a', pid: '', name: '总裁办' }, { id: 'b', pid: '', name: '行政部' }, { id: 'c', pid: '', name: '财务部' }, { id: 'd', pid: 'c', name: '财务核算部' }, { id: 'e', pid: 'c', name: '税务管理部' }];把上面的数据转成下面的结果const arr = [ {

2021-02-22 18:05:32 186

原创 Vue 中，父组件使用了 scoped，为什么操作子组件的非根节点样式就不生效了！

不加 scoped父组件 App.vue<template> <div class="app"> <HelloWorld /> </div></template><script>import HelloWorld from './components/HelloWorld.vue';export default { name: 'App', components: { HelloWorld

2021-02-19 16:51:01 244

原创 require.context(‘./svg‘, false, /\.svg$/)

require.context(’./svg’, false, /.svg$/)require.contextconst req = require.context('./svg', false, /\.svg$/)const requireAll = requireContext => requireContext.keys().map(requireContext)requireAll(req)vue-element-admin 中看到上面代码，什么意思呢？首先 require.co

2021-02-19 15:02:10 2561 1

生产队队长