六、Django整合Vue（Mac环境搭建）

目录

1.安装vue

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

3.进入vue项目，安装依赖

4.运行调试服务

5.vue项目打包，生成dist文件夹

5.修改Django中setting文件“DIRS”路径

6.配置 Django 静态文件搜索路径

---

1.安装vue

• 首先安装node.js，下载.pkg文件一路安装即可，官网地址：下载 | Node.js
• 使用npm淘宝镜像，避免npm下载速度过慢的问题 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
• 下载vue-cli sudo npm install -g @vue/cli

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

• 进入Django项目目录
• vue init webpack firstvue  # firstvue为项目名称，运行后会有一系列提示，根据提示操作即可

　Vue build ==> 打包方式，回车即可；

　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

    Should we run `npm install` for you after the project has been created? ==>自动运行npm install，选择第三项，不运行，自己执行命令

3.进入vue项目，安装依赖

cnpm install --save vue-hot-reload-api

cnpm install

4.运行调试服务

cnpm run dev

点击对应的网址即可进入vue首页

5.vue项目打包，生成dist文件夹

cnpm run build

5.修改Django中setting文件“DIRS”路径

6.配置 Django 静态文件搜索路径

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ["firstvue/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, "firstvue/dist/static")]  # 添加静态文件路径

 7.启动Django服务，进入对应的index页面，显示vue项目下的index页面