在開始專案之前，假設你已瞭解以下知識：webpack配置、vue.js、django。這裡不會教你webpack的基本配置、熱更新是什麼，也不會告訴你如何開始一個django專案，有需求的請百度，相關的文章已經很多了。

 下面開始一步一步構建完整的專案：

1、開發環境準備

win7 x64

python 3.4

Django 1.10.8

node.js 4.4.3

2、python相關包安裝

建議建立python虛擬環境進行安裝。

pip install virtualenvpip install virtualenvwrapperpip install virtualenvwrapper-win　　# Windows使用該命令

mkvirtualenv venv # 建立venv虛擬環境

推薦python相關的模組（包括Django）都使用python自帶的pip安裝器安裝。

注意：

celery建議選擇celery3.x版本進行安裝，結合django-celery模組。因為celery4.x版本的django-celery-beat在djang-admin後臺新增task後系統不會對修改後的任務即時生效，而是需要重啟celery-beat服務才能生效。我這個專案選擇的celery 3.1.18+django-celery 3.2.2+redis 2.10.6。

3、建立工程

建立django後端專案

django-admin startproject myprojectpython manage.py startapp app

python manage.py runserver 0.0.0.0:8000

修改settings.py檔案

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'DIRS': [os.path.join(BASE_DIR, 'dist'),os.path.join(BASE_DIR, 'myproject/templates')],
        
 
'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',
            ],
        },
    },
]

os.path.join(BASE_DIR, 'dist')資料夾存放前端npm run build編譯後的單頁面檔案

建立vue.js前端專案

利用vue-cli腳手架工具建立前端vue.js專案

dist資料夾為編譯後的前端程式碼，編譯成功後直接拷貝到django專案的os.path.join(BASE_DIR, 'dist')位置替換即可。

注意：

如果django後端和vue.js前端專案不在同一個域內，那麼我們請求的資料相當於是呼叫的第三方介面，那麼會存在一個問題：跨域限制。

為解決跨域問題，我們可以在webpack設定代理解決跨域問題，當然解決跨域問題的方法很多，不懂的請自行百度。

在config/index.js檔案的dev: {   proxyTable: { }}寫入要跨域代理的連結地址：

proxyTable: {
  '/app/**': {
    target: 'http://localhost:8000',
    secure: false,
    changeOrigin: true
  }
}

這裡本專案django與前端在同一臺開發伺服器上，django啟動服務埠為8000，所以上面target的配置為 http://localhost:8000。