Django让web开发更简单(七):搭建VUE前端工程

    科技2025-07-11  23

    前言

    基于rest_framework的django后端开发已经初步入门,现在介绍一下基于VUE的前端工程,感兴趣的朋友可以使用VUE进行开发。这里是直接运行一个前端工程。

    环境搭建

    1、安装Visual Studio Code 这个工具用于前端开发,也可以用于shell脚本(后续用到)等等,所以我这边进行安装。

    官网:https://code.visualstudio.com/docs/?dv=win

    双击安装即可。

    2、安装WebStorm 这个工具用于前端开发,如果不想安装Visual Studio Code,也可以安装WebStorm作为前端开发软件,因为跟pycharm类似(同一公司开发),所以用起来会比较顺手。

    官网:https://www.jetbrains.com/webstorm/

    双击安装即可。

    3、安装node.js 运行前端环境时,或者安装前端相关组件时,需要用到的环境。

    官网:https://nodejs.org/zh-cn/blog/release/v12.18.2/

    双击安装即可。

    4、安装cnpm 这是一个安装工具,类似于npm,因为国外资源通过npm下载比较慢,因此安装该工具以解决问题。

    官网:https://developer.aliyun.com/mirror/NPM

    也可以直接在cmd使用命令npm安装

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

    运行前端工程

    选择前端工程文件,右键使用WebStorm打开:

    打开json文件,安装该工程的依赖:

    安装方式:

    cnpm install

    安装成功后,会多一个node_modules文件夹:

    运行:

    npm run serve

    报错之后根据提示安装:

    cnpm install --save vue-runtime-helpers

    再去运行npm run serve来运行项目:

    如上,说明运行成功。

    Processed: 0.009, SQL: 8