vue項目安裝插件配置

目錄

• vue安裝ajax插件：axios
• CORS跨域問題（同源策略）
• Vue配置ElementUI
• Vue配置jQuery + bootstrap

vue安裝ajax插件：axios

• 安裝插件 在項目目錄下安裝

  cnpm install axios
  

• 在main.js中配置

  import axios from 'axios'
  Vue.prototype.$axios = axios
  

• 在一個組件的邏輯中發送ajax請求

  // 完成ajax請求后台，獲取數據庫中的數據
  this.$axios({
  	url: this.$settings.base_url + '/cars/',
  	method: 'post',
  	params: {  // url拼接參數：任何請求都可以攜帶
  		a:1,
  		b:2,
  		c:3
  	},
  	data: {   // 數據包參數：get請求是無法攜帶的
  		x: 10,
  		y: 20
  	}
  }).then(response => {
  	// console.log(response);
  	this.cars = response.data;
  }).catch(error => {
  	console.log(error);
  })
  

CORS跨域問題（同源策略）

同源：http協議相同、服務器ip地址相同、app應用端口相同

跨域：協議、ip地址、應用端口有一個不同，就是跨域

django默認是同源策略，存在跨域問題。

解決方案：

• django安裝cors模塊：

  pip install django-cors-headers
  

• 在settings文件中注冊模塊，配置中間件：

  INSTALLED_APPS = [
      ....
      'corsheaders'
  ]
  
  MIDDLEWARE = [
      ....
      'corsheaders.middleware.CorsMiddleware'
  ]
  

• 在settings開啟允許跨域：

  CORS_ORIGIN_ALLOW_ALL = True
  

Vue配置ElementUI

• 安裝插件（在項目目錄下）

  cnpm install element-ui
  

• 在main.js中配置：

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

• 使用：看官方文檔 復制粘貼

Vue配置jQuery + bootstrap

• 先安裝jQuery

  cnpm install jquery
  

• 在vue項目中配置jQuery，在vue.config.js文件中配置

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

• 安裝bootstrap插件

  cnpm install bootstrap@3
  

• 在vue項目中配置 bootstrap，在main.js 中配置

  import "bootstrap"
  import "bootstrap/dist/css/bootstrap.css"