Innovation training (IX) integration

Use Vue.js As a front-end framework , Instead of Django Its own template engine ,Django As a server API Interface , So as to realize the separation of front and rear ends .

Create a new front-end project

1. of Vue Module ( Include vue) have access to node Self contained npm Package manager installation . It is recommended to use Taobao cnpm The command line tool replaces the default npm.

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

2. use cnpm install vue-cli Scaffold tools

cnpm install -g vue-cli

3. Project root directory , Create a new front-end project directory

vue-init webpack frontend

4. install vue Rely on the module

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 Integrated Vue The front-end engineering