Web前端最全《vue3+ts+element-plus 后台管理系统系列一》之简介(1)，2024年最新网易前端面试流程

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

• 内联编辑

• 错误页面

• 401

• 404

• 組件

• 头像上传

• 返回顶部

• 拖拽Dialog

• 拖拽Select

• 拖拽看板

• 列表拖拽

• Dropzone

• Sticky

• CountTo (to do)

• 综合实例

• 错误日志

• Dashboard

• 引导页

• ECharts 图表

• Clipboard(剪贴复制)

目录结构

admin-tmpl

├─ .env.dev.build # 开发环境

├─ .env.dev.serve # 开发本地本地

├─ .env.prod.build # 生产环境

├─ .env.prod.serve # 生产环境本地

├─ .env.test.build # 测试环境

├─ .env.test.serve # 测试环境本地

├─ .eslintrc.js # eslint

├─ README.md

├─ dist # 打包dist

├─ mock # mock服务

├─ public # 静态资源

├─ src # 源码

│ ├─ @types # ts 声明

│ ├─ apis # 接口请求

│ ├─ assets # webpack打包的资源

│ ├─ components # 公共组件

│ ├─ config # 全部配置

│ ├─ constant # 常量

│ ├─ directives # 全局指令

│ ├─ layout # 全局Layout

│ ├─ locales # 国际化

│ ├─ model # 全部model存放

│ ├─ plugins # 插件

│ ├─ router # 路由

│ ├─ store # 全局store管理

│ ├─ styles # 全局样式

│ ├─ utils # 全局公共方法

│ └─ views # 所有业务页面

├─ tsconfig.json # ts 编译配置

└─ vue.config.js # vue-cli 配置

HighLight

---

项目均已最新技术实现，Vue3配套升级全家桶和涉及的插件组件等

项目采用技术:

• vue3 + composition api

• typescript3.9

• sass (dart sass)

• echats5

vue next 系列:

• element-plus

• vue-router-next

• vuex-4.0

• vue-vue-i18n-next

Document

---

• 文档地址

• 文档项目git地址

Setup

---

项目主要是前端和mock server（node）

前后端都启动

yarn

yarn start

or

npm install

npm run start

单独启动 Mock

后台模拟服务器和其他版本不同，采用koa2+Faker进行模拟。

• Koa2

• Faker

启动mock server:

yarn mock

or

npm run mock

mock 需要部署到服务器，单独项目地址：https://github.com/rcyj-FED/admin-tmpl-mock

mock在线测试地址：https://admin-tmpl-mock.rencaiyoujia.com/

单独启动 vue admin

yarn serve:dev

or

npm run serve:dev

多环境命令查看package.json script:

“serve:dev”: “cross-env NODE_ENV=development dotenv -e .env.dev.serve vue-cli-service serve”,

“build:dev”: “cross-env NODE_ENV=production dotenv -e .env.dev.build vue-cli-service build”,

“serve:test”: “cross-env NODE_ENV=development dotenv -e .env.test.serve vue-cli-service serve”,

“build:test”: “cross-env NODE_ENV=production dotenv -e .env.test.build vue-cli-service build”,

“serve:prod”: “cross-env NODE_ENV=development dotenv -e .env.prod.serve vue-cli-service serve”,

“build:prod”: “cross-env NODE_ENV=production dotenv -e .env.prod.build vue-cli-service build”,

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】