window10下python3利用虚拟环境搭建Django+vue框架

1.安装python虚拟环境包并新建一个环境

1. cmd窗口运行pip install virtualenvwrapper-win （linux下运行 pip install virtualenvwrapper ）
2. 设置新建的虚拟环境所在路径（默认 C:\Users\Administrator\Envs）
   打开环境变量设置变量值为新建虚拟环境放置位置
3. 重新打开一个cmd窗口
   常见命令：
   1. 新建：mkvirtualenv env1
   2. 指定版本新建 mkvirtualenv env1 --python=C:\python\python2
   3. 打开：workon env1
   4. 关闭：deactivate
   5. 删除：rmvirtualenv env1

2.新建一个djvue环境并安装Django库

1. 新建虚拟环境：mkvirtualenv djvue（默认新建后打开了环境）
2. 安装库：pip install django

3. 新建Django项目

1. 转到自己想要创建项目的目录： cd E:\
2. 新建： django-admin startproject djvue
   目录结构

.
├── manage.py
└── djvue
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    ├── wsgi.py
    └── __init__.py

1. 进入根目录 ：cd djvue
2. 新建app： python manage.py startapp backend（新建了一个名字叫backend的app）

4. 使用vue-cli创建一个vuejs项目

3. 新建：vue-init webpack frontend （新建了一个名叫frontend的vuejs项目）
4. 项目大目录：

	.
	├── manage.py（django管理文件）
	├── backend （django app目录）
	├── frontend （vuejs项目目录）
	└── djvue （django 设置目录）

5. 用 webpack 打包Vusjs项目

1.进入vuejs项目目录： cd frontend
5. 安装项目依赖模块：npm install
6. 安装element-ui：npm install element-ui（非必要，看项目需求）
7. 淘宝镜像比较方便：npm install -g cnpm –registry=https://registry.npm.taobao.org（个人比较喜欢使用）
8. npm run build
9. build构建完后目录下出现dist 目录里面有一个index.html和一个文件夹static

6. 修改路由并使用Django的通用视图 TemplateView

1. 修改djvue\djvue\urls.py 文件
2. 引入TemplateView：from django.views.generic import TemplateView
3. 并加入路由，urls.py详细代码如下：

from django.contrib import admin
from django.urls import include, path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',TemplateView.as_view(template_name="index.html")),
    path('api/',include('backend.urls', namespace='api'))
]

7.修改模板设置

1. 修改 settings.py (djvue\settings.py)
2. 找到TEMPLATES配置项，修改后如下：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS': ['frontend/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',
            ],
        },
    },
]

注：dist是运行 npm run build 构建出的index.html与静态文件夹 static 的父级目录

7.设置静态文件路径

1. 还是修改settings.py
2. 找到 STATICFILES_DIRS ，修改如下：

STATIC_URL = '/static/'
# Add for Vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

8.开发环境配置

1. 使用了Django作为后端有个缺点，即使在调试环境下每次修改了前端之后都要重新构建，不构建你的html和static文件还是旧的
   所以我写前端代码是一直都是使用vuejs自己的开发环境实现自动构建即在frontend目录下运行npm run dev
2. 这样又会出现访问跨域问题，解决方法：
3. 在Django层注入header，用Django的第三方包 django-cors-headers 来解决跨域问题
4. 安装：pip install django-cors-headers
   配置：
   1. 修改 settings.py ，MIDDLEWARE 配置（中间件）
      去除了跨域访问阻拦（会出现安全问题，读者自行斟酌使用）
      （下面代码的第四行为新加的）

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',
]

不要随意更改顺序
2. 还要加入一行
CORS_ORIGIN_ALLOW_ALL = True

注：
DEBUG = True # 调试即是否自动编译默认True

ALLOWED_HOSTS = [] # 允许的地址默认localhost

3. 如果vue前端报错，“ …blocked by CORS policy…”
   则要加入

CORS_ALLOW_HEADERS = (
    'X-Token',
)

因为vue采用了X-Token的特殊请求头

9. 至此配置完成 生产环境配置就是整合过程

1. 允许 python manage.py runserver
2. 浏览器上 访问 http://127.0.0.1:8000/ 可看到下图
   

参考文章

Django+Vue 框架踩坑构建【不涉及部署部分】
django 结合 vue项目遇到的坑