JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-04-06 03:57:50 +08:00
Code Issues Projects Releases Wiki Activity

readme

Browse Source
This commit is contained in:
sunnie 2020-04-17 17:45:10 +08:00
parent 0692418531
commit f670c296d2
5 changed files with 145 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.postcssrc.js
View File

@ -1,12 +1,13 @@
// https://github.com/michael-ciniawsky/postcss-load-config // https://github.com/michael-ciniawsky/postcss-load-config
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: { autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
}, },
'postcss-pxtorem': { 'postcss-pxtorem': {
rootValue: 37.5, rootValue: 37.5,
propList: ['*'] propList: ['*'],
} //selectorBlackList: ['van-']
} }
} }
}

146
README.md
View File

@ -21,9 +21,8 @@
- [√ VantUI 组件按需加载](#vant) - [√ VantUI 组件按需加载](#vant)
- [√ Sass](#sass) - [√ Sass](#sass)
- [√ Webpack 4](#webpack) - [√ Webpack 4](#webpack)
- [√ Vuex](#vuex) - [√ Vuex](#vuex)
- [√ Axios 封装](#axios) - [√ Axios 封装及接口管理](#axios)
- [√ Vue-router](#router) - [√ Vue-router](#router)
- [√ vue.config.js 基础配置](#base) - [√ vue.config.js 基础配置](#base)
- [√ vue.config.js 配置 proxy 跨域](#proxy) - [√ vue.config.js 配置 proxy 跨域](#proxy)
@ -154,13 +153,23 @@ module.exports = {
很多小伙伴会问我，适配的问题。 很多小伙伴会问我，适配的问题。
我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 看到 （`1rem 等于 37.5px`）：
```html
<html data-dpr="1" style="font-size: 37.5px;"></html>
```
切换不同的机型，根元素可能会有不同的`font-size`。当你写css px 样式时，会被程序换算成 `rem` 达到适配。
因为我们用了Vant的组件，需要按照 `rootValue: 37.5` 来写样式。
举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。 举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。
- 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑 - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑
满。 满。
- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 - 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图，去做对应的设置了。 也就是iphone 6 下 375px宽度写CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。
当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。 当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。
@ -317,6 +326,101 @@ export default createRouter()
[▲ 回顶部](#top) [▲ 回顶部](#top)
### <span id="axios">✅ Axios 封装及接口管理</span>
`utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。
- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
```javascript
import axios from 'axios'
import store from '@/store'
import {Toast} from 'vant'
// 根据环境不同引入不同api地址
import {baseApi} from '@/config'
// create an axios instance
const service = axios.create({
baseURL: baseApi, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request 拦截器 request interceptor
service.interceptors.request.use(
config => {
// 不传递默认开启loading
if (!config.hideloading) {
// loading
Toast.loading({
forbidClick: true
})
}
if (store.getters.token) {
config.headers['X-Token'] = ''
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// respone拦截器
service.interceptors.response.use(
response => {
Toast.clear()
const res = response.data
if (res.status && res.status !== 200) {
// 登录超时,重新登录
if (res.status === 401) {
store.dispatch('FedLogOut').then(() => {
location.reload()
})
}
return Promise.reject(res || 'error')
} else {
return Promise.resolve(res)
}
},
error => {
Toast.clear()
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
```
在`src/api` 文件夹下统一管理接口
- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
- `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi`
- `method` 请求方法
- `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
- `hideloading` 默认 `false`,设置为 `true` 后，不显示loading ui 交互中有些接口不需要样用户感知
```javascript
import qs from 'qs'
// axios
import request from '@/utils/request'
//user api
// 登录
export function login(params) {
return request({
url: '/user/login', // 接口地址
method: 'post', // method
data: qs.stringify(params)
// hideloading: true
})
}
```
[▲ 回顶部](#top)
### <span id="base">✅ vue.config.js 基础配置 </span> ### <span id="base">✅ vue.config.js 基础配置 </span>
如果你的 `Vue Router` 模式是 hash 如果你的 `Vue Router` 模式是 hash
@ -358,6 +462,10 @@ module.exports = {
### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
如果你的项目需要跨域设置，你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数
**注意**：你还需要将 `src/config/env.development.js` 里的 `baseApi` 设置成 '/'
```javascript ```javascript
module.exports = { module.exports = {
devServer: { devServer: {
@ -366,7 +474,7 @@ module.exports = {
//配置跨域 //配置跨域
'/api': { '/api': {
target: 'https://test.xxx.com', // 接口的域名 target: 'https://test.xxx.com', // 接口的域名
ws: true, // 是否启用websockets // ws: true, // 是否启用websockets
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端 changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: { pathRewrite: {
'^/api': '/' '^/api': '/'
@ -377,33 +485,25 @@ module.exports = {
} }
``` ```
使用 使用 例如: `src/api/home.js`
```javascript ```javascript
<script>
import axios from "axios" export function getUserInfo(params) {
export default { return request({
mounted() { url: '/api/userinfo',
axios.get("/api/1").then(res => { method: 'get',
}); data: qs.stringify(params)
} })
}; }
</script>
``` ```
[▲ 回顶部](#top) [▲ 回顶部](#top)
### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
```javascript
publicPath: './', // 署应用包时的基本 URL router hash 模式使用
// publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境，不然build会报错
outputDir: 'dist', // 生产环境构建文件的目录
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false,
productionSourceMap: !IS_PROD, // 生产环境的 source map
```
[▲ 回顶部](#top) [▲ 回顶部](#top)
#### 总结 #### 总结

6
src/api/home.js Normal file
View File

@ -0,0 +1,6 @@
// import qs from 'qs'
// axios
// import request from '@/utils/request'
//home api

6
src/api/user.js
View File

@ -1,13 +1,15 @@
import qs from 'qs' import qs from 'qs'
// axios
import request from '@/utils/request' import request from '@/utils/request'
// api //user api
// 登录 // 登录
export function login(params) { export function login(params) {
return request({ return request({
url: '/user/login', url: '/user/login',
method: 'post', method: 'post',
data: qs.stringify(params) data: qs.stringify(params),
// hideloading: true
}) })
} }
// 用户信息 // 用户信息

4
vue.config.js
View File

@ -48,12 +48,12 @@ module.exports = {
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层 // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
warnings: false, warnings: false,
errors: true errors: true
} },
// proxy: { // proxy: {
// //配置跨域 // //配置跨域
// '/api': { // '/api': {
// target: "https://test.xxx.com", // target: "https://test.xxx.com",
// ws:true, // // ws:true,
// changOrigin:true, // changOrigin:true,
// pathRewrite:{ // pathRewrite:{
// '^/api':'/' // '^/api':'/'