Django+Vue搭建项目开发环境

开发环境

为了方便大家开发，这里建议统一开发环境。

• IDE：Pycharm 2018.1.4
• Python 3.6.5
• Django 2.0.7
• 版本控制：git
• nodejs v8.11.3
• vue.js

 

统一编码：UTF-8，换行符：\n

 

编码配置

Settings——>Editor——>File Encodings

换行符配置

Settings——>Editor——>Code Style——>Line separator

 

工具安装这里就不多说了，关于前端环境的配置这里补充一下。

下载安装好nodejs后，再安装vue

vue环境配置

安装cnpm

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

安装vue

cnpm install -g vue-cli

 

创建项目

首先通过Pycharm创建Django项目，点击左上角菜单栏File—>Django—>New environment using Virtualenv，如下图

 

注意项目的路径和应用名不要起一些特殊的名字，比如：test，这样会跟python内置模块起冲突

创建完项目后，目录结构如下：

创建前端应用

点开IDE下方菜单栏的Terminal，然后执行：

vue-init webpack frontend

在创建时，会弹出很多选择项，根据实际情况填写即可。

安装依赖模块

继续在Terminal中执行

cd frontend cnpm install

 

前端打包

编写完前端代码后，在Terminal中执行

cnpm run build

 

前后端集成配置

修改settings.py文件，指定前端资源文件

 

修改路由urls.py文件

这就配置完了，最后启动项目可以看下效果

 

启动项目

访问主页

浏览器访问：http://127.0.0.1:8000/#/

出现以下页面就表示已经配置成功了。

 

版本控制

依赖管理

生成项目依赖文件，类似maven的pom.xml

在项目根目录下执行：

pip freeze > requirements.txt

 

根据依赖文件下载依赖库：

pip install -r requirements.txt

 

使用事项

将requirements.txt提交到git仓库

更新依赖时，都需要重新生成该文件

大家使用本地的virtualenv环境，通过requirements.txt更新依赖。