08. 前台与后端交互及其他配置
一、axios前后端交互
1.安装 axios 模块
cnpm install -S axios
cnpm install --save axios
2.为项目配置全局 axios
import axios from 'axios'
Vue.prototype.$axios = axios
methods:{
handle(){
this.$axios.get('/ajax/moreClassicList?').then(res =>{
console.log(res.data)
})
}
}
3.局部配置使用
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.使用
四. 拓展:vue中使用jquery、bootstrap页面组件框架 (一般不用)
1.安装jquery、bootstrap
cnpm install jquery
cnpm 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'