一、全局样式
不通过import 在项目中任何使用变量和mixins
// vue.config.js
module.exports={
css:{
loaderOptions:{
sass:{
perpendDate:`
@import '*******';
`
}
}
}
}
二、页面载入进度条
使用 nprogress 对路由跳转进行做一个伪进度条 在网络不好的情况下然用户体验优化
import NProgress from 'nprogress'
router.beforeEach(()=>{
Nprogress.start()
})
router.afterEach(()=>{
Nprogress.done()
})
三、美化滚动条
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
width: 6px;
background: rgba(#101F1C, 0.1);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(#101F1C, 0.5);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(#101F1C, 1);
}
四、移动端100vh
你以为的100vh===视窗高度 实际上100vh ===视窗高度+浏览器工具栏等
// 安装 vh-check npm install vh-check \--save
import vhCheck from 'vh-check
vhChck('browser-address-bar')
// 定义css mixin
@mixin vh($height: 100vh) {
height: $height;
height: calc(#{$height} - var(--browser-address-bar, 0px));
}
五、ant design vue 优化
// 按需加载
// babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
plugins: [
[
'import',
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
],
],
};
// 国际化 只留中文
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config
.plugin('ContextReplacementPlugin')
.use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/]);
},
}
//按需引入
<script>
import { DatePicker } from 'ant-design-vue';
export default {
components: {
ADatePicker: DatePicker,
},
}
</script>
// svg自动注册
// 这样方便使用
<template>
<svg name="logo" />
</template>
//配置
module.exports = {
chainWebpack: (config) => {
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end();
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader');
},
}
//写一个全局用的 Vue 组件 <m-svg />: @/components/m-svg/index.js
const requireAll = (requireContext) => requireContext.keys().map(requireContext);
const req = require.context('@/assets/icons', false, /\.svg$/);
requireAll(req);
// @/components/m-svg/index.vue
<template>
<svg class="mw-svg" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'm-svg',
props: {
name: { type: String, default: '' },
},
computed: {
iconName() {
return `#${this.name}`;
},
},
};
</script>
<style lang="scss" scoped>
.mw-svg {
width: 1.4em;
height: 1.4em;
fill: currentColor;
overflow: hidden;
line-height: 1em;
display: inline-block;
}
</style>
//类型:String
//默认值:null
//说明:放置在 @/assets/icons 文件夹下的文件名样式
//图标的大小可以通过 width + height 属性改变。
//通过改变 font-size 属性改变,宽高 = font-zise * 1.4
六、分装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。
七、跨域问题
跨域问题一般情况直接找后端解决了
// vue.config.js
devServer: {
proxy: {
'/api': {
target: 'http://47.100.186.132/your-path/api',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
八、mock
1所有的 mock 配置文件均应放置在 @/mock/services 路径内
2在 @/mock/services 内部可以建立业务相关的文件夹分类存放配置文件
3所有的配置文件应按照 ***.mock.js 的命名规范创建。
4 配置文件使用 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]);
});
});
//demo
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'),
},
],
},
];
九、路由
路由跳转时权限验证
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) => 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);
});
十、包分析工具
const WebpackBundleAnalyzer = require('webpack-bundle-analyzer');
module.exports = {
chainWebpack: (config) => {
if (process.env.use_analyzer) {
config
.plugin('webpack-bundle-analyzer')
.use(WebpackBundleAnalyzer.BundleAnalyzerPlugin);
}
},
};
十一、开启gzip
chainWebpack: (config) => {
config
.plugin('CompressionPlugin')
.use(CompressionPlugin, []);
},
十二、路由懒加载
{
path: 'home',
name: 'Home',
component: () => import(
/* webpackChunkName: "home" */ '@/views/home/index.vue'
),
},
十三、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、全局组件或指令集里。
为组件样式设置作用域。
尽量使用指令缩写。
*/