轻量级web项目：（1）技术选型和环境搭建

一、技术选型

客户需要构建一web，架构采用轻量级的前后端分离框架，从成本和客户喜好考虑，该web使用前后端分离，后端使用python的Django，前端使用VUE的element-ui，数据库使用MySQL，编辑器采用pycharm（专业版）。

二、工具准备

1、python环境搭建

python安装包下载路径：https://www.python.org/    （浏览器下载较慢怎么办？复制链接到迅雷等工具下载）

python编辑器pycharm下载，路径：http://www.jetbrains.com/pycharm/download/#section=windows

一般情况下默认先安装python包，然后安装pycharm，注意pycharm使用专业版，因为专业版自带了Django项目创建工具，而社区版没得。

2、创建工程

如下图示：

在pycharm的terminal中输入python，出现上图所示，表示基于python的Django环境成功。

输入exit()，回车推出python命令行。

划重点：如下图

这是目录部分，解释下：

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

3、在工程中添加后端目录

使用pycharm在当前工程中自动添加后端目录的方法常用的有两种：

1）在Terminal窗口输入：python manage.py startapp backend 回车。

2）Tools-》run manage.py Task，然后在弹出命令行输入startapp backend。

注意：如果遇到pycharm的命令行出现：python命令不识别等情况，请检查工程路径是否有中文，python环境变量是否是系统变量。

添加后端目录命令执行后，应该出现的结果如下：

4、在工程中创建前端目录

创建前端目录之前，需要安装前端打包工具，我们前端框架采用VUE，所以要下载node.js来安装VUE。

1）node.js是JS语言解析工具，当然包括了一系列前端开发的代码集成工具，比如npm、cnpm等。

2)  国内资源镜像配置，如：淘宝镜像 https://npm.taobao.org

3)  安装vue的vue-cli，旧版本vue-cli 改成了新版本 @vue/cli。

node.js下载地址：https://nodejs.org/en/download/  下载后一直next即可安装。

https://www.cnblogs.com/yominhi/p/7039795.html

注意：必须先安装nodejs，然后修改npm配置，修改后cnpm才可以安装在指定的位置。如果系统默认的安装路径下没有中文字符，默认安装也可以，win10系统默认的系统文件夹一般为中文，在后续创建工程时出现各种异常。

系统变量path添加的路径必须为：D:\Program Files\nodejs\node_global   不能包含分号。

安装最新版本vue/cli的指导：https://cli.vuejs.org/zh/guide/installation.html

出现下图表示安装cnpm完成：

安装过程中，前面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。

出现上图结果后，表示前端目录创建成功，前端的路径展开后如下图所示：

解释下上图中关键文件的意义：

    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  

然后输入：cnpm i element-ui -S

然后运行npm run build 或 cnpm run build

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

5、安装MySQL

1、下载地址：https://dev.mysql.com/downloads/mysql/

2、安装教程：https://www.runoob.com/mysql/mysql-install.html

----结束---

下一篇介绍模块开发和相关原理。