最后
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
参数 name
-
类型：String
-
默认值：null
-
说明：放置在
@/assets/icons文件夹下的文件名
样式
-
图标的大小可以通过 width + height 属性改变。
-
通过改变 font-size 属性改变，宽高 = font-zise * 1.4
5.异步请求
封装 Axios
在 @/libs/request.js 路径下对 Axios 进行封装，封装了请求参数，请求头，以及错误提示信息、 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。
废话不说直接贴代码：
import axios from ‘axios’;
import get from ‘lodash/get’;
import storage from ‘store’;
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 10000, // 请求超时时间
});
// 异常拦截处理器
const errorHandler = (error) => {
const status = get(error, ‘response.status’);
switch (status) {
/* eslint-disable no-param-reassign */
case 400: error.message = ‘请求错误’; break;
case 401: error.message = ‘未授权，请登录’; break;
case 403: error.message = ‘拒绝访问’; break;
case 404: error.message = 请求地址出错: ${error.response.config.url}; break;
case 408: error.message = ‘请求超时’; break;
case 500: error.message = ‘服务器内部错误’; break;
case 501: error.message = ‘服务未实现’; break;
case 502: error.message = ‘网关错误’; break;
case 503: error.message = ‘服务不可用’; break;
case 504: error.message = ‘网关超时’; break;
case 505: error.message = ‘HTTP版本不受支持’; break;
default: break;
/* eslint-disabled */
}
return Promise.reject(error);
};
// request interceptor
request.interceptors.request.use((config) => {
// 如果 token 存在
// 让每个请求携带自定义 token 请根据实际情况自行修改
// eslint-disable-next-line no-param-reassign
config.headers.Authorization = bearer ${storage.get('ACCESS_TOKEN')};
return config;
}, errorHandler);
// response interceptor
request.interceptors.response.use((response) => {
const dataAxios = response.data;
// 这个状态码是和后端约定的
const { code } = dataAxios;
// 根据 code 进行判断
if (code === undefined) {
// 如果没有 code 代表这不是项目后端开发的接口
return dataAxios;
// eslint-disable-next-line no-else-return
} else {
// 有 code 代表这是一个后端接口 可以进行进一步的判断
switch (code) {
case 200:
// [ 示例 ] code === 200 代表没有错误
return dataAxios.data;
case ‘xxx’:
// [ 示例 ] 其它和后台约定的 code
return ‘xxx’;
default:
// 不是正确的 code
return ‘不是正确的code’;
}
}
}, errorHandler);
export default request;
-
通过 VUE_APP_BASE_URL 区分线上与开发环境的 API 地址。
-
code 起到一个比较关键的作用，例如 token 过期时的验证。
-
使用了一个叫 sotre 的包作为本地储存的工具用来存储 token。
跨域问题
跨域问题一般情况直接找后端解决了，你要是不好意思打扰他们的话，可以用 devServer 提供的 proxy 代理：
// vue.config.js
devServer: {
proxy: {
‘/api’: {
target: ‘http://47.100.186.132/your-path/api’,
ws: true,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
Mock 数据
一个很常见的情况，后端接口没出来，前端在这干瞪眼。
Mock 数据功能是基于 mock.js (opens new window)开发，通过 webpack 进行自动加载 mock 配置文件。
规则
-
所有的 mock 配置文件均应放置在
@/mock/services路径内。 -
在
@/mock/services内部可以建立业务相关的文件夹分类存放配置文件。 -
所有的配置文件应按照
***.mock.js的命名规范创建。 -
配置文件使用 ES6 Module 导出
export default或export一个数组。
入口文件
import Mock from ‘mockjs’;
Mock.setup({
timeout: ‘500-800’,
});
const context = require.context(‘./services’, true, /.mock.js$/);
context.keys().forEach((key) => {
Object.keys(context(key)).forEach((paramKey) => {
Mock.mock(…context(key)[paramKey]);
});
});
示例模板
import Mock from ‘mockjs’;
const { Random } = Mock;
export default [
RegExp(‘/example.*’),
‘get’,
{
‘range|50-100’: 50,
‘data|10’: [
{
// 唯一 ID
id: ‘@guid()’,
// 生成一个中文名字
cname: ‘@cname()’,
// 生成一个 url
url: ‘@url()’,
// 生成一个地址
county: Mock.mock(‘@county(true)’),
// 从数组中随机选择一个值
‘array|1’: [‘A’, ‘B’, ‘C’, ‘D’, ‘E’],
// 随机生成一个时间
time: ‘@datetime()’,
// 生成一张图片
image: Random.dataImage(‘200x100’, ‘Mock Image’),
},
],
},
];
6.路由
Layout
布局暂时分为三大类：
-
frameIn：基于
BasicLayout，通常需要登录或权限认证的路由。 -
frameOut：不需要动态判断权限的路由，如登录页或通用页面。
-
errorPage：例如404。
权限验证
通过获取当前用户的权限去比对路由表，生成当前用户具的权限可访问的路由表，通过 router.addRoutes 动态挂载到 router 上。
-
判断页面是否需要登陆状态，需要则跳转到 /user/login
-
本地存储中不存在 token 则跳转到 /user/login
-
如果存在 token，用户信息不存在，自动调用 vuex ‘/system/user/getInfo’
在路由中，集成了权限验证的功能，需要为页面增加权限时，在 meta 下添加相应的 key：
auth
-
类型：Boolean
-
说明：当 auth 为 true 时，此页面需要进行登陆权限验证，只针对 frameIn 路由有效。
permissions
-
类型：Object
-
说明：permissions 每一个 key 对应权限功能的验证，当 key 的值为 true 时，代表具有权限，若 key 为 false，配合
v-permission指令，可以隐藏相应的 DOM。
在这里贴一下路由跳转时权限验证的代码：
import router from ‘@/router’;
import store from ‘@/store’;
import storage from ‘store’;
import util from ‘@/libs/utils’;
// 进度条
import NProgress from ‘nprogress’;
import ‘nprogress/nprogress.css’;
const loginRoutePath = ‘/user/login’;
const defaultRoutePath = ‘/home’;
/**
* 路由拦截
* 权限验证
*/
router.beforeEach(async (to, from, next) => {
// 进度条
NProgress.start();
// 验证当前路由所有的匹配中是否需要有登录验证的
if (to.matched.some(® => r.meta.auth)) {
// 是否存有token作为验证是否登录的条件
const token = storage.get(‘ACCESS_TOKEN’);
if (token && token !== ‘undefined’) {
// 是否处于登录页面
if (to.path === loginRoutePath) {
next({ path: defaultRoutePath });
// 查询是否储存用户信息
} else if (Object.keys(store.state.system.user.info).length === 0) {
store.dispatch(‘system/user/getInfo’).then(() => {
next();
});
} else {
next();
}
} else {
// 没有登录的时候跳转到登录界面
// 携带上登陆成功之后需要跳转的页面完整路径
next({
name: ‘Login’,
query: {
redirect: to.fullPath,
},
});
NProgress.done();
}
} else {
// 不需要身份校验 直接通过
next();
}
});
router.afterEach((to) => {
// 进度条
NProgress.done();
util.title(to.meta.title);
});
页面开发
-
根据业务需要划分，按照路由层级在 views 中创建相对应的页面组件，以文件夹的形式创建，并在文件夹内创建 index.vue 文件作为页面的入口文件。
-
页面内的组件：在页面文件夹下创建 components 文件夹，在其内部对应创建相应的组件文件，如果是复杂组件，应以文件夹的形式创建组件。
-
工具模块：能够高度抽象的工具模块，应创建在 @/src/libs 内创建 js 文件。
7、构建优化
包分析工具
构建代码之后，到底是什么占用了这么多空间？靠直觉猜测或者使用 webpack-bundle-analyzer。
const WebpackBundleAnalyzer = require(‘webpack-bundle-analyzer’);
module.exports = {
chainWebpack: (config) => {
if (process.env.use_analyzer) {
config
.plugin(‘webpack-bundle-analyzer’)
.use(WebpackBundleAnalyzer.BundleAnalyzerPlugin);
}
},
};
开启 Gzip
对，这这么一句话，后端就得支持你的 .gz 文件了，而你只需要坐着等老板夸：
chainWebpack: (config) => {
config
.plugin(‘CompressionPlugin’)
.use(CompressionPlugin, []);
},
路由懒加载
这块 @vue/cli 已经帮忙处理好了，但也需要了解一下他的原理和如何配置。
{
path: ‘home’,
name: ‘Home’,
component: () => import(
/* webpackChunkName: “home” */ ‘@/views/home/index.vue’
),
},
webpackChunkName 这条注释还是很有必要加的，至少你打包后知道又是哪个页面变得又臭又大。
Preload & Prefetch
不清楚这两个功能的去 @vue/cli 补课，这两个功能非常有助于你处理加载的性能。
8.测试框架
直接使用了官方提供的 Vue Test Utils，这东西可以对组件进行测试，很不错。
写单元测试在团队里其实很难推进，不知道大家怎么看。
9.组件库
对于很多第三方的工具，我坚持认为二次封装成 vue 插件并没有多少开发成本，反而让你在后续的开发中变得很灵活。
我对以下库进行了 vue 插件的封装，并提交到 npm 私服：
-
数字动画
-
代码高亮
-
大文件上传（切片、断点续传、秒传）需要与后端配合
-
图片预览
-
Excel 导入导出
-
富文本编辑器
-
Markdown 编辑器
-
代码编辑器
“
大文件上传有兴趣的可以留言，我后续单独拎出来详细的写一下这块。
”
10.Vuex
内置一些功能，主要是对以下这些功能做了一些封装：
-
用户信息管理（储存信息、对 token 进行操作等）
-
登陆（调接口）
-
菜单管理（储存路由信息，生成菜单，模糊查询等功能）
-
UA信息
-
全屏操作
-
Loading
-
日志管理（消息提醒、日志留存、日志上报）
11.过滤器
过滤器是 Vue 提供的一个很好用的功能，听说 vue3 没了？
{{ message | capitalize }}
我写了几个常用的过滤器：
-
日期时间
-
剩余时间
-
区分环境的链接（主要针对本地静态资源服务器和 OSS ）
-
文件大小
-
数字金额
-
浮点型精度
12.指令
自定义指令可以提供很好的帮助：
-
组件权限验证
-
文本复制
-
快捷键绑定
-
滚动至指定位置
-
图片懒加载
-
焦点
13.开发规范
ESLint
不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。
这里我们采用了 Airbnb JavaScript Style Guide。
这套规范给我的感觉就是 很严谨！
CSS 规范
降低选择器复杂性
浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
#block .text p {
color: red;
}
-
查找所有 P 元素。
-
查找结果 1 中的元素是否有类名为 text 的父元素
-
查找结果 2 中的元素是否有 id 为 block 的父元素
选择器优先级
“
内联 > ID选择器 > 类选择器 > 标签选择器
”
-
选择器越短越好。
-
尽量使用高优先级的选择器，例如 ID 和类选择器。
-
避免使用通配符 *。
使用 flexbox
在早期的 CSS 布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了新的布局方式 flexbox，它比起早期的布局方式来说有个优势，那就是性能比较好。不过 flexbox 兼容性还是有点问题，不是所有浏览器都支持它，所以要谨慎使用。各浏览器兼容性：
-
Chrome 29+
-
Firefox 28+
-
Internet Explorer 11
-
Opera 17+
-
Safari 6.1+ (prefixed with -webkit-)
-
Android 4.4+
-
iOS 7.1+ (prefixed with -webkit-)
动画性能优化
在 CSS 中，transforms 和 opacity 这两个属性更改不会触发重排与重绘，它们是可以由合成器（composite）单独处理的属性。
属性值
-
当数值为 0 - 1 之间的小数时，建议省略整数部分的 0。
-
当长度为 0 时建议省略单位。
-
建议不使用命名色值。
-
建议当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
-
除公共样式之外，在业务代码中尽量不能使用 !important。
-
建议将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。
字体排版
-
字号应不小于 12px（PC端）。
-
font-weight 属性建议使用数值方式描述。
-
line-height 在定义文本段落时，应使用数值。
Vue 代码规范
常规
-
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数
data() { return {...} }。 -
prop 的定义应该尽量详细，至少需要指定其类型。
-
布尔类型的 attribute， 为 true 时直接写属性值。
-
不要在computed中对vue变量进行操作。
-
应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。
-
在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。
-
v-if 和 v-for 不能同时使用
-
公共方法尽量不要挂到原型上, 可以写在 utils 文件，也可以使用 mixin 文件。不要将业务公共组件注册到全局。
-
不要将任何第三方插件挂载到 vue 原型上。
-
具有高度通用性的方法，要封装到 libs、全局组件或指令集里。
-
为组件样式设置作用域。
-
尽量使用指令缩写。
vuex
State (opens new window)为单一状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在 vue 的组件中才能获取你定义的这个对象的状态。
-
修改
state中数据必须通过mutations。 -
每一个可能发生改变的
state必须同步创建一条或多条用来改变它的mutations。 -
服务端获取的数据存放在
state中，作为原始数据保留，不可变动。
Getters (opens new window)有点类似 vue.js 的计算属性，当我们需要从 store 的 state 中派生出一些状态，那么我们就需要使用 getters，getters 会接收 state 作为第一个参数，而且 getters 的返回值会根据它的依赖被缓存起来，只有 getters 中的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算。
-
通过
getters处理你需要得到的数据格式，而不是通过修改state原始数据。 -
组件内不强制使用
mapGetters，因为你可能需要使用getter和setter。 -
改变
state的唯一方法就是提交 mutations (opens new window)。 -
组件内使用
mapMutations辅助函数将组件中的methods映射为store.commit调用。 -
命名采用
大写字母+下划线的规则。 -
定义
CLEAR，以确保路由切换时可以初始化数据。
Actions
-
页面重的数据接口尽量在 actions (opens new window)中调用。
-
服务端返回的数据尽量不作处理，保留原始数据。
-
获取到的数据必须通过调用
mutations改变state。
Modules
-
通常情况下按照页面划分 modules (opens new window)。
-
默认内置了
system保证了脚手架的基础功能。 -
每个页面模块或页面的子模块添加属性
namespaced: true。
14.完成详细的使用文档
不论是功能还是组件库等等的工具，都需要完善的文档提供查阅，即使是轮子的构建者，也抵不住时间长了会忘记许多细节。
这里我使用 vuepress 构建文档，方便快捷。
参考【拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档】
15.Git 多人协作流程
公司使用内部搭建的 GitLab 托管代码
Root 仓库
项目启动时，由项目管理者搭建起最原始的仓库，称为 Root 仓库（源仓库）。
源仓库的有个作用 :
-
汇总参与该项目的各个开发者的代码。
-
存放趋于稳定和可发布的代码。
-
向 Master 分支提交 Merge Requests 可以触发测试环境构建（CI/CD）。
-
源仓库是受保护的，开发者不可直接对其进行开发工作。
开发者仓库
任何开发者都没有权限对 Root 仓库进行直接的操作，源仓库建立以后，每个开发者需要做的事情就是把源仓库的 Fork 一份，作为自己日常开发的仓库。
-
每个开发者所Fork的仓库是完全独立的，互不干扰。
-
每个开发者提交到代码到自己的仓库中，开发工作完成以后，开发者可以向源仓库发送 Pull Request ，本地仓库先合并源仓库，解决冲突。
-
发起 Merge Request 请求管理员把自己的代码合并到源仓库中的 master 或 其他分支。
Git 流程
图片
-
前端项目会在
Root仓库下创建dev分支，用于代码的拉取和合并，如果有多个不同的测试环境，按照测试环境创建分支。 -
在本地的仓库中创建你的
dev分支和其他功能性的分支。
前端面试题汇总
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
提交 Merge Requests 可以触发测试环境构建（CI/CD）。
- 源仓库是受保护的，开发者不可直接对其进行开发工作。
开发者仓库
任何开发者都没有权限对 Root 仓库进行直接的操作，源仓库建立以后，每个开发者需要做的事情就是把源仓库的 Fork 一份，作为自己日常开发的仓库。
-
每个开发者所Fork的仓库是完全独立的，互不干扰。
-
每个开发者提交到代码到自己的仓库中，开发工作完成以后，开发者可以向源仓库发送 Pull Request ，本地仓库先合并源仓库，解决冲突。
-
发起 Merge Request 请求管理员把自己的代码合并到源仓库中的 master 或 其他分支。
Git 流程
图片
-
前端项目会在
Root仓库下创建dev分支，用于代码的拉取和合并，如果有多个不同的测试环境，按照测试环境创建分支。 -
在本地的仓库中创建你的
dev分支和其他功能性的分支。
前端面试题汇总
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
4319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
