创新实训（九）整合

使用Vue.js作为前端框架，代替Django本身自带的模板引擎，Django则作为服务端提供API接口，从而实现前后端分离。

新建前端项目

1. 有关Vue的模块(包括vue)可以使用node自带的npm包管理器安装。推荐使用淘宝的 cnpm 命令行工具代替默认的 npm。

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

2. 用cnpm安装vue-cli脚手架工具

cnpm install -g vue-cli

3. 项目根目录下，新建一个前端工程目录

vue-init webpack frontend

4. 安装 vue 依赖模块

cd frontend
cnpm install
cnpm install  vue-resource
cnpm install element-ui

5. npm run build
6. settings.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

urls.py

url(r'^$', TemplateView.as_view(template_name="index.html")),

7. Django集成了Vue前端工程