vue相关

最新推荐文章于 2026-01-07 00:05:42 发布

转载最新推荐文章于 2026-01-07 00:05:42 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wzit/blog/2991769

文章标签：

#javascript #webpack #ViewUI

1.项目里安装vux
  npm install vux --save
  2.安装vux-loader（vux2必须结合vux-loader使用，本文也只是介绍vux2的配置）
  npm install vux-loader --save-dev
  3.安装less-loader
  npm install less less-loader --save-dev
  安装完成记得在webpack.base.conf.js里做如下配置，在extensions里加入less

resolve: {
    extensions: ['.js', '.vue', '.json', 'less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

  4.安装yaml-loader
  npm install yaml-loader --save-dev
  最后一步在build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig，整个文件如下：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vuxLoader = require('vux-loader')
const vueLoaderConfig = require('./vue-loader.conf')
 
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
 
const webpackConfig  = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', 'less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}
 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

main.js 全局注册 toast / alert / loading

// 全局引入 loading/toast/alert

import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'

Vue.use(LoadingPlugin)

Vue.use(ToastPlugin)

Vue.use(AlertPlugin)

5.调用

// 显示等待框

this.$vux.loading.show({

  text: '加载中...'

});



// 隐藏等待框

setTimeout(() => {

  this.$vux.loading.hide()

}, 300);

// 提示信息

this.$vux.toast.show({

  type: 'text',

  position: 'middle',

  text: '请输入查询内容!'

});

vue axios配置发起请求加载loading请求结束关闭loading

import axios from 'axios'
import Vue from 'vue'
 
// 超时时间
axios.defaults.timeout = 15000;
// axios.defaults.withCredentials=true;
// http请求拦截器
axios.interceptors.request.use(config => {
  Vue.$vux.loading.show({
    text: 'Loading'
  })
  return config
}, error => {
  setTimeout(() => {
     Vue.$vux.loading.hide();
     Vue.$vux.toast.text('加载超时', 'middle')
  },3000)
  return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
  Vue.$vux.loading.hide()
  return data
}, error => {
  setTimeout(() => {
    Vue.$vux.loading.hide()
    Vue.$vux.toast.text('请求失败', 'middle')
  },1000)
  return Promise.reject(error)
})
export default axios;

https://www.cnblogs.com/leiting/p/9208552.html

转载于:https://my.oschina.net/wzit/blog/2991769