1. 安装前端环境Node.js

    打开Node.js的官方网站:https://nodejs.org/zh-cn/

       点击长期维护版(LTS)进行下载。下载后双击打开安装程序,一路默认安装即可。如果您选择了自定义安装(Custom Setup),请确保选择了Add to PATH,否则后续需要手动添加到系统变量中。

        安装完成后打开cmd命令号验证是否安装成功并成功,在cmd输入node -v按回车,如果成功显示Node.js的版本,即为安装成功。

    2. 安装yarn

        现在一般使用yarn来代替npm进行前端的包管理。在安装好Node.js的情况下,在cmd输入npm install -g yarn来安装yarn。

        当显示added 1 package的时候即为安装成功。可以使用yarn -v查看版本来确认安装成功。

        3. 安装python

        打开python官网,鼠标悬停到Download标签上,点击Download for Windows下方的按钮即可下载。

        如果您因为网络原因未能打开python官网,请求助同事/同学直接提供安装包,或通过其他渠道寻找下载。建议您最少选择3.10.9或以上的python版本。

        双击打开下载后的安装程序,在主界面务必勾选“Add Python.exe to PATH”

        接下来点击“Customize Installation”,确保所有选项均已勾选。

        点击Next,在Advanced Options里,建议勾选第一项安装给本机所有用户。

        点击Install进行安装。安装完成后在成功页面点击中间的选项,去除Window的PATH长度限制,以防PATH没有添加成功。点击该按钮后,可以点击右下方Close关闭安装程序。

        最后可以打开cmd输入命令“python -V”查看python版本号以确保安装成功。

        4. 安装Django

        Django需要在cmd命令函通过python的pip包管理工具进行安装。打开cmd命令行,输入pip install django进行安装

        看到“Successfully installed xxx”的提示一般即为安装成功。

        5. 选择开发工具

        一般使用免费的Visual Studio Code(简写为vscode)系列的IDE进行前端和python开发。如果您喜欢并熟悉Jetbrains系列的工具,您可以使用Jetbrains Webstorm进行前端开发,使用Jetbrains PyCharm Professional进行后端开发。需要注意的是Jetbrains的大部分工具包括Webstorm和PyCharm Professional都是收费软件,您可能需要购买正版。

        Visual Studio Code系列一般有三种选择:微软官方Visual Studio Code,微软官方Visual Studio Code Insiders(内测版)和第三方开源编译版vscodium(去除微软内置的各类上传模块)。因为本公司一般需要前后端同时开发,建议同事安装两套不同的IDE,比如Visual Studio Code和Visual Studio Code Insiders,以便快速分别打开前后端项目进行开发。

        6. 安装Visual Studio Code / Insiders

        在浏览器中粘贴以下链接并回车,即可打开自动下载vscode页面:https://code.visualstudio.com/docs/?dv=win64

        在浏览器中粘贴以下链接并回车,即可打开自动下载vscode insider页面:https://code.visualstudio.com/docs/?dv=win64&build=insiders

        打开下载的安装程序,点击下一步后,建议全选附加任务,可以更方便的在项目文件夹上右键直接打开项目。

        一路下一步安装完成即可。Insider版同理。

        安装完成后建议打开vscode添加插件,以便更好地对vue/ant design/python进行提示。

        打开vscode(假设作为前端IDE使用),点击左边最后一个按钮切换到安装插件界面,输入volar,点击第一个“Vue Language Features (Volar)”,然后点击安装。

        之后搜索“ant design vue”并选择“Ant Design Vue helper”进行安装。

        打开vscode insider(假设作为后端IDE使用),点击左边最后一个按钮切换到安装插件界面,输入python,安装python插件。可以选择“安装发布版本”来安装稳定版的python插件。

        (非必要)如果您想探索django的相关插件,也可以输入django进行搜索,但是我们使用django编写api后端程序,一般不需要用到相关提示插件。

        开发环境安装到此结束。