python+Django+vue+mysql+pycharm开发环境的搭建_搭建pycharm，django，sqlite3，vue环境

工作之余断断续续根据网上找到的教程进行环境搭建，搭建了多个。

但是一直没有一个整体概念，到底该先做什么，后做什么，

操作一步后，结果应该是怎样

另外，网上的教程都是直接用命令行操作，用pycharm又应该怎么弄呢

环境搭建好以后，应该怎么分目录结构，应该先从哪里的代码开始写，写了以后，又需要做哪些配置

这些问题一直困扰着我，所以我决定边学边记录整理。

也希望能帮助同为初学者的你少走一些弯路。

1、需要的安装包有哪些：

• python安装包  

        下载地址：Welcome to Python.org

        安装方法：Python3 环境搭建 | 菜鸟教程

• node.js安装包

         下载地址：Node.js — Download Node.js®。

         安装方法：Node.js 安装配置 | 菜鸟教程

• pycharm安装包

         下载地址：Download PyCharm: The Python IDE for data science and web development by JetBrains

         安装方法：pycharm下载好了直接安装，直接下一步，不需要多余的配置

• mysql安装包

         下载地址：MySQL :: Download MySQL Community Server

         安装方法：MySQL 安装 | 菜鸟教程

2、软件安装顺序

• 先安装python语言包
• 再安装pycharm
• 再安装node.js
• 最后安装mysql

3、环境搭建

上面的安装包都安装好后，打开pycharm，创建项目

点击后，在显示的窗口左边选择Django，右边的location是本地电脑保存项目的目录路径，可以点文本框最后的文件夹按钮打开目录选择窗口进行选择希望保存项目的本地路径，在目录选择窗口也可以新增文件夹

选择好本地保存项目的目录后，上图中标红的venv是本项目的虚拟环境，也就是用来存放项目依赖的第三方模块（包/库文件），base interpreter是你电脑上安装的python所在的目录，要选择到.exe文件。然后点create，开始创建项目。

创建项目过程为：

先创建虚拟环境

pycharm在选择创建Django项目后，会自动下载安装Django模块

创建成功后，目录结构如下图：

• autotest_plat：项目的容器。
• manage.py: 一个实用的命令行工具，可让你以各种方式与该 Django 项目进行交互。
• autotest_plat/__init__.py: 一个空文件，告诉 Python 该目录是一个 Python 包。
• autotest_plat/settings.py: 该 Django 项目的设置/配置。
• autotest_plat/urls.py: 该 Django 项目的 URL 声明; 一份由 Django 驱动的网站"目录"。
• autotest_plat/wsgi.py: 一个 WSGI 兼容的 Web 服务器的入口，以便运行你的项目。

我们常听到架构师，一个项目工程应该有一个合理的结构，这个结构这里用到前后端分离，创建方法如下：

创建后端目录：

在pycharm中，打开Terminal窗口，一般pycharm是默认开启Terminal窗口，如果没有可以通过下图标识打开

打开后，在Terminal窗口输入：python manage.py startapp backend 回车

其中backend是文件夹名，可以自行定义，我这里用的是backend

创建成功后，目录结构如下：

创建前端目录：

创建前段目录前要先确认本机是否安装了vue和vue cli，如何判断本机是否安装了vue呢，在Terminal窗口，输入：vue --version或vue -V，如果如下图显示版本号了，就说明安装了，否则就没有。

如果没有安装，可以按照这个教程安装VUE：Vue.js 安装 | 菜鸟教程

安装好vue以后，可以再用上面的命令看一下版本，上图中我们看到的版本号是2.9.6，这个安装的是2.9.6版本的vue cli，

vue cli 3.0及以上的版本安装方法不同，具体如下：

vue cli安装方法：安装 | Vue CLI

安装完以后，再用上面的命令查看一下版本：

此时查出的版本号是3.3.0，vue cli就安装好了。

然后，和上面创建后端目录的位置一样，在terminal里面输入：vue init webpack frontend 回车

其中frontend为文件夹名，也是可以自行定义的。

安装过程中，前面4项之间回车，最后一项也直接回车，中间4项可以根据需要选择yes或no。

备注：前端目录创建过程中选项的含义如下

project name：项目名称，也就是文件夹名称。

project description：项目描述。这里默认描述如上图。

author：作者

vue build：两个选项：Runtime + Compiler: recommended for most users（运行时+编译器：建议大多数用户使用），Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere（仅运行时：min + gzip大约6KB，但是.vue文件中只允许使用模板（或任何特定于Vue的HTML） - 其他地方需要渲染函数）

install vue-router：是否安装Vue路由

use eslint to lint your code：是否启用eslint检测规则，也就是代码规范检查，选择yes后，如果代码不符合标准规则，就会有提示

set up unit tests：是否安装单元测试，如果选择是，就会创建一个单元测试的目录，否则就没有

should we run ‘npm install’ for you after the project has been created：为后面项目需要安装插件选择一个执行命令方式，一般有npm和yarn。这两个的区别见：npm和yarn的区别，我们该如何选择? - 简书

创建成功后，目录结构如下：

• frontend：项目前端的容器
• frontend/build：项目构建(webpack)相关代码
• frontend/config：配置目录，包括端口号等。我们初学可以使用默认的。
• frontend/node_modules：npm 加载的项目依赖模块
• frontend/src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。
• frontend/static：静态资源目录，如图片、字体等。
• frontend/.xxxx文件：这些是一些配置文件，包括语法配置，git配置等。
• frontend/index.html：首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
• frontend/package.json：项目配置文件。
• frontend/README.md：项目的说明文档，markdown 格式

目录结构创建好了以后，我们现在来安装一些写vue前台页面可以用的组件：element-ui

首先我们要进入frontend目录下，在Terminal窗口输入下面的命令：

cd frontend

然后输入：

npm i element-ui -S

或

cnpm i element-ui -S

注：cnpm的安装方法在vue的安装方法中写了。

安装成功后，如下图

然后运行npm run build 或 cnpm run build

运行完成后，frontend目录中多了一个dist目录，dist目录下还有一个static目录和一个index.html文件。