Django+Vue环境搭建

一、Django环境

1、下载Django

pip install django

2、创建Django项目

django-admin startproject server #server 为项目名

3、将最外层目录改为项目名称

4、启动服务

python manage.py runserver 0.0.0.0:8000

二、Vue环境

因为Vue环境可能会面临网络问题引发的timeout，所以以下介绍两种方式来安装。

方式一：线上安装

1、安装node.js js环境

2、使用npm淘宝镜像，避免npm下载速度过慢的问题

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、使用cnpm 下载vue-cli

cnpm install -g @cue/cli

4、创建项目

vue init webpack client # client为项目名称

5、安装依赖

cd client

cnpm install

6、运行调式的服务

cnpm run dev

7、vue项目写完后，打包vue项目，将项目打包为dist文件夹

cnpm run build

方式二：本地安装

1、github下载vue压缩包，并将解压后的安装包放在项目同级

2、用相对路径进行初始化，初始化配置可自定义，见下图：

vue init ./webpack-develop client # client是项目名称

3、之后依次安装依赖、运行调式的服务、打包等

三、Django+Vue环境搭建

1、配置 Django 模板的搜索路径

Django框架本身支持模板编辑，但是与Vue集成之后，需要修改为Vue路径才可生效

修改Django中setting文件“DIRS”路径：

2、配置 Django 静态文件搜索路径

TEMPLATES= [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': ["client/dist"], # 配置vue路径

'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',

],

},

},

]

STATICFILES_DIRS= [os.path.join(BASE_DIR, "client/dist/static")] # 添加静态文件路径

3、修改django的主目录的urls文件

Vue中的html文件和static同级目录。

from django.conf.urlsimport url

from django.contribimport admin

from django.views.generic.baseimport TemplateView

urlpatterns= [

url(r'^admin/', admin.site.urls),

url(r'', TemplateView.as_view(template_name="index.html")),

]

4、启动django服务，访问localhost:8000 则可以出现vue的首页

python manage.py runserver

Django+Vue环境搭建相关推荐

django开发环境搭建
django开发环境搭建 1.下载所需要的安装包 pycharm python3.7.9 2.安装pycharm python环境 3.Windows 安装mkvirtualenv虚拟python环境 ...
VUE环境搭建教程以及VSCODE插件Vetur和ESlint的安装配置
*此教程适用于Windows环境下 Author:Sinclair CreateDate:2018-10-09 1.安装node.js 下载地址:Download | Node.js (LTS代表 ...
nodejs + vue环境搭建
nodejs + vue环境搭建安装nodejs 下载并安装[nodejs] 配置nodejs 安装cnpm(淘宝镜像) 安装vue vue vue-cil 测试,创建新项目附上vue项目文件夹说 ...
Vue环境搭建及入门
初始Vue Vue环境搭建 Vue模板语法 Vue数据绑定 el-data的两种写法 MVVM模型 Vue数据代理 Vue中的事件处理 Vue官网:https://cn.vuejs.org 初始Vue ...
Vue 环境搭建和 Hello world
文章目录 vue环境搭建引入vue 安装vue开发者工具全局配置 Hello world 404报错处理 Hello world 一些分析总结尚硅谷Vue2.0+Vue3.0全套教程丨vuej ...
Vue环境搭建(node安装,环境配置,运行项目)
Vue环境搭建(node安装,环境配置,运行项目) 一.安装node 1.去官网下载node之后,推荐安装稳定版本(LTS)node官网下载地址 2.查看node安装成功否 node -v 查看nod ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
django的环境搭建（一）
@Author:Runsen 环境介绍: pycharm 2017.3.3 ubuntu18 (python3.6) 环境搭建 : 在window新建一个文件并用pycharm打开,连接虚拟机Ubun ...
VUE环境搭建和项目创建-win平台
今天是2021-04-06,vue3已经发布好久了,所以本文用的都是现在时间最新版的一.搭建node环境参考这个: node环境搭建二.安装vue脚手架 Vue CLI 4.x 需要 Node. ...

Django+Vue环境搭建

Django+Vue环境搭建相关推荐

最新文章

热门文章