使用Django和Vue.js（Vue CLI）一起构建SPA

目标

• バックエンドでDjango、フロントエンドでVue.jsを使いたい。

 

• 単一ファイルコンポーネントを使いたい。

 

SPAを使う

這個詞沒有上下文，所以我們可以使用不同的方式來解釋它。以下是其中一種可能的方式：這個詞可以表示水或其他物質的流動或移動，也可以用來形容事件或時間的流逝。

1. 使得能够使用Vue

 

1. 使得能够使用Django

 

调整Vue构建时，生成的文件组对应地输出到Django的适当位置

文件结构

webpack 是什么？

我觉得使用单文件组件会导致文件数量激增，所以我认为需要使用webpack，但似乎Vue CLI已经包含了它，所以不需要特地安装。

当输入 $vue create xxx 并执行后，可自动创建并查看生成的 package.json。

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

当你运行包含构建命令的代码时，会生成类似于webpack的文件作为输出。

准备工作目录

创建名为django-vuejs的文件夹。

进入创建的目录django-vuejs。

Vue的准备

使用vue create创建了一个名为”vuejs”的项目目录。

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (w
ith dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lin
t on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: 

我认为我们可以选择手动选择功能，同时添加路由器（Router）和状态管理工具（Vuex）。您可以使用“↑”和“↓”键进行移动，使用空格键进行启用/禁用的选择。

完成安装后，切换到django-vuejs/vuejs/目录并执行$npm run serve。

准备 Django

使用django-admin命令创建一个Django项目，项目名称设定为”django_project”。

进入django_project目录

我將嘗試運行 $python manage.py runserver。由於尚未遷移，可能會出現錯誤，但服務器本身將被啟動。

$mkdir static
然后在/django-vuejs/jango_project的根目录下创建一个static文件夹。
将Vue端在$npm run build时生成的img、css和js文件存储在这里。

使用Python执行`python manage.py startapp django_app`命令，在`django-vuejs`目录下创建一个Django应用程序。
应用程序的名称为”django_app”。

将刚创建的应用程序添加到/django-project/django-project/settings.py的INSTALLED_APPS中。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_app' //←これを追記
]

接下来

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

我也会添加静态文件的位置设置。

进入django_app目录

创建一个名为templates的目录。
根据Django的规范，templates目录会被自动识别为模板存放位置。
在这里存放通过$npm run build命令生成的index.html文件。

接下来要做的事情 zuò de

因为Django和Vue已经准备就绪，所以我们将它们进行协调。

编辑Vue的package.json

更改构建时的输出目录

如果保持Vue的$npm run build的默认设置，它会创建一个名为dist的目录，并在其中输出index.html，js，css，img和favicon.ico。

然而，您可以通过创建vue.config.js文件并进行相应的配置来进行更改。
vue.config.js文件的位置与package.json文件位于同一层级。
根据本例，它将位于/django-vuejs/vuejs/的根目录下。

module.exports = {
    //ここで指定した場所で展開する
    outputDir: '../django-root',
    //サーバーを起動した時のルートパス
    publicPath: '/',
    //outputDir起点でindex.htmlを格納する場所を指定
    indexPath: 'django-app/templates/index.html',
    //outputDir起点でstaticファイルを格納する場所を指定
    assetsDir: 'static'
}

在outputDir中指定了Django项目的目录。
然后指定了index.html和static文件的输出位置。

目前尚未深入研究，但根据 Vue 官方文档，似乎可以在 vue.config.js 文件中进行 webpack 的配置。

在进行构建之前，你需要进行一个非常重要的设置。这是修改 package.json 的脚本部分。

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

這是自動生成的 package.json 檔案，當使用 $vue generate 命令時生成。
需要更改 scripts 中的 build 內容。

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-clean",
    "lint": "vue-cli-service lint"
  },

将其更改为类似的方式。
具体来说，将附加–no-clearn选项。

如果未指定此选项进行构建，则会先清空指定目录中的内容，然后生成文件。

这个路径下的文件包括了与Vue无关的文件，但也会全部搬迁走。

爱德华·艾尔利克: “这…这不应该…该死，被抢走了！！！”

{
  "scripts": {
    "watch": "vue-cli-service build --no-clean --watch"
  },

由于可以进行观察，我尝试添加上面的$npm run watch，但在观察期间构建时，似乎忽略了assetsDir。请参考https://cli.vuejs.org/config/#assetsdir。

如果不指定 “–no-clean” 选项，过去的文件将像差异一样继续保留和增加…
$npm run serve立即反映而无需构建，所以在这里确认并在适当的时机构建。

将 outputDir 以相对路径的方式书写并不美观。
肯定还有更加巧妙的方法。
我将继续深入研究。

使用Django和Vue实现mustache语法的问题可以通过单文件组件来解决。我会在后续的调查中进一步研究这一点。