跳至主要內容
1.项目框架搭建

项目框架搭建说明

1.项目开发说明

【1】项目概述

根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、 移动 Web 、微信小程序等多种终端访问方式

image-20200609101619434

【2】功能、页面原型


holic-x...大约 3 分钟Vue框架VueBUG
2.登录注册模块

登录注册模块搭建

1.前台页面搭建

清理不必要的组件,构造自己的项目。只需要保留App.vue根组件即可,其他多余不用的组件可以直接清理

image-20200609142843939

image-20200609143116093


holic-x...大约 6 分钟Vue框架VueBUG
API 接口文档

1.1. API V1 接口说明

  • 接口基准地址:http://127.0.0.1:8888/api/private/v1/
  • 服务端已开启 CORS 跨域支持
  • API V1 认证统一使用 Token 认证
  • 需要授权的 API ,必须在请求头中使用 Authorization 字段提供 token 令牌
  • 使用 HTTP Status Code 标识状态
  • 数据返回格式统一使用 JSON

holic-x...大约 20 分钟Vue框架VueBUG
1.Windows下Vue环境配置

一.Vue环境搭建参考

Angular5:https://www.itying.com/goods-232.html

Nodejs+Express基础全部免费:https://www.itying.com/goods-240.html

Koa2教程 :https://www.itying.com/goods-800.html

Ionic3仿京东项目实战视频教程:https://www.itying.com/goods-460.html

cnpm 下载包:地址:http://npm.taobao.org/


holic-x...大约 6 分钟Vue框架Vue配置
2.常见Vue环境配置问题

常见vue项目启动问题

【1】引入已有项目启动报错

在引入已有项目的时候,如果变更了项目之前的内容(删除原有的项目后重新引入同名的项目),启动报错(考虑是缓存的问题,需要重新清理相关的内容后重新引入依赖再启动尝试)

image-20200607232722679 Step1:npm cache clean --force Step2:rm -rf node_modules // rimraf xxxx Step3:rm -rf package-lock.json Step4:npm install npm install 成功之后再次启动 npm start


holic-x...大约 2 分钟Vue框架VueBUG
VUE基础-进阶篇

1.自定义组件

​ 基于对Element组件的学习,所谓组件其实就是一个自定义标签概念(可以理解为对元素的封装)。本质上,组件是可复用的 Vue 实例,可通过自定义方式实现

定义格式参考

Vue.component(组件名称, {
 	props:组件的属性,
 	data: 组件的数据函数,
 	template: 组件解析的标签模板
})

holic-x...大约 4 分钟Vue框架Vue
VUE基础-概念篇

1.Vue基本概念

​ Vue是一套构建用户界面的渐进式前端框架。它只关注视图层,通过尽可能简单的API来实现响应数据的绑定和组合的视图组件,可以很方便的与其它库或已有项目整合。

【1】Vue特点

  • 易用:在已有HTML、CSS、JavaScript的基础上可以快速上手
  • 灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用
  • 性能:20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化

【2】Vue开发说明

​ 简单的Vue样例开发:


holic-x...大约 15 分钟Vue框架Vue