本篇文章主要介紹了Django+Vue.js搭建前後端分離項目的範例，具有一定參考價值，有興趣的可以了解一下
在寫這篇文章的時候，順帶學習了一下關於Markdown的使用方法。
筆者是個渣渣，一切都是自己在摸索的學著，所以也談不上什麼體系、系統學習。這裡主要是為了實現把專案前後端分離開。
這裡假設你的電腦上所需的django、vue.js已經有了，如果沒有，往下拉就是vue.js的安裝流程。 django前面寫了，就不贅述了。
一，正常建置前後端分離專案流程
#1.建立django專案
指令：
django-admin startproject ulb_manager
結構：
├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
2.進入專案根目錄，建立一個app作為專案後端
指令：
cd ulb_manager python manage.py startapp backend
結構比上面最基本的，多了一塊backend
3.使用vue-cli建立一個vue.js專案作為專案前端
指令：
vue-init webpack frontend
介面：
Project name:（預設回車鍵）
Project description：（預設回車鍵）
#Auther：（輸入自己的名字，隨便）
...：（預設yes和回車鍵，暫時不太懂，剛開始接觸，網路上也沒查到這一塊東西，就全部選擇預設或Yes了）
結構多了一塊frontend
結構總結：
專案根目錄有兩個新資料夾，一個叫backend，一個叫frontend，分別是：backend Django的一個app、frontend Vue.js專案
4.使用webpack打包Vue.js專案
指令：
cd frontend npm install npm run build
5.使用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.js
##vue.js的建議安裝環境是node.js，因此，我是先安裝的node.js。2.npm
整合於Node.js中，不需要裝。3.cnpm
在命令列中輸入指令：npm install -g cnpm --registry=http://registry.npm.taobao.org
npm install -g vue-cli
以上是Vue.js和Django搭建前後端分離專案範例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
