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

邢承弼

2023-12-01

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中编写

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

相关阅读

相关文章

相关问答

相关文档