我曾经一度很迷茫，在学了 Vue、React 的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。 这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，不必太焦虑，可以把这篇文章作为一个进阶的路线图，在未来的时日里朝着这个方向努力就好。我也并不是说这篇文章是进阶高级工程师的唯一一条路线，如果你在业务上做的精进，亦或是能在沟通上八面玲珑，配合各方面力量把项目做的漂漂亮亮，那你也一样可以拥有这个头衔。本文只是我自己的一个成长路线总结。 本篇文章面对的人群是开发经验1到3年的初中级前端工程师，希望能和你们交个心。 已经晋升高级前端的同学，欢迎你在评论区留下你的心得，补充我的一些缺失和不足。 笔者本人 17 年毕业于一所普通的本科学校，20 年 6 月在三年经验的时候顺利通过面试进入大厂，职级是高级前端开发。 我的 github 地址[1]，欢迎 follow，我会持续更新一些值得你关注的项目。 我的 blog 地址[2] ...

前言动态路由权限控制这块主要是几种，前端控制/后端控制/登录与菜单页分离等。本篇主要是分享下对路由在前端控制，这里使用了vue-element-admin的方法 使用 前端使用 vue+element-ui 后端使用 nodejs+koa demo 效果 步骤 先定义好常规路由与动态路由列表 需要在 vuex 里维护权限，根据不同角色来分配路由 在 router.beforeEach 里来动态添加路由表 页面通过获得的路由来进行渲染 注意 退出前需要有重置路由这一操作，否则在用户不刷新的情况下，先登录管理员，再登录普通用户时，普通用户页面也有了管理员权限的页面。 在使用 next(…route, replace: true)时会产生一个报错，在 router 的 index.js 里加一段代码就好了（见完整源码） 关键源码12345678910111213141516171819202122232425262728293031323334// src/permission.jsrouter.beforeEach(async (to, from, ...

前言根据面试官：自己搭建过 vue 开发环境吗？ 这么一篇文章，于是自己开始动手一遍，发生了非常多的问题，同时也意识到 webpack 的学习还不够，准备写完这个后，再来深入学习一遍 webpack。 步骤 初始化项目 配置项目功能 es6 转 es5 scss 转 css postcss 添加后缀 html-webpack-plugin 自动引入 js 配置 devServer 热更新 配置资源打包 识别.vue 文件 定义环境变量 区分生产环境/开发环境 集成 vue-router 集成 vuex 这里主要就是照着博主的文章敲了一遍代码，整理下思路，主要写点遇到的问题。 版本webpack 最大的问题就是版本问题，插件与 webpack 版本不匹配出现的错误也是使用 webpack 最多的，没有之一，故先列出本次使用版本。 1234// 使用版本 "webpack": "^5.37.0", "webpack-cli": "^4.7.0", "webpack-dev-serve ...

效果图 前言原本是使用 codemirror 的方法来实现，结果在得到行内容的时候问题不能第一次得到括号/花括号这样的符号，需要打两遍，而且实际项目中还需要做遍历操作，需要的参数过多。于是使用了 vue-codemirror，基于它封装的 vue 插件，而且功能使用上也比较方便，遂使用。 代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125<template> <div class="main"> <codemirror ref=" ...

其实这里也没啥，就是使用了表单的下载，哈哈～ 表单提交法1234import {downloadFile} from "../until/download"; downloadB () { downloadFile('http://localhost:3000/request/download', {name: this.name}) } 123456789101112131415161718192021222324// download.jsimport $ from 'jquery'const downloadFile = ($url, $obj) => { const param = { url: $url, obj: $obj } if (!param.url) { return } const generatorI ...

上传1234<div class="upload"> <input type="file" name="file" @change="change" /> <button @click="upload">上传</button></div> 1234567891011121314upload() { let formData = new FormData(); formData.append("file", this.file); axios .post("http://localhost:3000/request/profile", formData) .then((res) => { console.log(res.data); });},change(e) { let file = e.t ...

axios的基本介绍Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios支持请求的方式： get：获取数据 post：提交数据（表单提交+文件上传） put：更新数据（所有数据推送到后端） patch：更新数据（只将更改的数据推送到后端） delete：删除数据 1. get1.0 前提在本地请求先解决跨域问题，这里使用cors解决跨域 12345678app.use((req,res,next) => { res.header('Access-Control-Allow-Origin','*'); res.header('Access-Control-Allow-Credential','true'); res.header('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,PATCH,OPTIONS'); // 这里处理 ...

dispatch().then 相关遇到这样一个问题，使用 dispatch 传值，then 里面使用 emit 传给父组件事件传不过去？action 里也使用的 promise，而另外一个组件使用同样的写法却能传过去… 12345678methods: { getData () { this.$store.dispatch('actionA', params).then(res => { this.$emit('onUpdate') console.log(res) }) }} 12345678910actionA ({state}, payload) { return new Promise((resolve,reject) => { // 请求的 axios.get('xxx').then(res => { resolve(res) ...

一、Docker1. 什么是dockerDocker是一个开源的引擎，可以轻松地为任何应用创建一个轻量级的、 可移植的、自给自足的容器。这里需要注意，Docker本身并不是容器，它是创建容器的工具，是应用容器引擎。 2. 为什么使用docker 更快的将会和部署 更高效的虚拟化 更轻松的迁移和扩展 更简单的管理 对比传统虚拟机的更大的优势：启动秒级/硬盘使用MB/性能好/单机支持上千个容器3. docker三大核心概念3.1 镜像(Image)镜像，从认识上简单的来说，就是面向对象中的类，相当于一个模板。从本质上来说，镜像相当于一个文件系统。Docker 镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。镜像不包含任何动态数据，其内容在构建之后也不会被改变。3.2 容器(Container)容器，从认识上来说，就是类创建的实例，就是依据镜像这个模板创建出来的实体。容器的实质是进程，但与直接在宿主执行的进程不同，容器进程运行于属于自己的独立的命名空间。因此容器可以拥有自己的root 文件系 ...

前言开始写博客就需要上图了，把图片与文章放一起也不太好，再者对于免费的图床也不踏实，于是在参考了各路大神之后还是觉得这个方法比较好一些，特此记录。 一、github 部分 不用多说新建一个仓库，起个名字，比如 pic： settings–develper settings–personal access tokens,新建一个 token,只需要给上面的权限： 二、picgo 部分 下载 picgo，https://picgo.github.io/PicGo-Doc/zh/guide/ 打开 picgo,选 github 图床，配置按它的提示就好，自定义域名先空(下面讲)： picgo 的插件按需取： 三、jsDelivr 部分自定义域名，这里使用 jsDelivr，因为它能加速 github 里的文件，填写如下： 1https://cdn.jsdelivr.net/gh/用户名/仓库名@master 好，这样就成功了，测试：