VSCode搭建VUE+Django前后端分离环境

准备：安装好Python3环境

一、搭建Django环境

1、//python scripts目录下pip命令安装django：

	pip install django

2、//进入项目要放置的目录，django命令生成项目：

django-admin startproject 项目名称

3、//vscode打开文件夹

4、//vscode 终端命令行启动项目：
（电脑里安装了多个版本python，则检查一下python.py文件中设置的是不是python3解释器）

python3 manage.py runserver 8001

5、//浏览器输入地址访问：

http://localhost:8001

6、//vscode 终端命令行创建app，
（项目名只是一个容器，一个django下可以有很多个应用程序）：

python3 manage.py startapp app名称（如webapp）

7、//settings里添加新生成的app名称

8、//配置路由（因为此时views下还没有login方法，所以报错）

9、//views下新建login方法

10、//启动项目，浏览器输入地址：http://localhost:8001/login
http://localhost:8001（这个地址不再生效）

二、搭建vue脚手架

具体参考vue-cli搭建步骤

1、vue-cli脚手架搭建，创建frontend项目（放在HelloWorld下，和webapp同级）

2、运行frontend项目，进入到frontend目录，命令启动项目：npm run dev

3、浏览器输入:http://localhost:8080

三、Django中配置

1、//HelloWorld>settings.py，添加：

2、//HelloWorld>urls.py，添加：

4、//进入frontend目录，执行命令，生成dist文件：

npm run build

5、//进入HelloWorld目录，执行命令：
（可以和第四步分别在vscode终端输入，系统cmd中输入两个命令）

python3 manage.py runserver 8001

6、//浏览器输入：127.0.0.1:8001/index/，即可看见vue首页