vue电商实战（零基础）day1

电商业务概述

客户使用的业务服务： PC端，小程序，移动web，移动app
管理员使用的业务服务：PC后台管理端。
PC后台管理端的功能： 管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计

电商后台管理系统采用前后端分离的开发模式（前端用来绘制页面和调用API接口，后端用来操作数据库和写API接口）
前端项目是基于Vue的SPA（单页应用程序）项目

前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)

前端工程化

A.安装Vue脚手架
B.通过脚手架创建项目
C.配置路由
D.配置Element-UI
E.配置Axios
F.初始化git仓库
G.将本地项目托管到github或者码云中
（本教程仅学习自用，欢迎交流指正）

安装Vue脚手架

安装Vue脚手架的教程很多，此处不再赘述，可参考：链接
若电脑上没有node.js(可通过node -v命令查看)，则需下载安装，具体可参考：链接

通过脚手架创建项目

通过命令行

终端输入：vue create 项目名
进入项目所在目录，启动项目即可（新手建议图形化界面）

通过图形化界面

1.打开cmd输入Vue ui，新建项目
初始化仓库
如果以前有预设的项目模板,可以选择预设，这里我们使用手动
功能，选择安装哪些功能，这里我安装了Router和使用配置文件，Linter是格式校验，我没有安装，
在版本我选择了默认的。下面询问我们是否使用历史模式的路由，这里我选择关闭这一项，使用哈希模式的路由，因为哈希的兼容性更强一些。

新建项目成功

配置路由

配置Element-UI

配置Element-UI，实际上就是添加插件：


配置插件：默认导入所有插件，会比较臃肿，大型项目建议改为Import on demand（按需导入），这里我嫌麻烦，直接导入了所有，点击完成安装。

配置Axios

配置Axios实质上就是添加依赖：

初始化git仓库

将本地项目托管到github或者码云中

(项目托管主要是在团队合作中用的比较方便，关于码云的设置实在有问题的也可以跳过）
GitHub和码云都叫做源代码托管平台，使用方法类似，只不过GitHub服务器位于国外，码云位于国内，速度相对快些，所以这次项目选择码云托管。
1.注册登录码云账号https://gitee.com/,进入设置

生成公钥，如果有公钥，直接复制粘贴，没有公钥可点击“怎样生成公钥”指引。

复制命令，红框部分替换为注册账号的邮箱。

Windows+R打开终端，运行命令，红框部分即为公钥文件保存的地方。

复制公钥后，粘贴公钥并确定。

测试公钥能否正常使用：

一切就绪后，新建仓库

注意仓库的名称是唯一的，点击创建

创建成功后会弹出以下页面，首先进行全局设置（在终端中执行下面两条命令），如果没有项目，需要创建git仓库，因为我们已经有了vue项目，所以只需执行第三段代码。

接下来进行git仓库关联：
在码云建立好仓库后，安装git，Windows上使用Git，可以从Git官网直接下载安装程序进行安装。测试命令：git --version
打开项目所在的终端，进行git配置：

打开项目所在位置的终端，进行git仓库关联

先进入项目的目录下，shift+右键，打开powershell终端，执行以下命令：
git status 可以查看本地目录的状态信息

将你本地仓库与码云上的远程仓库关联起来.
git remote add origin https://github.com/greenrobot/EventBus.git (https://github.com/greenrobot/EventBus.git是你当前刚创建的项目的地址)
git pull --rebase origin master 更新代码，防止和远程产生冲突
git add . 添加目录下所有发生改变的文件
git commit -m ‘注释信息’
git push -u origin master 本地仓库代码提交至远程仓库

配置后台项目

A.安装phpStudy并导入mysql数据库数据


B.安装nodeJS，配置后台项目,从终端打开后台项目vue_api_server
然后在终端中输入命令安装项目依赖包：npm install

C.使用postman测试api接口