前端学习之Vue项目配置

目录

• 一、配置CSS、JS文件
• 二、配置element-ui插件
• 三、配置jQuery和BootStrap
• 四、配置axios完成ajax请求
• 五、配置cookie操作插件

一、配置CSS、JS文件

• 配置全局CSS文件

'''main.js'''

// 配置全局css样式
// import '@/assets/css/global.css'
require('@/assets/css/global.css'); // 直接导入css文件就可以在全局中应用了

• 配置全局JS文件

'''settings.js'''
export default {
    base_url: 'http://localhost:8000',
}


'''main.js'''
// 配置全局settings.js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

二、配置element-ui插件

• 安装：cnpm install element-ui
• 配置环境：在main.js中配置

'''main.js'''

// 配置element-ui插件
// 1、安装：cnpm install element-ui
// 2、配置环境
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // VUE加载这个环境

三、配置jQuery和BootStrap

• 安装jQuery和BootStrap： cnpm install jquery && cnpm install bootstrap@3
• 配置环境：jq在根目录下的vue.config.js中配置，没有就去自己创建

// 修改该文件内容后，只有重启，才能同步配置
const webpack = require("webpack");

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

• 配置环境：bs在main.js中配置

'''main.js'''

// 配置jq+bs环境
// 1、安装：cnpm install jquery && cnpm install bootstrap@3
// 2、配置环境：jq在vue.config.js中配置
import "bootstrap"  // 加载bs的逻辑
import "bootstrap/dist/css/bootstrap.css"

• 通过Jquery的ajax来发送ajax请求

$.ajax({
    url: this.$settings.base_url + '/car/',
    type: 'get',
    success(data) {
        // console.log(this);  // 这个是jquery的this
        // console.log(_this); // 这个才是Vue的

        _this.cars_data = data; // 使用Jquery的ajax，他会帮你直接把数据处理好
        console.log(_this.cars_data)
    }
});

四、配置axios完成ajax请求

• 安装：cnpm install axios
• 配置环境：在main.js中配置

// 配置axios来完成前后台ajax请求
// 1、安装：cnpm install axios
// 2、配置环境
import Axios from 'axios'
Vue.prototype.$ajax = Axios;	// 添加$ajax到Vue对象的属性中
// Vue.prototype.$axios = Axios;

• 通过axios来发送ajax请求

// vue有专门用来完成ajax请求的插件：axios
let _this = this
this.$ajax({
    url: this.$settings.base_url + '/cars/',
    method: 'get',
    params: {
        // 这里发送的是 url拼接的数据
    },
    data: {
        // post请求携带的数据报数据
    }
}).then((response) => {		// 注意，这个response是发过来的一个大字典，里面是HTTP响应的各种信息。
    console.log(response);
    this.cars_data = response.data;	// 数据都在data中
}).catch(error => {
    console.log(error)
})

注意：（重点）

前端通过axios发到django后台服务器的端口上会出一个错误。跨域请求错误。

原因就是django默认是一个前后端不分离的web框架，它默认只接收django前台发来的请求。不同的主机端口发来的请求就会出现这个问题。

如何解决，需要 django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)

详细请看 Django框架之前后台分离跨域交互

五、配置cookie操作插件

• 安装：cnpm install vue-cookies
• 配置环境：在main.js中配置

// 配置cookie操作插件
// 1、安装：cnpm install vue-cookies
// 2、配置环境
import Cookies from 'vue-cookies'
Vue.prototype.$cookies = Cookies;

// 持久化存储val的值到cookie中
this.$cookie.set('val', this.val)
// 获取cookie中val字段值
this.$cookie.get('val')