美文网首页转载的~vuevue
vue-login 通过一个小项目带你走进vue全栈开发

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

作者: 羸弱的小金鱼 | 来源:发表于2017-03-23 16:58 被阅读1951次

    这是一个基于 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。一定会事半功倍。希望和大家共同进步。

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

    相关文章

      网友评论

      • 爱浪的小伙子:老铁,这个假如在本地运行,是要创建自己的用户名,还是用你的用户名?
      • 藏在车底的阿杜:node 怎么设置 mongodb的数据保存到一个网址api上,通过输入网址得到json字符串,我前端vue axios ,后端express mongoose

      本文标题:vue-login 通过一个小项目带你走进vue全栈开发

      本文链接:https://www.haomeiwen.com/subject/hqdtottx.html