Django Vue.js建筑前端分离工程实例

在写这篇文章的时候，我顺便了解了Markdown的用法。

作者是人渣，一切都是自己学的，所以没有系统，也没有系统的学习。这里的主要目的是将项目的前端和后端分开。

这里，假设您的计算机上已经存在所需的django和vue.js。如果不是，下拉就是vue.js的安装过程，Django之前写过，就不赘述了。

一、前端分离项目的正常建设流程

1.创建django项目

命令：

Django-admin启动项目ulb _ manager结构：

经理 经理。pyURL . pywsgi . py2 .进入项目根目录，创建一个应用程序

命令：

cdulb _ manager pythonmanage的结构。pystartapp后端比上面最基本的后端多了一个后端

3.使用vue-cli创建一个vue.js项目作为项目的前端

命令：

Vue-init webpack前端接口：

项目名称：(默认输入键)

项目描述：(默认输入键)

作者：(输入你自己的名字，随意)

.默认情况下，选择“是”并输入.刚开始不太了解，但是在网上没有找到这个东西，所以选择了默认或者是。

结构中还有一块前端

结构概述：

项目根目录下有两个新文件夹，一个叫后端，一个叫前端，分别是后端Django和前端Vue.js项目的一个app。

4.用webpack打包Vue.js项目

命令：

光盘前端NPM安装NPM运行建设5。使用Django的通用视图TemplateView

使用公共视图在项目根目录下的urls.py(即ulb_manager/urls.py)中创建最简单的模板控制器。

代码：

urlpatterns=[ url(r'^admin/'，admin . site . URL)，url(r'^$',templateview.as_view(template_name='index.html'))、#url(r'^api/',include('backend.urls'，Namespace='api')) #我注释掉了最后一行代码，因为操作报告了一个错误：错误：没有名为'后端'的模块。‘URL’，暂时解决不了，但是运行的时候注释掉了这一行代码，可以正常运行。]6.配置Django项目的模板搜索路径

打开settings . py(ulb _ manager/settings . py)找到TEMPLATES配置项，并按如下方式进行修改：

TEMPLATES=[ { '后端' : ' django . TEMPLATES . back ends . Django . Django TEMPLATES '，#'DIRS': []，' DIRS': ['前端/距离']，' 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，所以我添加了'。

7.配置静态文件搜索路径

打开settings . py(ulb _ manager/settings . py)，找到STATICFILES_DIRS配置项。配置如下：

# add for vue . jsstatifiles _ 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。

登录node.js官网，下载最新的v6.11.1版本。

2 .国家预防机制

集成在Node.js中，无需安装。

下午3时

在命令行输入命令：

http://registry.npm.taobao.org正在等待安装完成。

4.安装vue-cli脚手架施工工具

在命令行输入命令：

Npm install -g vue-cli等待安装完成。

至此，vue-cli已经安装完毕。

PS:在Markdown中想不通文件的目录树结构怎么写。

已经修改了，因为不能完全按照原版本运行。我写了一个基本框架。像无头苍蝇一样.(而且你买不起云主机.你不必为初学者购买)

Markdown感觉可以自由使用，也可以调用一些html指令，这是相当有趣的，尽管不清楚可以调用多少个和哪些指令.

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。