Django_vue2.x_@vue/cli环境搭建

作者: 古佛青灯度流年 | 来源:发表于2020-09-04 09:31 被阅读0次

Django_vue2.x_@vue/cli环境搭建
我的第一个Vue.js项目----仿cnode社区
vue-cli单页面应用
前端环境搭建
webpack进阶【17】: vue-cli 脚手架环境搭建
vue+ionic
Express+Vue+MongoDB
vue cli3离线使用指南
Vue(一)vue-cli搭建Vue项目
Angular环境搭建

1、首先准备资料：

node.js环境安装:Mac环境brew install node，其他系统相关教程
cnpm 环境安装 :npm install -g cnpm --registry=https://registry.npm.taobao.org
python3环境安装：brew install python3
Django包安装：pip3 install Django
@vue/cli脚手架安装：npm install -g @vue/cli , 详细教程
!注意：如果之前安装过npm，需要先卸载npm uninstall vue-cli -g

2.项目目录介绍

image.png

新建django项目：django-admin.py startproject myproject
新建Vue 项目：cd myproject , vue create appfront
！注意新建vue项目是，记得在Django项目中执行命令。

3.django setting配置

直接上全量配置代码，容易出问题的地方我标记上。

"""
Django settings for test_platform project.

Generated by 'django-admin startproject' using Django 1.11.

For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import platform

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'qixa)p9w$hf^g8q=9dgc3wul1ix57^nwclw55s=#0p5)o0-g*r'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['tp.**.com','127.0.0.1'] #设置运行访问项目的域名、ip

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders', # 跨域中间件
    'vhall',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', # 跨域中间件，必须放在common之前。
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie  指明在跨域访问中，后端是否支持对cookie的操作。
ROOT_URLCONF = 'myproject.urls'
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'  # 重点：比较重要指定Django 访问静态资源路径

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(os.path.dirname(__file__), '..', 'static').replace('\\', '/'), # 做转义字符。
    os.path.join(BASE_DIR, "appfront/dist/static"),  # 重点：配置vue模板资源路径，与vue项目路径一致。其中appfront是vue项目的名称,dist、static是在vue项目中vue.config.js分别配置的，一会上源码。
]
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'appfront/dist')],  # 项目主html模板地址，意思是指向vue项目中的index.html文件所在目录。
        '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',
            ],
        },
    },
]


WSGI_APPLICATION = 'myproject.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
import pymysql  # 一定要添加这两行！通过pip3 install pymysql！

pymysql.install_as_MySQLdb()

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'myproject', # django项目名称，在Mysql中先建立database，名称为：testform
        'USER': 'root',
        'PASSWORD': '',
        'HOST': '127.0.0.1',
    }
}

# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = True


log_path = './log/tp.log'
import datetime
date = datetime.datetime.now().date()
if 'Linux' in platform.system(): # 设置线上环境的一些配置。
    DEBUG = False
    log_path = '/home/log/dsm.log'
    tools_log_path = '/home/log/tools.log'
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': 'myproject',
            'USER': 'root',
            'PASSWORD': 'P&wer',
            'HOST': '127.0.0.1',
        }
    }

## 配置项目日志，同时输出到控制台、文件。
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'standard': {
            'format': '%(asctime)s %(levelname)-8s %(filename)s %(funcName)s[line:%(lineno)d] %(message)s'
        },
        'detail': {
            'format': '%(asctime)s %(levelname)-8s %(pathname)s %(funcName)s[line:%(lineno)d] %(message)s'
        },
    },
    'handlers': {
        'console': {
            'level': 'DEBUG',
            'class': 'logging.StreamHandler',
            'formatter': 'standard',
        },
        'file': {
            'level': 'DEBUG',
            'class': 'logging.handlers.RotatingFileHandler',
            'filename': log_path,
            'maxBytes': 1024 * 1024 * 50,  # 50 MB
            'backupCount': 100,
            'formatter': 'detail',
        },
        'appName': {   #重点：从这里开始，配置你自己app的日志handlers 输出配置。
            'level': 'DEBUG',
            'class': 'logging.handlers.RotatingFileHandler',
            'filename': log_path,
            'maxBytes': 1024 * 1024 * 50,  # 50 MB
            'backupCount': 100,
            'formatter': 'detail',
        }
    },
    'loggers': {
        'django': {
            'handlers': ['console', 'file'],
            'level': 'INFO', # 这里配置django本身日志等级
            'propagate': True,
        },
        # 自定义模块日志
        'django.template': {
                'handlers': ['file'],
                'level': 'INFO',
                'propagate': True,
            },
        'appName': {  #重点：从这里开始，你的配置你自己app的日志loggers配置。注意一个app要同时在handlers、loggers里面配置。
            'handlers': ['console', 'appName'],
            'level': 'DEBUG',
            'propagate': True,
        }
    },
}

Django 主路由配置：

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
import vhall.urls

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(vhall.urls)),
    url(r'^$', TemplateView.as_view(template_name="index.html")), # 重点：这里指定了使用vue项目中的index.html，其中index.html的路径配置就与setting中TEMPLATES下DIRS 配置有直接关系。
]

5.Vue主配置文件：
在appfront目录下，新建vue.config.js

module.exports = {
    devServer: {
        overlay: {
            warnings: false,
            errors: false
        },
    },
    lintOnSave: false, # 关闭脚手架的语法校验功能。
    outputDir: 'dist', //当运行npm run  build时生成的生产环境构建环境的目录
    assetsDir: 'static', //打包后放置静态资源目录名称
    publicPath: "",
    //指定生成的index.html的输出路径，相对于outputDir。也可以是一个绝对路径。
    indexPath : 'index.html', # 构建生成的index.html 目录及名称。

};

至此一个简单的Django_vue2.x_@vue/cli环境搭建基本完成。剩下的自己发挥吧。

6.项目部署
可以看我这篇文章Django_Nginx+gunicorn 服务部署

Django_vue2.x_@vue/cli环境搭建
1、首先准备资料： node.js环境安装:Mac环境brew install node，其他系统相关教程cnpm...
我的第一个Vue.js项目----仿cnode社区
一、环境搭建使用vue-cli脚手架搭建Vue项目全局安装 npm install -g @vue/cli 查...
vue-cli单页面应用
vue-cli是vue搭建环境脚手架，只需要几个命令就可以搭建开发环境。 vue-cli脚手架搭建 1.安装nod...
前端环境搭建
前端开发环境的搭建 vue环境搭建（node，vue-cli，vue） https://www.jianshu.c...
webpack进阶【17】: vue-cli 脚手架环境搭建
webpack: vue-cli 脚手架环境搭建一、搭建 vue-cli 脚手架环境 1、在一个新的文件夹下面，...
vue+ionic
vue的环境搭建： npm install -g @vue/cli （若已搭建跳过）vue create i...
Express+Vue+MongoDB
环境搭建首先要安装vue-cli和express-generator 使用手脚架搭建vue环境和express环...
vue cli3离线使用指南
在内网离线环境下，使用vue-cli3搭建项目 1.在互联网环境搭建Nexus Repository Manage...
Vue(一)vue-cli搭建Vue项目
vue项目搭建 vue项目快速搭建工具——vue-cli vue-cli是基于node环境的一个命令行工具。也就是...
Angular环境搭建
Angular环境搭建 1、安装node.js环境 2、全局安装Angular CLI 安装成功