vue真分离！element引入和django跨域

先安装脚手架

npm install -g @vue/cli 

然后查看版本

vue -V

没有异常就直接创建项目

vue create vue-cli-webdj 

选参数，创建的时候用2.X的版本，高的语法还没看，
创建完先打开看看，熟悉的页面就ok，
然后安装element，

npm i element-ui -S 

在main.js下添加

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

可以查看一下是否有效果，
也可以用 vue add element，然后见机行事= =，
然后切换到router文件下，
编辑index.js文件，查看路由的写法，2种可以分别照形式写两个样本，
注意views下建的vue要增加些东西，对照着初始的样例不难看出区别，

在app.vuel里添加路由按键和路由显示的地方，

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/fun1">Fun1</router-link> |
      <router-link to="/fun2">Fun2</router-link> |
      <router-link to="/fun3">Fun3</router-link> |
    </div>
    <router-view />
  </div>
</template>

如图，其他为style，
然后路由以后没问题的话，就在views里添加vue，测试一下axios是否能拿到数据并显示，
先在django启动，浏览器查看接口是否能正常返回数据，
然后axios直接发送请求会发生跨域问题，在django后端解决，
pip install django-cors-headers
然后添加setting.py

INSTALLED_APPS = [

    ...

    'corsheaders'，

    ...

 ]

还有额外新增配置

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = ()
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

就能正常运行了，django里的
{% verbatim %}{% endverbatim %}
就用不着了