Django +vue.js實現前後端分離（十三）

1.安裝vue環境

• 下載安裝node.js，配置環境變量
• 下載npm ， nodejs下的包管理器
• webpack：它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的合併和打包。 npm install webpack -g
• 安裝vue腳手架 npm install --global vue-cli 用於生成vue工程模板

 

2.創建項目

• 創建django項目 django-admin startproject ulb_manager
• 創建django下app作爲項目後端 python manage,py startapp backend
• 在setting,py下的INSTALLED_APP配置下添加 backend
• 使用vue-init webpack frontend 創建一個vue項目作爲前端
• npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
• 打包編譯vue項目，進入vue根目錄，npm install， npm run build
• 使用django的通用視圖TemplateView

  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',暫時解決不掉，但是我運行的時候，註釋掉這行代碼，是能正常運行的。 ]

• 配置django項目的模板搜索路徑 'DIRS':['frontend/dist'],
• 配置靜態文件搜索路徑 打開 settings.py (ulb_manager/settings.py)，找到 STATICFILES_DIRS 配置，沒有則自行添加

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

   

• 運行django項目

• 運行正常界面