Vue项目实战

Vue项目实战开发

1.电商业务概述

客户使用的业务服务:PC端,小程序,移动web,移动app

管理员使用的业务服务:PC后台管理端。

PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理(商品分类,分类参数,商品信息,订单),数据统计

电商后台管理系统采用前后端分离的开发模式

前端项目是基于Vue的SPA(单页应用程序)项目

前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts

后端技术栈:Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)
2.项目初始化

A.安装Vue脚手架

B.通过脚手架创建项目

C.配置路由

D.配置Element-UI:在插件中安装,搜索vue-cli-plugin-element

E.配置Axios:在依赖中安装,搜索axios(运行依赖)

F.初始化git仓库

G.将本地项目托管到github或者码云中
3.码云相关操作

A.注册登录码云账号

Vue项目实战_第1张图片
B.安装git

在Windows上使用Git,可以从Git官网直接下载安装程序进行安装。

测试命令:git --version

C.点击网站右上角“登录”,登录码云,并进行账号设置
Vue项目实战_第2张图片
D.在本地创建公钥:在终端运行:ssh-keygen -t rsa -C “[email protected]
Vue项目实战_第3张图片
E.找到公钥地址:

Your identification has been saved in /c/Users/My/.ssh/id_rsa.

Your public key has been saved in /c/Users/My/.ssh/id_rsa.pub.

当我们创建公钥完毕之后,请注意打印出来的信息“Your public key has been saved in”

/c/Users/My/.ssh/id_rsa.pub : c盘下面的Users下面的My下面的.ssh下面的id_rsa.pub就是我们创建好的公钥了

E.打开id_rsa.pub文件,复制文件中的所有代码,点击码云中的SSH公钥,将生成的公钥复制到公钥中
Vue项目实战_第4张图片
G.测试公钥:打开终端,输入命令

ssh -T [email protected]
Vue项目实战_第5张图片
H.将本地代码托管到码云中

点击码云右上角的+号->新建仓库
Vue项目实战_第6张图片
I.进行git配置:
Vue项目实战_第7张图片
4.配置后台项目

A.安装phpStudy并导入mysql数据库数据
Vue项目实战_第8张图片
B.安装nodeJS,配置后台项目,从终端打开后台项目vue_api_server

然后在终端中输入命令安装项目依赖包:npm install

C.使用postman测试api接口
Vue项目实战_第9张图片
后续正在开发中

你可能感兴趣的:(html,css,javascript,vue.js,node.js)