f670c296 by sunnie

readme

1 parent 06924185
...@@ -6,7 +6,8 @@ module.exports = { ...@@ -6,7 +6,8 @@ module.exports = {
6 }, 6 },
7 'postcss-pxtorem': { 7 'postcss-pxtorem': {
8 rootValue: 37.5, 8 rootValue: 37.5,
9 propList: ['*'] 9 propList: ['*'],
10 //selectorBlackList: ['van-']
10 } 11 }
11 } 12 }
12 } 13 }
......
...@@ -21,9 +21,8 @@ ...@@ -21,9 +21,8 @@
21 - [√ VantUI 组件按需加载](#vant) 21 - [√ VantUI 组件按需加载](#vant)
22 - [√ Sass](#sass) 22 - [√ Sass](#sass)
23 - [√ Webpack 4](#webpack) 23 - [√ Webpack 4](#webpack)
24
25 - [√ Vuex](#vuex) 24 - [√ Vuex](#vuex)
26 - [√ Axios 封装](#axios) 25 - [√ Axios 封装及接口管理](#axios)
27 - [√ Vue-router](#router) 26 - [√ Vue-router](#router)
28 - [√ vue.config.js 基础配置](#base) 27 - [√ vue.config.js 基础配置](#base)
29 - [√ vue.config.js 配置 proxy 跨域](#proxy) 28 - [√ vue.config.js 配置 proxy 跨域](#proxy)
...@@ -154,13 +153,23 @@ module.exports = { ...@@ -154,13 +153,23 @@ module.exports = {
154 153
155 很多小伙伴会问我,适配的问题。 154 很多小伙伴会问我,适配的问题。
156 155
156 我们知道 `1rem` 等于`html` 根元素设定的 `font-size``px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 看到 (`1rem 等于 37.5px`):
157
158 ```html
159 <html data-dpr="1" style="font-size: 37.5px;"></html>
160 ```
161 切换不同的机型,根元素可能会有不同的`font-size`。当你写css px 样式时,会被程序换算成 `rem` 达到适配。
162
163
164 因为我们用了Vant的组件,需要按照 `rootValue: 37.5` 来写样式。
165
157 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。 166 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。
158 167
159 -`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑 168 -`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑
160 满。 169 满。
161 -`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 170 -`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
162 171
163 本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图,去做对应的设置了。 172 也就是iphone 6 下 375px宽度写CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。
164 173
165 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。 174 当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。
166 175
...@@ -317,6 +326,101 @@ export default createRouter() ...@@ -317,6 +326,101 @@ export default createRouter()
317 326
318 [▲ 回顶部](#top) 327 [▲ 回顶部](#top)
319 328
329 ### <span id="axios">✅ Axios 封装及接口管理</span>
330
331 `utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。
332
333 - `service.interceptors.request.use` 里可以设置请求头,比如设置 `token`
334 - `config.hideloading` 是在 api 文件夹下的接口参数里设置,下文会讲
335 - `service.interceptors.response.use` 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录
336
337 ```javascript
338 import axios from 'axios'
339 import store from '@/store'
340 import {Toast} from 'vant'
341 // 根据环境不同引入不同api地址
342 import {baseApi} from '@/config'
343 // create an axios instance
344 const service = axios.create({
345 baseURL: baseApi, // url = base api url + request url
346 withCredentials: true, // send cookies when cross-domain requests
347 timeout: 5000 // request timeout
348 })
349
350 // request 拦截器 request interceptor
351 service.interceptors.request.use(
352 config => {
353 // 不传递默认开启loading
354 if (!config.hideloading) {
355 // loading
356 Toast.loading({
357 forbidClick: true
358 })
359 }
360 if (store.getters.token) {
361 config.headers['X-Token'] = ''
362 }
363 return config
364 },
365 error => {
366 // do something with request error
367 console.log(error) // for debug
368 return Promise.reject(error)
369 }
370 )
371 // respone拦截器
372 service.interceptors.response.use(
373 response => {
374 Toast.clear()
375 const res = response.data
376 if (res.status && res.status !== 200) {
377 // 登录超时,重新登录
378 if (res.status === 401) {
379 store.dispatch('FedLogOut').then(() => {
380 location.reload()
381 })
382 }
383 return Promise.reject(res || 'error')
384 } else {
385 return Promise.resolve(res)
386 }
387 },
388 error => {
389 Toast.clear()
390 console.log('err' + error) // for debug
391 return Promise.reject(error)
392 }
393 )
394 export default service
395 ```
396
397 `src/api` 文件夹下统一管理接口
398
399 - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
400 - `url` 接口地址,请求的时候会拼接上 `config` 下的 `baseApi`
401 - `method` 请求方法
402 - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
403 - `hideloading` 默认 `false`,设置为 `true` 后,不显示loading ui 交互中有些接口不需要样用户感知
404
405 ```javascript
406 import qs from 'qs'
407 // axios
408 import request from '@/utils/request'
409 //user api
410
411 // 登录
412 export function login(params) {
413 return request({
414 url: '/user/login', // 接口地址
415 method: 'post', // method
416 data: qs.stringify(params)
417 // hideloading: true
418 })
419 }
420 ```
421
422 [▲ 回顶部](#top)
423
320 ### <span id="base">✅ vue.config.js 基础配置 </span> 424 ### <span id="base">✅ vue.config.js 基础配置 </span>
321 425
322 如果你的 `Vue Router` 模式是 hash 426 如果你的 `Vue Router` 模式是 hash
...@@ -358,6 +462,10 @@ module.exports = { ...@@ -358,6 +462,10 @@ module.exports = {
358 462
359 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> 463 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
360 464
465 如果你的项目需要跨域设置,你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数
466
467 **注意**:你还需要将 `src/config/env.development.js` 里的 `baseApi` 设置成 '/'
468
361 ```javascript 469 ```javascript
362 module.exports = { 470 module.exports = {
363 devServer: { 471 devServer: {
...@@ -366,7 +474,7 @@ module.exports = { ...@@ -366,7 +474,7 @@ module.exports = {
366 //配置跨域 474 //配置跨域
367 '/api': { 475 '/api': {
368 target: 'https://test.xxx.com', // 接口的域名 476 target: 'https://test.xxx.com', // 接口的域名
369 ws: true, // 是否启用websockets 477 // ws: true, // 是否启用websockets
370 changOrigin: true, // 开启代理,在本地创建一个虚拟服务端 478 changOrigin: true, // 开启代理,在本地创建一个虚拟服务端
371 pathRewrite: { 479 pathRewrite: {
372 '^/api': '/' 480 '^/api': '/'
...@@ -377,32 +485,24 @@ module.exports = { ...@@ -377,32 +485,24 @@ module.exports = {
377 } 485 }
378 ``` 486 ```
379 487
380 使用 488 使用 例如: `src/api/home.js`
381 489
382 ```javascript 490 ```javascript
383 <script> 491
384 import axios from "axios" 492 export function getUserInfo(params) {
385 export default { 493 return request({
386 mounted() { 494 url: '/api/userinfo',
387 axios.get("/api/1").then(res => { 495 method: 'get',
388 }); 496 data: qs.stringify(params)
389 } 497 })
390 }; 498 }
391 </script> 499
392 ``` 500 ```
393 501
394 [▲ 回顶部](#top) 502 [▲ 回顶部](#top)
395 503
396 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> 504 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
397 505
398 ```javascript
399 publicPath: './', // 署应用包时的基本 URL router hash 模式使用
400 // publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境,不然build会报错
401 outputDir: 'dist', // 生产环境构建文件的目录
402 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
403 lintOnSave: false,
404 productionSourceMap: !IS_PROD, // 生产环境的 source map
405 ```
406 506
407 [▲ 回顶部](#top) 507 [▲ 回顶部](#top)
408 508
......
1 // import qs from 'qs'
2 // axios
3 // import request from '@/utils/request'
4 //home api
5
6
...\ No newline at end of file ...\ No newline at end of file
1 import qs from 'qs' 1 import qs from 'qs'
2 // axios
2 import request from '@/utils/request' 3 import request from '@/utils/request'
3 // api 4 //user api
4 5
5 // 登录 6 // 登录
6 export function login(params) { 7 export function login(params) {
7 return request({ 8 return request({
8 url: '/user/login', 9 url: '/user/login',
9 method: 'post', 10 method: 'post',
10 data: qs.stringify(params) 11 data: qs.stringify(params),
12 // hideloading: true
11 }) 13 })
12 } 14 }
13 // 用户信息 15 // 用户信息
......
...@@ -48,12 +48,12 @@ module.exports = { ...@@ -48,12 +48,12 @@ module.exports = {
48 // 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层 48 // 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
49 warnings: false, 49 warnings: false,
50 errors: true 50 errors: true
51 } 51 },
52 // proxy: { 52 // proxy: {
53 // //配置跨域 53 // //配置跨域
54 // '/api': { 54 // '/api': {
55 // target: "https://test.xxx.com", 55 // target: "https://test.xxx.com",
56 // ws:true, 56 // // ws:true,
57 // changOrigin:true, 57 // changOrigin:true,
58 // pathRewrite:{ 58 // pathRewrite:{
59 // '^/api':'/' 59 // '^/api':'/'
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!