Django让web开发更简单（七）：搭建VUE前端工程

前言

基于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来运行项目：

如上，说明运行成功。