在寫這篇文章的時候导犹，順帶學(xué)習(xí)了一下關(guān)于Markdown的使用方法。
筆者是個渣渣羡忘，一切都是自己在摸索的學(xué)著谎痢，所以也談不上什么體系、系統(tǒng)學(xué)習(xí)卷雕。在這里主要是為了實現(xiàn)把項目前后端分離開节猿。
這里假設(shè)你的電腦上所需的django、vue.js已經(jīng)有了漫雕，如果沒有滨嘱，往下拉就是vue.js的安裝流程。django前面寫過了浸间，就不贅述了太雨。
一，正常搭建前后端分離項目流程
1.創(chuàng)建django項目
命令：
django-admin startproject ulb_manager
結(jié)構(gòu)：
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
2.進(jìn)入項目根目錄魁蒜，創(chuàng)建一個app作為項目后端
命令：
cd ulb_manager
python manage.py startapp backend
結(jié)構(gòu)比上面最基本的囊扳，多了一塊backend
3.使用vue-cli創(chuàng)建一個vue.js項目作為項目前端
命令：
vue-init webpack frontend
界面：
Project name:（默認(rèn)回車鍵）
Project description：（默認(rèn)回車鍵）
Auther：（輸入自己的名字吩翻，隨意）
...：（默認(rèn)yes和回車鍵，暫時不太懂锥咸，剛開始接觸狭瞎，網(wǎng)上也沒查到這一塊東西，就全部選擇默認(rèn)或者Yes了）
結(jié)構(gòu)多了一塊frontend
結(jié)構(gòu)總結(jié)：
項目根目錄有兩個新文件夾她君，一個叫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）使用通用視圖創(chuàng)建最簡單的模板控制器球涛。
代碼：
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：之前學(xué)習(xí)django，是要在settings.py下的INSTALLED_APPS配置項下添加app的引谜，所以我自己添加了'backend'牍陌。
7.配置靜態(tài)文件搜索路徑
打開settings.py(ulb_manager/settings.py)，找到STATICFILES_DIRS配置項员咽，配置如下：
# Add for vue.js
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]
如果沒有毒涧，自己添加。
到這里贝室，運行django項目已經(jīng)可以正常運行了契讲。正常運行的界面如下：
二，安裝vue.js
如果電腦上滑频，沒有vue.js捡偏，以下是安裝vue.js的過程：
1.node.js
vue.js的推薦安裝環(huán)境是node.js，因此峡迷，我是先安裝的node.js银伟。
登陸node.js官網(wǎng)，下載最新的v6.11.1版本绘搞。
2.npm
集成于Node.js中彤避，不需要裝。
3.cnpm
在命令行中輸入命令：
npm install -g cnpm --registry=http://registry.npm.taobao.org
等待安裝完成看杭。
4.安裝vue-cli腳手架構(gòu)建工具
在命令行中輸入命令：
npm install -g vue-cli
等待安裝結(jié)束。
到此挟伙，vue-cli已經(jīng)安裝完成楼雹。
PS:暫時摸不清楚如何把文件的目錄樹結(jié)構(gòu)在簡書的Markdown里寫出來模孩。原學(xué)習(xí)的網(wǎng)站：
https://zhuanlan.zhihu.com/p/25080236
