一每币、Django環(huán)境
1尝偎、下載Django
pip install django
2凿滤、創(chuàng)建Django項(xiàng)目
django-admin startproject server? # server? 為項(xiàng)目名
3拔创、將最外層目錄改為項(xiàng)目名稱(chēng)
4呢诬、啟動(dòng)服務(wù)
python manage.py runserver 0.0.0.0:8000
二涌哲、Vue環(huán)境
因?yàn)閂ue環(huán)境可能會(huì)面臨網(wǎng)絡(luò)問(wèn)題引發(fā)的timeout，所以以下介紹兩種方式來(lái)安裝尚镰。
方式一：線上安裝
1阀圾、安裝node.js? js環(huán)境
2、使用npm淘寶鏡像钓猬，避免npm下載速度過(guò)慢的問(wèn)題
npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org
3稍刀、使用cnpm 下載vue-cli
cnmp install -g @cue/cli
4、創(chuàng)建項(xiàng)目
vue init?webpack client? #?client為項(xiàng)目名稱(chēng)
5敞曹、安裝依賴(lài)
cd client
cnpm?install
6、運(yùn)行調(diào)式的服務(wù)
cnpm?run?dev
7综膀、vue項(xiàng)目寫(xiě)完后澳迫，打包vue項(xiàng)目，將項(xiàng)目打包為dist文件夾
cnpm?run?build
方式二：本地安裝
1剧劝、github下載vue壓縮包橄登，并將解壓后的安裝包放在項(xiàng)目同級(jí)
2、用相對(duì)路徑進(jìn)行初始化讥此，初始化配置可自定義拢锹，見(jiàn)下圖：
vue init ./webpack-develop client? #?client是項(xiàng)目名稱(chēng)
3、之后依次安裝依賴(lài)萄喳、運(yùn)行調(diào)式的服務(wù)卒稳、打包等
三、Django+Vue環(huán)境搭建
1他巨、配置 Django 模板的搜索路徑
Django框架本身支持模板編輯充坑，但是與Vue集成之后减江，需要修改為Vue路徑才可生效
修改Django中setting文件“DIRS”路徑：
2、配置 Django 靜態(tài)文件搜索路徑
TEMPLATES= [
{
? ? ? ? 'BACKEND': 'django.template.backends.django.DjangoTemplates',
? ? ? ? 'DIRS': ["client/dist"], # 配置vue路徑
? ? ? ? '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',
],
},
},
]
STATICFILES_DIRS= [os.path.join(BASE_DIR, "client/dist/static")]? # 添加靜態(tài)文件路徑
3捻爷、修改django的主目錄的urls文件
Vue中的html文件和static同級(jí)目錄辈灼。
from django.conf.urlsimport url
from django.contribimport admin
from django.views.generic.baseimport TemplateView
urlpatterns= [
? ? url(r'^admin/', admin.site.urls),
? ? url(r'', TemplateView.as_view(template_name="index.html")),
]
4、啟動(dòng)django服務(wù)也榄，訪問(wèn)localhost:8000 則可以出現(xiàn)vue的首頁(yè)
python?manage.py?runserver
