Day01: 01 - 前置准备: 版面设计、安装、开启专案

Hello! 我是Charlie。
在这「30天肝出购物网站」系列文章中，我将与大家分享如何使用Django + Vue.js做出一个典型的购物网站。
在Day01中，我们将安装好所需的library跟framework，并且做好版型设计。

================================◉‿◉=================================

安装

首先，先安装Python。
Python使用的是3.7.9，可到下方连结下载：
https://www.python.org/downloads/release/python-379/
请依照自己的电脑架构，选择适宜的executable installer：

安装完後，请至cmd确认是否有安装完成：
$ python --version

安装完成後，我们要依序安装几个套件：

$ pip install django==3.1.5
$ pip install django-cors-headers==3.6.0
$ pip install PyMySQL==1.0.2
$ pip install PyJWT==2.0.1

接着安装MySQL，可以到下方连结下载：
https://downloads.mariadb.org/mariadb/5.5.68/

安装好之後，到控制台设立环境变数：

并到终端机底下确认是否能正常登入：
$ mysql -uroot -p

接着安装node.js，node.js可到下方连结下载：
https://nodejs.org/ko/blog/release/v14.16.0/

安装好後，一样到终端机中确认：
$ node --version

本次专案使用工具：

Sublime Text
Sublime Text Package - Emmet
Sublime Text Package - Terminal
Sublime Text Package - Vue Syntax Highlight
Sublime Text Package - HTML-CSS-JS Prettify

版面设计

这次要设计的是一个购物网站，会有以下几点：

1. 购物车放置於右上方按纽，以漂浮方式显示
2. 商品分类会放置於header下方，以dropdown-menu显示
3. 搜寻与购物车按钮并排，如未登入则显示登入跟注册

============================================

所以目前的版面设计，首页：

商品详情页面：

订单查询：

而本次的LOGO是由Hatchful自动产生：

================================◉‿◉=================================

Day01结束了！在今天我们完成了安装跟版面设计，Day02将作前端的页面刻画，不过在此之前我们必须先建立专案，See ya next day！