江苏龙网

  1. 主页 > 生活百科 > >

开箱即用 vue全家桶+vant移动端解决方案( 三 )

vue全家桶+vant

在 main.js 中引用全局样式（发现在上面的，prependData 里设置@import "assets/css/index.scss";并没有应用全局样式这里在 main.js 引入）
设置 js 中可以访问 $cdn,.vue 文件中使用this.$cdn访问
// 引入全局样式import '@/assets/css/index.scss'// 设置 js中可以访问 $cdn// 引入cdnimport {$cdn} from '@/config'Vue.prototype.$cdn = $cdn在 css 和 js 使用
<script>  console.log(this.$cdn)</script><style lang="scss" scoped>  .logo {    width: 120px;    height: 120px;    background: url($cdn+'/weapp/logo.png') center / contain no-repeat;  }</style>? Vuex 状态管理目录结构
├── store│   ├── modules│   │   └── app.js│   ├── index.js│   ├── getters.jsmain.js 引入
import Vue from 'vue'import App from './App.vue'import store from './store'new Vue({  el: '#app',  router,  store,  render: h => h(App)})使用
<script>  import {mapGetters} from 'vuex'  export default {    computed: {      ...mapGetters(['userName'])    },    methods: {      // Action 通过 store.dispatch 方法触发      doDispatch() {        this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')      }    }  }</script>? Vue-router本案例采用 hash 模式，开发者根据需求修改 mode base
注意：如果你使用了 history 模式，vue.config.js 中的 publicPath 要做对应的修改
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export const router = [  {    path: '/',    name: 'index',    component: () => import('@/views/home/index'), // 路由懒加载    meta: {      title: '首页', // 页面标题      keepAlive: false // keep-alive 标识    }  }]const createRouter = () =>  new Router({    // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath    // base: '/app/',    scrollBehavior: () => ({y: 0}),    routes: router  })export default createRouter()更多:Vue Router
? Axios 封装及接口管理utils/request.js 封装 axios ,开发者需要根据后台接口做修改 。

  • service.interceptors.request.use 里可以设置请求头，比如设置 token
  • config.hideloading 是在 api 文件夹下的接口参数里设置，下文会讲
  • service.interceptors.response.use 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
import axios from 'axios'import store from '@/store'import {Toast} from 'vant'// 根据环境不同引入不同api地址import {baseApi} from '@/config'// create an axios instanceconst 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 interceptorservice.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


推荐阅读


上一篇：细思极恐的诡异经历 诡异的事情发生了

下一篇：标贝科技入选“2020人工智能语义识别创新排行”