Shulou(Shulou.com)06/02 Report--

It is believed that many inexperienced people are at a loss about how to separate the front and back end of python framework django with vue. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

One: create django project django-admin startproject mysite # create mysite project django-admin startapp app01# create app01 application two: install vue

1. First install node.js, official website address: https://nodejs.org/zh-cn/download/

two。 Use npm Taobao image to avoid the problem of slow npm download

Npm install-g cnpm-- registry= https://registry.npm.taobao.org

3. Download vue-cli using cnpm

Cnmp install-g cue-cli

If you installed node,nmp and cnpm before, you don't have to install them.

Three: set up the vue project

1. Put the vue project under the django folder at the same level as the app01 folder

two。 Run the vue project

Cd firstvue # # enter the last firstvue project created in cnpm install # # to install the dependent module cnpm run dev # # to run the modal service, and start a web service that can be tuned by visiting localhost:8080

If it can run successfully, it proves that there is no problem with the current vue project.

Four: after the vue project is written, package the vue project, and then modify the django configuration to integrate vue into django

Cnpmrunbuild## packages the vue project and packages everything into a dist folder

Configure in-settings.py under the project folder under python

TEMPLATES = [{'BACKEND':' django.template.backends.django.DjangoTemplates', 'DIRS': [' vue-admin-master/dist'], # modify content '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',],},},]

Configure the directory of the static folder of vue to the project [add static folder path]

STATIC_URL ='/ static/'STATICFILES_DIRS= [os.path.join (BASE_DIR,'vue-admin-master/dist/static/'), # add content] 5: modify the urls file of django's home directory from django.contrib import adminfrom django.urls import pathfrom blog import viewsfrom django.views.generic.base import TemplateViewurlpatterns = [path ('admin/', admin.site.urls), path (rushing, TemplateView.as_view (template_name='index.html')),]

Add corresponding rout

6: start the django service and visit localhost:8000 to show the home page of vue

Start django

Python manage.py runserver http://127.0.0.1:8000/#/login

Visit the interface where the vue project appears, and you will be successful!

Seven: sometimes it is not possible to directly access the home page because the path is not correct

Some will have prefixes, which need to be removed and repackaged before they can be used.

When packing, you don't need to delete the previous packaging content, just repackage it, and there will be corresponding packaging records.

Eight: after vue is packaged, it often happens that the fontawesome icon library cannot be used.

After packing, you need to manually change the css file path introduced by fontawesome

Put the original

Url (/ static/fonts/fontawesome-webfont.b06871f.ttf), replace it with url (.. / fonts/fontawesome-webfont.b06871f.ttf)

The small fontawesome icon can be displayed.

After reading the above, have you mastered the method of front and back end separation combined with vue in python framework django? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.