1.安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.下载vue-cli

cnpm install -g vue-cli
cnpm install -g webpack

3.在django项目中创建vue项目

vue-init webpack frontend

vue项目编写完成后,使用打包命令

cd frontend
cnpm run build

修改django的setting文件

TEMPLATES = [   
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        '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',
            ],
        },
    },
]
 
 
STATICFILES_DIRS = [             ## 添加静态文件路径
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

修改django主urls文件

    from django.contrib import admin
    from django.views.generic.base import TemplateView
    from django.urls import path,include
     
    urlpatterns = [
        path('admin/', admin.site.urls),
        path(r'', TemplateView.as_view(template_name="index.html")),    ## 这里将url的根路径指向vue中的index页面
    ]

然后开启django,打开首页就能看到vue了