辉太郎看前端(移动端独立开发项目前期配置)

前言

移动端我们要用到多环境开发，axios,vant,rem。

配置项目

• 配置多环境变量

1. 在package.json里的scripts中配置serve,stage,build,通过--mode xxx来执行不同环境。

• 通过npm run serve 来启动本地。
• 通过 npm run stage 来打包测试。
• 通过npm run build 来打包生产

"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}

2. 在根目录新建三个文件

注：以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。

• 新建.env.development用于配置本地开发

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

• 新建.env.staging用于测试环境的配置。

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

• 新建.env.production正式环境配置。

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

3. 在src目录下新建config文件夹，统一管理baseUrl。

• src/config/index.js用于动态切换baseUrl。

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

• src/config/development.js本地环境的配置。

// 本地环境配置
module.exports = {
 title: 'vue-h5-template',
 baseUrl: 'http://localhost:9018', // 项目地址
 baseApi: 'https://test.xxx.com/api', // 本地api请求地址
 APPID: 'xxx',
 APPSECRET: 'xxx'
}

注：一下两个和上边的配置差不多，就不一一写了，对应环境，配置对应接口即可。

• src/config/staging.js测试环境的配置。
• src/config/production.js生产环境的配置。

4. 在axios拦截器中导入我们配置的环境

import { baseApi } from '@/config/index'

• 下载axios

1. 下载插件

npm install axios -S

2. 新建http文件夹里边新建三个js文件

• http/index.js用于封装acios

import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
// 根据环境不同引入不同api地址
import { baseApi } from '@/config/index.js'
// 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

• http/api.js用于封装接口

export default {
 "接口类名":"接口名称"
}

• http/request.js 用于分装请求

import api from '@/http/api.js'
import $http from './http/index.js'
import qs from 'qs'

function 函数名称(params){
return $http({
        url: 'api.接口类名',
        method: '请求方式',
        data: qs.stringify(params),
    })
}
export default {
 函数名称
}

3. 在main.js中导入

import axios from './http/resquest.js'
Vue.prototype.$http = axios

4. 组件中调用

this.$http. {api.js中导出的函数名称} .then(res=>{
console.log(res)
})

• 配置vant

1. 下载

npm install vant -S

2. 导入

• 全局引入
  在main.js中导入

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

• 局部引入

1. 下载管理按需引入的插件

npm i babel-plugin-import -D

2. 在babel.config.js中配置

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]
module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
  plugins
}

3. 组件的使用(新建src/vant/vant.js)

// 按需全局引入 vant组件
import Vue from 'vue'
import { Button, List, Cell, Tabbar, TabbarItem } from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)

• 使用rem布局

一般情况我只会在assets中新建一个js文件，然后导入到main.js中

1. js内容配置

function rem(){
	document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+"px"
}
rem();
window.onresize=rem;

2. 导入到main.js中

import '@/assets/rem.js'

3. 在public中的index.html中设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

总结

初出茅庐，请多多指教哦！😀