Django+Vue.js 初学入手的一些坑，已填坑
我用的django是1.11.0 vue是最新的，这是前提，之前因django版本不对导致一系列问题。另外要讲项目部署在Linux上运行，windows下运行也会出现很多坑。接下来是我参考网上的一片文章开始搭建环境，其中有问题的地方会用红色加粗说明。---------------------------------------------------------------------
我用的django是1.11.0 vue是最新的，这是前提，之前因django版本不对导致一系列问题。另外要讲项目部署在Linux上运行，windows下运行也会出现很多坑。
接下来是我参考网上的一片文章开始搭建环境，其中有问题的地方会用红色加粗说明。
1. 创建Django项目
命令：
django-admin startproject ulb_manager
结构：
.
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
2. 进入项目根目录，创建一个 app 作为项目后端
命令：
cd ulb_manager
python manage.py startapp backend
即：app 名叫做 backend
结构：
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
3. 使用vue-cli创建一个vuejs项目作为项目前端
命令：
vue-init webpack frontend
即：项目名叫 frontend
结构：
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── frontend
│ ├── README.md
│ ├── build
│ │ └── ....
│ ├── config
│ │ ├── dev.env.js
│ │ ├── index.js
│ │ ├── prod.env.js
│ │ └── test.env.js
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ └── logo.png
│ │ ├── components
│ │ │ └── Hello.vue
│ │ └── main.js
│ ├── static
│ └── test
│ └── ...
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
结构总结：
可以看到项目根目录有两个新文件夹，一个叫 backend ，一个叫 frontend，分别是：- backend Django的一个app
- frontend Vuejs项目
4. 接下来我们使用 webpack 打包Vusjs项目
命令：
cd frontend
npm install
npm run build
结构：
我引入了一些包，比如element-ui等，你的static里面的内容会不同，没关系 index.html 和 static 文件夹相同就够了dist
├── index.html
└── static
├── css
│ ├── app.42b821a6fd065652cb86e2af5bf3b5d2.css
│ └── app.42b821a6fd065652cb86e2af5bf3b5d2.css.map
├── fonts
│ ├── element-icons.a61be9c.eot
│ └── element-icons.b02bdc1.ttf
├── img
│ └── element-icons.09162bc.svg
└── js
├── 0.8750b01fa7ffd70f7ba6.js
├── vendor.804853a3a7c622c4cb5b.js
└── vendor.804853a3a7c622c4cb5b.js.map
构建完成会生成一个 文件夹名字叫dist，里面有一个 index.html 和一个 文件夹static ，
5. 使用Django的通用视图 TemplateView
找到项目根 urls.py (即ulb_manager/urls.py)，使用通用视图创建最简单的模板控制器，访问 『/』时直接返回 index.html
此处注意要引入TemplateView否则运行时会报错，说不知道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'))
]
6. 配置Django项目的模板搜索路径
上一步使用了Django的模板系统，所以需要配置一下模板使Django知道从哪里找到index.html
打开 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',
],
},
},
]
注意这里的 frontend 是VueJS项目目录，dist则是运行 npm run build 构建出的index.html与静态文件夹 static 的父级目录
这时启动Django项目，访问 / 则可以访问index.html，但是还有问题，静态文件都是404错误，下一步我们解决这个问题7. 配置静态文件搜索路径
打开 settings.py (ulb_manager/settings.py)，找到 STATICFILES_DIRS 配置项，配置如下:
# Add for vuejs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]
这样Django不仅可以将/ulb 映射到index.html，而且还可以顺利找到静态文件
此时访问 /ulb 我们可以看到使用Django作为后端的VueJS helloworld
然后运行项目就可以看到所谓的vue界面了。
前往低代码交流专区
更多推荐
12
0- 0
已为社区贡献2条内容
所有评论(0)