前端小白也能开发vue电商项目（1） 注册与登录

image

   作为前端的初学者，学一个前端框架是必不可少的。因为对于新手而言，VUE相较于REACT更容易上手，所以作者选择
了VUE。如果你正好也想学一个框架，那你走运了哦。跟着作者一起来发开发一个简单的电商项目，来学习VUE吧！

这是一个基于 vue & axios & mock & token & stylus & Cube-UI的电商项目demo，面向 vue 初学者，场景虽简单，但五脏俱全。涵盖非常多的vue及其相关技术的基本操作。有详细的注释，帮助大家快速上手 vue 。且我整理了一些在vue开发过程中，有可能会用到的技术文章，希望大家能在这些前辈们身上有所收获。

当然如果您觉得这篇文章or这个项目对您的学习有所帮助，请不吝点个star鼓励一下，当然如果存在问题，也非常希望您能跟我留言，一起学习，共同进步。

Github地址

• vue-jingdong (不要吝惜你的小星星哦)
• 话不多说上效果图

image

项目技术栈

• 前台：vue & vue-router & vuex & vue-cli(webpack) & Cube-UI
• 后台：mock(用mock写模拟api)
• 前后台交互：axios
• 单点登录：token

学习VUE项目开发推荐阅读

此处有引用大佬赢弱小金鱼的博客文章

1. vue-cli 生成项目主体框架
   • vue-cli官方文档
2. vue 全家桶
   • vue.js
   • vue-router
   • vuex
3. axios前后台交互

   vue 和 node 的交互还是主要采用 ajax 来进行，此处就介绍一个主流交互工具 axios，当然别的工具例如 vue-resource、jquery 都可以。但是 vue-resource 不维护了，jquery如果只是为了 ajax 就引入又太庞大，所以我个人是比较推荐axios
   - axios全攻略-大佬小金鱼写的

4. token
   • Token 认证的来龙去脉
   • 单页应用 - Token 验证
5. 模拟后端mock

   Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：根据数据模板生成模拟数据，模拟 Ajax 请求，生成并返回模拟数据，基于 HTML 模板生成模拟数据

   • Mock.js - 能造数据的Mock才是好Mock
   • 浅谈mock
6. 来自滴滴的CUBE-UI

   随着 vue 的不断发展，社区越来越活跃，因此产生了许多组件库。由于滴滴的这个组件没有停止更新和维护，特别适合开发上线项目，所以我们这里选择Cube-UI。
   - Cube-UI文档

---

正文部分

  学了那么多文章，一定进步不少吧。让我们来进行实战开发，进行应用。一起来吧，先苦后甜！

项目结构

image

引入Cube-UI并使用

 npm install cube-ui --save

安装后会自动出现cube-ui.js

import Vue from 'vue'
import Cube from 'cube-ui'

Vue.use(Cube)

下面我们来使用它

我们来写注册页面