vue2安装常见组件、配置、使用

一、网络请求【axios】

1、安装：

npm install [email protected]  -save

2、全局注册main.js中

//导入axios
import axios from "axios";
// 配置请求后端路径=IP:端口号/api
axios.defaults.url='http://127.0.0.1:8888/';
// 将 axios 设置为 Vue 的原型属性，这样在组件中就可以通过 this.$http 访问 axios
Vue.prototype.$http = axios;

或者

创建baseAxios.js

import axios from "axios";

// 设置新的axios标准
const baseAxios=axios.create({
  baseURL:"http://localhost:8080",
  timeout:50000,
  timeoutErrorMessage:"请求已超时"
});

//让请求携带上浏览器的cookie
//baseAxios.defaults.withCredentials=true;

// 默认出口axios
export default baseAxios

main.js中

//导入axios
import axios from "./util/baseAxios";
// 将 axios 设置为 Vue 的原型属性，这样在组件中就可以通过 this.$http 访问 axios
Vue.prototype.$http = axios;

3、组件中使用

this.$http.post("/resource/search",{
      "searchInput":"唐",
      "type":1,
      "page":1,
      "pageSize":2
    }
    )
      .then(res=>{
        //响应的数据
        alert(res.data)
        console.log("后端返回的数据======")
        console.log(res.data)
      })
      .catch()

4、vueX中使用

  // 修改数据,异步操作
  actions: {
    // 模拟向springboot后端发送请求
    async fetchPage({ state, commit }) {
      try {
        const response = await axios.post('/resource/search', {
            "searchInput":state.searchInput.text,
            "type":state.searchInput.type,
          }
        )
// 设置返回的数据
        commit('setResItems', response.data.data);
      } catch (error) {
        console.error('分页请求失败:', error);
      }
    },

　　// 模拟定时执行某个方法
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    },
  },
  // 插件，监听哪些方法被调用了，就向后端发送请求
  plugins: [
    store => {
      store.subscribe((mutation, state) => {
        // 输入内容
        if (mutation.type === 'updateSearchInput') {
          store.dispatch('fetchPage');
        }
      });
    }
  ],

 二、饿了么美化页面【element-ui】

1、安装

npm i element-ui -S

2、全局注册main.js中

// 引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3、组件中使用

三、状态集中管理【VueX】

1、安装

npm install --save [email protected]

2、注册、使用

四、视频【vue-aplayer、Dplayer】

　　参考1：vue2.x使用音频插件vue-aplayer - 向大海 - 博客园 (cnblogs.com)

　　参考2：vue 2.x使用视频插件DPlayer - 向大海 - 博客园 (cnblogs.com)

五、图片预览【v-viewer】

官网地址：https://v-viewer.mirari.cc/

1、安装

npm install [email protected]

2、全局注册main.js中

//导入 图片预览
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    'zIndex': 9999,
    'inline': true, //启用lnline模式
    'button': true, //显示右上角关闭按钮
    'navbar': true, //显示缩略图导航
    'title': true, //显示当前图片的标题
    'toolbar': true, //显示工具栏
    'tooltip': true, //显示缩放百分比
    'movable': true, //显示可移动
    'zoomable': true, //图片是否可缩放
    'rotatable': true, //图片是否可旋转
    'scalable': true, //图片是否可翻转
    'transition': true, //使用css3过度
    'fullscreen': true, //播放时是否全屏
    'keyboard': true, //是否支持键盘
    'url': 'data-source' //设置大图片的url
  }
})

3、组件中使用

<div>
    <viewer :images="photo">
  　　<img
    　　v-for="(src, index) in photo"
    　　:src="src"
    　　:key="index"
    　　:onerror="errorImg"
  　　/>
　　</viewer>
</div>