Django+Vue.js搭建前後端分離專案 web前後端分離專案實踐

一，正常搭建前後端分離專案流程
1.建立django專案
命令：
django-admin startproject ulb_manager結構：├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py2.進入專案根目錄，建立一個app作為專案後端命令：cd ulb_manager
python manage.py startapp backend結構比上面最基本的，多了一塊backend3.使用vue-cli建立一個vue.js專案作為專案前端命令：vue-init webpack frontend介面：
Project name:（預設Enter鍵）
Project description：（預設Enter鍵）
Auther：（輸入自己的名字，隨意）
...：（預設yes和Enter鍵，暫時不太懂，剛開始接觸，網上也沒查到這一塊東西，就全部選擇預設或者Yes了）結構多了一塊frontend結構總結：
專案根目錄有兩個新資料夾，一個叫backend，一個叫frontend，分別是：backend Django的一個app、frontend Vue.js專案4.使用webpack打包Vue.js專案命令：cd frontend
npm install
npm run build5.使用Django的通用檢視TemplateView在專案根目錄下urls.py（即ulb_manager/urls.py）使用通用檢視建立最簡單的模板控制器。
程式碼：urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$',TemplateView.as_view(template_name="index.html")),
#url(r'^api/',include('backend.urls', namespace='api'))
#最後一行程式碼我註釋掉，因為執行報錯：Error:No module named 'backend.urls',暫時解決不掉，但是我執行的時候，註釋掉這行程式碼，是能正常執行的。
]6.配置Django專案的模板搜尋路徑開啟settings.py(即ulb_manager/settings.py)找到TEMPLATES配置項，修改如下：TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#'DIRS': [],
'DIRS':['frontend/dist'],
'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',
],
},
},
]PS：之前學習django，是要在settings.py下的INSTALLED_APPS配置項下新增app的，所以我自己新增了'backend'。7.配置靜態檔案搜尋路徑開啟settings.py(ulb_manager/settings.py)，找到STATICFILES_DIRS配置項，配置如下：# Add for vue.js
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]如果沒有，自己新增。
到這裡，執行django專案已經可以正常執行了。正常執行的介面如下：

執行介面二，安裝vue.js如果電腦上，沒有vue.js，以下是安裝vue.js的過程：1.node.jsvue.js的推薦安裝環境是node.js，因此，我是先安裝的node.js。
登陸node.js官網，下載最新的v6.11.1版本。2.npm整合於Node.js中，不需要裝。3.cnpm在命令列中輸入命令：npm install -g cnpm --registry=http://registry.npm.taobao.org等待安裝完成。4.安裝vue-cli腳手架構建工具在命令列中輸入命令：npm install -g vue-cli等待安裝結束。到此，vue-cli已經安裝完成。

作者：Royal_KinM
連結：http://www.jianshu.com/p/a463e97def9c
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。