本文共 1682 字，大约阅读时间需要 5 分钟。

08. 前台与后端交互及其他配置

一、axios前后端交互

1.安装 axios 模块

cnpm install -S axios  # -S 选项会将该模块加到package.json中去cnpm install --save axios

2.为项目配置全局 axios

• 配置：main.js

import axios from 'axios'  // 导入安装的模块不用加相对路径Vue.prototype.$axios = axios// 向Vue的原型中放一个属性(key)为$axios，值为：axios// 注意 $axios 是你自己取的名字还可以叫xxxx,尽量不要重复

• 使用

// 加入到Vue原型中以后之需要通过 this 就可以拿到axios发送请求了methods:{       handle(){         // 发送请求获取数据      this.$axios.get('/ajax/moreClassicList?').then(res =>{           console.log(res.data)       })    }  }

3.局部配置使用

• 在某个组件中直接导入 axios

// 名字自己取$axios或者xxxx,不要重名import $axios from 'axios'

• 然后直接使用你定义的名字来发送请求

methods:{       handle(){         // 发送请求获取数据      $axios.get('/ajax/moreClassicList?',{   }).then(res =>{           console.log(res.data)       })    }  }

二、cookies操作

1.安装Vue-cookies

cnpm install vue-cookies

2.配置：main.js

import cookies from 'vue-cookies'Vue.prototype.$cookies = cookies;

三、使用element-ui页面组件框架

1.安装element-ui

cnpm install element-ui

2.配置:main.js

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

3.使用

• 在官方文档找到好看的组件，直接把html，css，js拷入自己项目即可
• 官网地址：

四. 拓展：vue中使用jquery、bootstrap页面组件框架 (一般不用)

1.安装jquery、bootstrap

cnpm install jquerycnpm install bootstrap@3

2.配置jquery：vue.config.js

const webpack = require("webpack");module.exports = {       configureWebpack: {           plugins: [            new webpack.ProvidePlugin({                   $: "jquery",                jQuery: "jquery",                "window.jQuery": "jquery",                "window.$": "jquery",                Popper: ["popper.js", "default"]            })        ]    }};

3. 配置bootstrap：main.js

import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'