Django和vue打通

配置vue环境：

1.先下载nodejs

brew install node

2.安装vue-cli：

npm install -g @vue/cli (可以用cnpm)

3.用vue创建前端项目：

vue create 项目名
创建项目选项(
    1.选第三个：自定义
    2.用空格取消掉linter ，然后选择router、CSS-processors,回车下一步
    3.选择3.x
    4.输入n
    5.选第一个Sass/SCSS
    4.选第二个：package.json
    5.输入n
)

4.试运行：

npm run serve

Django适配vue：

1.在vue项目目录下新建vue.config.js文件：

vue.config.js中写入：
    module.exports = {
    assetsDir: 'static'
}

增加并写入文件后，打包vue项目：
npm run build

如果django的DEBUG开关为false（为true就不用管），则每次vue项目build后，需要在django项目下输入下面这句将静态资源文件迁移到static下，否则会导致django的admin后台样式丢失
python3 manage.py collectstatic

2.urls.py中增加: 

from django.views.generic import TemplateView

#如果settings.py文件中的DEBUG开关关了，就增加下面这两句：
from django.conf import settings
from django.views import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('',TemplateView.as_view(template_name='index.html')),  #增加行
    #如果settings.py文件中的DEBUG开关关了，就增加下面这句：
    re_path(r'^static/(?P<path>.*)$',static.serve,{'document_root':settings.STATIC_ROOT},name='static'), #增加行
]

3.settings.py中修改:

DEBUG = False #修改行

ALLOWED_HOSTS = ['*']  #修改行

INSTALLED_APPS = [
    '你的程序名', # 增加行
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue项目名称/dist'],   #增加行
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


LANGUAGE_CODE = 'zh-hans'   #修改行

TIME_ZONE = 'Asia/Shanghai'  #修改行



在STATIC_URL = 'static/'下方增加：
如果：上面的DEBUG开关关了就用这句：
if DEBUG:
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'vue项目名称/dist/static')]   #增加行
else:
    STATIC_ROOT = Path(BASE_DIR, 'vue项目名称/dist/static')  #增加行

#并且每次前端build后都要执行下面这句（不然访问admin后台资源文件会404）：
python manage.py collectstatic  #收集静态资源

如果：上面的DEBUG开关没关就用这句：
import os #增加行
STATICFILES_DIRS = [os.path.join(BASE_DIR,'vue项目名称/dist/static')]  #增加行

4.处理跨域问题：

4.1.导入新的跨域中间件：

pip3 install django-cors-headers

4.2.settings.py修改:

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',    #增加行
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',   #修改行
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    # 'django.middleware.clickjacking.XFrameOptionsMiddleware',     #修改行
]
CORS_ORIGIN_ALLOW_ALL =True   #增加行
CORS_ALLOW_HEADERS = ('*') #允许所有的请求头  #增加行
CORS_ALLOW_CREDENTIALS = True # 允许cookie  #增加行

安装vue其他工具：

1.安装elementUI :

在vue项目根目录下执行：
vue2项目执行这句：npm i element-ui -S
vue3项目执行这句：npm install element-plus --save

在main.js里导入：
vue2项目用这个:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' 

vue3项目用这个:
import ElementPlus from 'element-plus'
import locale from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/theme-chalk/index.css'

导入后调用：
vue2项目用这个:
Vue.use(ElementUI)

vue3项目用这个:
createApp(App).use(router).use(ElementPlus, {locale}).mount('#app')

2.安装axios：

在v项目根目录下执行: npm install axios --save
在main.js里：
import axios from 'axios'
// axios.defaults.baseURL = 'www.baidu.com'   设置axios请求时，域名默认为baseURL
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL   #设置默认baseURL从环境变量中获取VUE_APP_BASE_URL 的值

项目打包到生产时域名默认值自动切换：

1.vue项目根目录下增加.env.development和.env.production文件：

.env.development中写入： 

NODE_ENV=development
VUE_APP_BASE_URL = 'http://localhost:8000'

.env.production中写入： 

NODE_ENV=production
VUE_APP_BASE_URL = 'http://localhost:8000' #这个之后改成服务器的真实ip地址

 2.vue项目目录/package.json中修改：