vue2+vant2搭建H5框架
新建项目
- npm install --global @vue/cli
- vue create vue-h5
引入vant2.0
bug ：若莫名其妙报错是因为vant 版本太高，降低版本即可
- npm i vant -S
- 按需引入组件
npm i babel-plugin-import -D
- babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
- main.js 注册
import { Button } from "vant";
Vue.use(Button);
- 页面直接使用
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
rem单位适配
- npm i postcss-pxtorem
- npm i lib-flexible
- postcss.config.js配置
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 75, //一个rem等于75个px;相当于vue/css文件中写width:75;会转换成width:1rem;再根据html的fontsize计算实际的width:
propList: ["*"], //允许哪些属性转成rem;
unitPrecision: 5, //最多小数位数;
selectorBlackList: [/^\.van-/, /^\.mescroll/], //忽略.van-和.mescroll开头的类名;
replace: true,
mediaQuery: false, //允许在媒体查询中转换px
minPixelValue: 2, //设置要替换的最小像素值
},
},
};
- main.js 引入
import "lib-flexible";
- 页面里使用 750px即是全屏
axios封装
- require.js
import axios from "axios";
import store from "@/store";
import { Toast } from "vant";
// 是否显示重新登录
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: "/api",
// 超时
timeout: 10000,
});
// request拦截器
service.interceptors.request.use((config) => {
// 设置 token
config.headers["Authorization"] = store.state.token; // 让每个请求携带自定义token 请根据实际情况自行修改
return config;
});
// 响应拦截器
service.interceptors.response.use(
(res) => {
console.log(8888, res.data);
if (res.data.code === 200) {
return Promise.resolve(res.data);
} else if (res.data.code === 401) {
Toast.fail("请登录后再操作");
} else {
Toast(res.data.msg);
return Promise.reject(res.data);
}
},
(error) => {
console.log(error);
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Toast.fail(message);
return Promise.reject(error);
}
);
export default service;
- main.js
import service from "./utils/request";
Vue.prototype.$axios = service;
- 使用
this.$axios.get("1111", {
params: {
a: 1,
},
}).then((res) => {
console.log(res);
});
this.$axios.post("2222", {
b: 1,
}).then((res) => {
console.log(res);
});
- vue.config.js 配置proxy本地代理
devServer: {
proxy: {
//配置跨域
"/api": {
target: "http://121.36.221.107:8080", //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
"^/api": "/",
},
},
},
},
vuex数据持久化
-
npm install vuex-persistedstate -S
-
store/index.js 引入并注册插件
import persistedState from "vuex-persistedstate";
export default new Vuex.Store({
state: {
token: "",
name: "",
},
plugins: [persistedState()],
});
// 默认存在localStorage，且存储state所有的变量，修改之后页面关闭即消失
plugins: [
persistedState({ storage: window.sessionStorage })
]
scss样式
- reset.scss
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
*::before,
*::after {
box-sizing: inherit;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
td:not([align]),
th:not([align]) {
text-align: left;
}
i {
font-style: normal;
}
- flex.scss
//flex
.flex {
justify-content: space-between;
display: flex;
align-items: center;
}
.flex_l {
justify-content: flex-start;
display: flex;
align-items: center;
}
.flex_r {
justify-content: flex-end;
display: flex;
align-items: center;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.flex1 {
display: flex;
}
.flex-inline {
display: inline-flex;
}
.flex::before,
.flex::after,
.flex-inline::before,
.flex-inline::after {
display: none;
}
.flex-left {
justify-content: flex-start;
}
.flex-center {
justify-content: center;
}
.flex-right {
justify-content: flex-end;
}
.flex-between {
justify-content: space-between;
}
.flex-around {
justify-content: space-around;
}
.flex-stretch {
align-items: stretch;
}
.flex-top {
align-items: flex-start;
}
.flex-middle {
align-items: center;
}
.flex-bottom {
align-items: flex-end;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-column {
flex-direction: column;
}
.flex-column-reverse {
flex-direction: column-reverse;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
// utils
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.fixed-bottom {
left: 0;
right: 0;
bottom: 0;
position: fixed;
}
// utils
.inline-block {
display: inline-block;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.autowrap {
word-wrap: break-word;
word-break: normal;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.over-hidden {
overflow: hidden !important;
}
.scroll-y {
overflow-y: auto;
}
.min100 {
min-height: 100vh;
}
.w100 {
width: 100%;
}
.h100 {
height: 100%;
}
.bold {
font-weight: 700;
}
.line-1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 两行超出显示省略号 */
.line-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
- index.scss
@import "./reset.scss";
@import "./flex.scss";
$black: #000;
$white: #fff;
$gray-1: #333;
$gray-2: #666;
$gray-3: #999;
$gray-4: #eee;
$gray-5: #f8f8f8;
$red: #e91010;
$yellow: #fb8d32;
$blue: #2e93ff;
$border-color: #eee;
$border-width-base: 1px;
// $Color
$colors: (
black: $black,
white: $white,
gray-1: $gray-1,
gray-2: $gray-2,
gray-3: $gray-3,
gray-4: $gray-4,
gray-5: $gray-5,
red: $red,
yellow: $yellow,
blue: $blue,
);
@each $key, $color in $colors {
.#{$key} {
color: $color;
}
.bg-#{$key} {
background-color: $color;
}
}
// padding margin
@for $value from 1 through 100 {
.pd-#{$value},
.ptb-#{$value},
.pt-#{$value} {
padding-top: $value * 1rpx;
}
.pd-#{$value},
.ptb-#{$value},
.pb-#{$value} {
padding-bottom: $value * 1rpx;
}
.pd-#{$value},
.plr-#{$value},
.pl-#{$value} {
padding-left: $value * 1rpx;
}
.pd-#{$value},
.plr-#{$value},
.pr-#{$value} {
padding-right: $value * 1rpx;
}
.mg-#{$value},
.mtb-#{$value},
.mt-#{$value} {
margin-top: $value * 1rpx;
}
.mg-#{$value},
.mtb-#{$value},
.mb-#{$value} {
margin-bottom: $value * 1rpx;
}
.mg-#{$value},
.mlr-#{$value},
.ml-#{$value} {
margin-left: $value * 1rpx;
}
.mg-#{$value},
.mlr-#{$value},
.mr-#{$value} {
margin-right: $value * 1rpx;
}
}
// size
@for $value from 20 through 50 {
.size-#{$value} {
font-size: $value * 1rpx;
}
}
// radius
@for $value from 5 through 20 {
.radius-#{$value} {
border-radius: $value * 1rpx;
}
}
@for $value from 1 through 5 {
.flex-#{$value} {
flex: $value;
}
}
.bg {
background-color: $gray-5;
}
//border
.bt {
border-top: $border-width-base / 2 solid $border-color;
}
.br {
border-right: $border-width-base / 2 solid $border-color;
}
.bb {
border-bottom: $border-width-base / 2 solid $border-color;
}
.bl {
border-left: $border-width-base / 2 solid $border-color;
}
.border {
border: $border-width-base / 2 solid $border-color;
}