Pycharm+Django+Vue采用vue-cli方式搭建初始框架

Python版本3.7
Django版本3.1.5
        前面的一些命令在网上都能找到,在此省略,从执行完vue-init webpack front(使用vue-cli创建一个vue.js项目作为项目前端,项目名自命名,这里命名为front)开始
1.cd front
2.npm install(安装依赖)
        会遇到的坑:如果你想要压缩项目的话,不要使用cnpm安装,它虽然快些,但是其安装出来的node_modules中的某些包中的某些文件夹是以快捷方式的形式下载的,压缩时会报找不到某些文件夹的错误。如果项目不用压缩,建议使用cnpm安装,因为npm安装还有很多的坑
过程2结束后若出现让你输入npm audit fix
        解决办法:
        1.淘宝镜像源会自动修复,然后下载相关依赖包。
        2.使用nrm use taobao,nrm如果没有安装,就使用npm i -g nrm,然后再使用nrm use taobao
        3.再使用npm i 安装一遍所有依赖包,这时候没下载的会自动下载,问题解决。
        若还未解决,网上有其他的解决办法,实在不行就卸载重装
卸载干净node_modules的命令:
        1.npm install rimraf -g
        2.rimraf node_modules
        如果觉得npm安装太慢,可以将镜像换成国内的,还可以试试将Pycharm的运行内存改为1G(前提是你的电脑至少为8G运行)
3.npm run dev(运行调试的服务)
        若成功可根据链接看到页面
        踩到的坑:不要随便更改安装包的版本,除非你确定这样改是对的,否则等待你的结果就是卸载重装。
过程3出现

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

TypeError: Cannot read property 'thisCompilation' of undefined
    at CopyPlugin.apply (F:\BookRecommend\front\node_modules\copy-webpack-plugin\dist\index.js:457:20)
    at Compiler.apply (F:\BookRecommend\front\node_modules\tapable\lib\Tapable.js:375:16)
    at webpack (F:\BookRecommend\front\node_modules\webpack\lib\webpack.js:33:19)
    at startDevServer (F:\BookRecommend\front\node_modules\webpack-dev-server\bin\webpack-dev-server.js:362:16)
    at processOptions (F:\BookRecommend\front\node_modules\webpack-dev-server\bin\webpack-dev-server.js:345:5)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

解决办法:
        不要去网上搜了,我搜了2天都没找到解决办法,在查中文文档也无果后之后我选择把整个前端目录删除(就是用命令建的front文件夹)重新安装(因为我之前照网上改了一些配置),完美解决。
运行成功后控制台会有一个链接,点进去是Vue的欢迎界面。
        可在front/config/indes.js中将port改为8000(默认是8080)
接下来进行Django的配置
1.settings.py中

LANGUAGE_CODE = 'zh-hans'  # 设置语言为中文

TIME_ZONE = 'Asia/Shanghai'  # 设置时区为亚洲

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 设置数据库为mysql数据库
        'NAME': 'test',  # 数据库名
        'USER': 'root',  # 数据库账号
        'PASSWORD': 'root',  # 数据库密码
        'HOST': 'localhost',  # 本地
        'PORT': 3306,  # 端口,默认3306
    }
}

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps.app1',  # 注册app1模块
    'apps.app2',  # 注册app2模块
    'apps.app3',  # 注册app3模块
]

        因为项目需要3个app所以在根目录下建了apps包,将其他app移动到里面,所以注册app时是使用了apps.app名的方式
2.urls.py

urlpatterns = [   # 配置路由
    path('admin/', admin.site.urls),
    path('app1/', include('apps.app1.urls')),  # app1模块
    path('app2/', include('apps.app2.urls')),  # app2模块
    path('app3/', include('apps.app3.urls')),  # app3模块
]

3.每个app目录下新建一个urls.py文件,文件内容:

from django.urls import path

urlpatterns = [
    
]

4.安装pymysql模块
pip3 install pymysql -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com
5.根目录下和项目名同名的文件夹下的__init__.py文件下添加以下代码

import pymysql

pymysql.install_as_MySQLdb()

        至此框架初始化结束,接下来是前后端项目的编写及整合。

        提醒:如果选择这种搭建方法,前端也需要在Pycharm中编写

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值