DEV Community

Cover image for Fullstack? Why not (Django + Vue-js) - episode 0
aderayevans
aderayevans

Posted on

Fullstack? Why not (Django + Vue-js) - episode 0

Table of Contents

  1. Django for backend
  2. Vue.js for frontend

Settings essentials


Django for backend


  • Anaconda for virtual environment 4.12.0
conda create --name django-env

activate django-env #activate the environment
Enter fullscreen mode Exit fullscreen mode

Remember to install all commands below inside conda env (django_env)

  • >= Python 3.10.4
  • Django 4.0.5

    python -m pip install Django

  • Django CORS : Cross-Origin-Resource-Policy

    python -m pip install django-cors-headers


Vue.js for frontend


  • Install Nodejs 16.15.1 and npm 8.11.0 at https://nodejs.org/en/download/
  • vue-cli 5.0.6

    npm install -g vue-cli

  • axios 0.27.2

    npm i axios

  • typescript 4.7.4 (when cannot find {frontend_project_dir}/node_modules/typescript)

    npm install typescript

or

npm install -g typescript

Additional settings:

add this line to {frontend_project_dir}/jsconfig.json

    "jsx": "preserve",
Enter fullscreen mode Exit fullscreen mode
    {
  "compilerOptions": {
    "target": "es5",
    "jsx": "preserve",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
        // "./src/**/*.ts"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)