新建项目
- npm install --global @vue/cli
- vue create vue-h5
引入
bug ：系统定制开发若莫名其妙报错是因为vant 版本太高，系统定制开发降低版本即可
- npm i vant -S
- 系统定制开发按需引入组件
npm i babel-plugin-import -D- 1
- babel.config.js 中配置
module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- main.js 注册
import { Button } from "vant";Vue.use(Button);- 1
- 2
- 页面直接使用
<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>- 1
- 2
- 3
- 4
- 5
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, //设置要替换的最小像素值 }, },};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- main.js 引入
import "lib-flexible";- 1
- 页面里使用 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;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- main.js
import service from "./utils/request";Vue.prototype.$axios = service;- 1
- 2
- 使用
this.$axios.get("1111", { params: { a: 1, }, }).then((res) => { console.log(res); }); this.$axios.post("2222", { b: 1, }).then((res) => { console.log(res); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 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": "/", }, }, }, },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
vuex数据持久化
-
npm install -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 })]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122