1、vue项目配置全局css文件:在main.js中用import导入或是require()加载 .css 文件
assets/css/global.css
import '@/assets/css/global.css' | require('@/assets/css/global.css')
2、vue项目配置全局js文件:在main.js中用import导入 .js 文件,并将其设置给 Vue 原型
settings.js => export default {base_url='http://127.0.0.1:8000'}
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings => this.$settings.base_url
3、vuex提供的store仓库存储,可以完成组件间的传参(了解)
store/index.js => state: {num: 0}
this.$store.state.num
4、vue项目配置axios可以完成前后台交互:this.$axios({}).then(response=>{}).catch(error=>{})
import axios from 'axios'
Vue.prototype.$axios = axios
this.$axios({
url: '后台接口',
method: 'get|post',
params: {},
data: {},
headers: {},
}).then(response=>{
response.data
}).catch(error=>{
error.response.data
})
5、django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)
注册corsheaders => 添加中间件 => 允许跨越
6、前台两种提交数据的方式:url拼接参数,数据包参数
7、前后台分离,后台登录通过的token会返回给前台,前台自己处理存储在cookie中:vue-cookies插件操作cookie
token = response.data.token
this.$cookies.set(k, v, exp);
this.$cookies.get(k);
this.$cookies.remove(k);
8、全局应用配置element-ui、bootstrap
import ElementUi from 'element-ui'
Vue.use(ElementUi)