vue-login 通过一个小项目带你走进vue全栈开发

这是一个基于 vue & axios & nodejs(express) & mongodb(mongoose) 的登录/注册demo,面向 vue 初学者,场景虽简单,但五脏俱全。有前后台,涵盖非常多的 vue 及其相关技术的基本操作。有详细的注释,帮助大家快速上手 vue 。且我整理了一些在vue全栈开发过程中,有可能会用到的技术文章,希望大家能在这些前辈们身上有所收获。

当然如果您觉得这篇文章 or 这个项目对您的学习有所帮助,请不吝点个 star 鼓励一下,当然如果存在问题,也非常希望您能提交 issues 或者在 我的博客任意文章下留言,我会及时处理回复,和大家一起进步。

项目Github地址


项目技术栈


  • 前台:vue & vue-router & vuex & vue-cli(webpack) & element-ui
  • 后台: nodejs (express)
  • 前后台交互: axios
  • 单点登录: jsonwebtoken

Build Setup


# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# start server
node server.js

# start mongodb
mongod

项目开发推荐阅读


因为项目难度并不是很高,且我也在代码中写了较多注释,所以我不会细节到行去解释代码,而是会搜集、分享一些前辈们书写的相关技术文章,相信大家踩在巨人的肩膀上,能学到更多。

1. vue-cli 生成项目主体框架

使用 vue-cli 的优点是方便快捷,能快速生成项目的主体结构。但不能一味依赖这种开发方式,还是要了解其中的技术细节。此处推荐几篇文章:

2. vue 全家桶

顾名思义就是我们熟知的 vue + vue-router + vuex + … ,
虽然还有很多的组件,但是基础都是 前三个。这块儿首推官方文档,我个人认为 vue 的成功除开自身素质过硬外,最大的优势就是文档写的非常的浅显易懂!所以学 vue 一定要多读官方文档。此处放出连接:

当然掘金上也有许多的详解文章,也推荐大家去看看。

3. 后台服务端

后台主要作用是接收前台请求,处理完成后返回一个含有所需数据或状态的api接口,供前台去调用。这需要你了解熟悉 nodejs 或任意一种后端语言,以 nodejs 为例,有以下文章推荐你去阅读:

4. axios前后台交互

vue 和 node 的交互还是主要采用 ajax 来进行,此处就介绍一个主流交互工具 axios,当然别的工具例如 vue-resource、jquery 都可以。但是 vue-resource 不维护了,jquery如果只是为了 ajax 就引入又太庞大,所以我个人是比较推荐axios。此处久推荐这几篇文章吧:

5. jsonwebtoken

此项目使用 jsonwebtoken 进行用户认证,其实 jsonwebtoken 也可以用来做权限控制或者向Web应用传递信息。关于 jsonwebtoken 除了它的官方文档外,还有这几篇文章可以看看:

6. 组件库

随着 vue 的不断发展,社区越来越活跃,因此产生了许多组件库,此处我就推荐一个我个人使用的最多的由饿了么团队开发的组件库element-ui。

7. demo

开发其实除了冥思苦想外,很多时候要多读别人的源码,从中才能有所启发。放出几个demo:

后记

当然纸上学来终觉浅,绝知此事要躬行。学完理论就需要去实践,所以希望大家多多去看看别人的代码,然后写写小demo。一定会事半功倍。希望和大家共同进步。

然后我无意发现有人未经过我同意就转发我的文章。而且未出现任何我的相关信息。我的观点是我写文章是为了方便大家,督促自己,所以转就转了,不需要我的同意,但是哪怕不出现我的名字,也请务必注一个 字,不要把他当作自己的文章来用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,389评论 25 707
  • 寒风凛冽,丝丝寒意透过窗纸的缝隙,吹入一间略有些破旧的木屋内,而屋内的一大一小两个人,却都毫无察觉一般。 映入眼帘...
    洌飞羽阅读 421评论 0 1
  • 袁锦瑶最怕-----打针、吃药、黄鼠狼和老鼠。我们大人有时候很自以为是的聪明,知道小孩怕什么就常常利用他们最怕的东...
    tammy213阅读 168评论 0 1