我用的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
此处记得要在setting.py文件中添加上你的app

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界面了。


Logo

前往低代码交流专区

更多推荐