<small id='xtSzV4'></small> <noframes id='QcMGSgia'>

  • <tfoot id='wuR4ZCm'></tfoot>

      <legend id='vLHKD7'><style id='GYCrPRi'><dir id='e6MaRW'><q id='1ONfVp5Tlz'></q></dir></style></legend>
      <i id='Zpkbl45UC'><tr id='pk8Xl'><dt id='MKkjLWx71'><q id='hnUGf8'><span id='9S1zvEP'><b id='X5P7b2xvh'><form id='Eni4PWl'><ins id='jGFOWk'></ins><ul id='skmeWHAbc'></ul><sub id='WTUyEb'></sub></form><legend id='Hm1Qivs'></legend><bdo id='pJDfSZL6'><pre id='ijXuzsf7'><center id='k4FJDsptu'></center></pre></bdo></b><th id='WPku1'></th></span></q></dt></tr></i><div id='kwRLZ51u'><tfoot id='QTAnj2tcSK'></tfoot><dl id='2BUO1Zc8'><fieldset id='T3wHu'></fieldset></dl></div>

          <bdo id='PCAqnpldK'></bdo><ul id='MEr9DFAZm8'></ul>

          1. <li id='VOBR'></li>
            登陆

            前端高档开发工程师修炼攻略

            admin 2020-02-14 135人围观 ,发现0个评论

            导言

            假如你想成为一名专业的JavaScript开发人员,那么除了把握JavaScript之外,至少还应该具有一些其他结构和库的开发经历。本文收集了9个不同的项目,其间每个项目都运用了不同的JavaScript结构或库,信任经过操练,你必定广播剧能够成为2020年的前端开发大师!

            不管你是编程新手仍是经历丰富的开发人员,已然踏入这个职业,你就有必要不断学习新概念和言语/结构,才干跟上这个国际瞬息万变的脚步。以React为例,4年前Facebook开源了React,随后它成为了全球JavaScript开发人员的首选。可是,Vue和Angular也不甘落后。再到后来的Svelte、以及Next.js或Nuxt.js等通用结构,还有Gatsby、Gridsome、Quasar等等。

            假如你想成为一名专业的JavaScript开发人员,那么除了把握JavaScript之外,至少还应该具有一些其他结构和库的开发经历。

            为了协助你成为2020年的前端开发大师,我收集了9个不同的项目,其间每个项目都有不同的主题,并运用了不同的JavaScript结构或库,期望你能测验构建这些项目,并树立自己的展现效果。请记住,坐而论道并没有太大好处,不如现在就开端着手,逐一霸占这些难题!

            1. 运用React构建电影查找运用

            首要,你能够用React构建一款电影查找运用。该运用终究大致如下:

            你能前端高档开发工程师修炼攻略够学习到的技能

            构建这个运用程序能够让你更进一步把握React以及新式的Hooks 前端高档开发工程师修炼攻略API。上图中的项目运用了React组件、许多钩子、一个外部API、当然还有一些CSS款式。

            技能栈与功用

            • React与钩子
            • 创立React运用
            • JSX
            • CSS
            这个项目不需要运用任何类,能够为你供给一个触摸函数式React的完美关键,并协助你在2020年进步自我。教程链接私信我!


            2. 运用Vue构建谈天运用

            另一个很棒的项目是运用我最喜爱的JavaScript库VueJS构建谈天运用。该运用大致如下:

            你能够学习到的技能

            你能够跟从如下教程学习怎么从头开端设置Vue运用、创立组件、处理状况、创立路由、连接到第三方服务以及处理身份验证。

            技能栈与功用

            • Vue
            • Vuex
            • Vue Router
            • Vue CLI
            • Pusher
            • CSS
            这是一个十分超卓的项目,既能够协助你入门Vue,也能够进步你的技能力以应对2020年的开发。教程链接私信我!


            3. 运用Angular 8构建一款美丽的天气预报运用

            该运用能够协助你运用Google的Angular 8构建一款美丽的天气预报运用:

            你能够学习到的技能

            该项目能够教你一些厚实的技能,包含从头开端创立运用,从规划到开发,一直到出产布置。

            技能栈与功用

            • Angular 8
            • Firebase
            • 服务器端烘托
            • CSS、Grid Layout和Flexbox
            • 人性化规划、呼应式移动运用
            • 夜间形式
            • 美丽的UI

            这是一个归纳项目,你能够触摸到从规划到终究布置的整个开发进程。教程链接私信我!

            4. 运用Svelte构建待办事项运用

            与React,Vue和Angular比较,Svelte是一款新式的结构,但仍是2020年的热门话题之一。尽管待办事项这类的运用有点老套,但这个项意图确能够协助你进一步把握Svelte。该运用大致如下:

            你能够学习到的技能

            该教程将向你展现怎么运用Svelte 3制造运用的整个进程。它运用了组件、款式和事情处理程序。

            技能栈与功用

            • Svelte 3
            • 组件
            • 经过CSS设置款式
            • ES 6语法

            优异的Svelte入门项目不是许多,因而我以为如下教程是一个很好的起点。或许你能够创立另一个更全面的Svelte教程,然后展现给咱们?

            5. 运用Next.js构建电子商务购物车

            NextJs是最受欢迎的结构,你能够运用该结构创立支撑服务器端烘托的开箱即用的React运用。该项目将向你展现怎么构建如下所示的电子商务购物车:

            你能够学习到的技能

            在这个项目中,你将学习怎么设置Next.js开发环境,创立新页面和组件,获取数据,款式以及布置下一个运用程序。

            技能栈与功用

            • Next.前端高档开发工程师修炼攻略js
            • 组件和页面
            • 获取数据
            • 款式
            • 布置方法
            • SSR和SPA
            经过一个实在的比如(例如电子商务购物车)学习新技能的方法一般都会深得人心。


            6. 运用Nuxt.js树立一个完好的多言语博客网站

            Nuxt.js与Vue的联系就好象Next.js与React。一个好的结构能够结合服务器端烘托和单页运用程序的功用。该运用终究大致如下:

            你能够学习到的技能

            这个示例项目将教你怎么运用Nuxt.js,从初始设置到终究布置构建完好的网前端高档开发工程师修炼攻略站。这个项目运用了Nuxt有必要供给的许多超卓功用,例如页面、组件以及SCSS款式。

            技能栈与功用

            • Nuxt.js
            • 组件和页面
            • Storyblok模块
            • 混合组件
            • Vuex的状况办理
            • SCSS款式
            • Nuxt中间件

            这个项目十分炫酷,其涵盖了许多Nuxt.js的超卓功用。我个人十分喜爱运用Nuxt,所以你也应该试试看,期望经过这个项目你能够看生长为更超卓的Vue开发人员!

            7. 运用Gatsby树立博客

            Gatsby是一个超卓的静态站点生成器,其底层运用React和GraphQL。该项意图成果大致如下:

            你能够学习到的技能

            在这个教程中,你将学习怎么运用Gatsby构建超卓的博客,其实就相当于你运用React和GraphQL编写自己的博文。

            技能栈与功用

            • Gatsby
            • React
            • GraphQL
            • 插件和主题
            • MDX /Markdown
            • Bootstrap CSS
            • 模板

            假如前端高档开发工程师修炼攻略你想创立一个博客,那么能够经过这个比如来学习怎么运用React和GraphQL创立博客网站。我并不是说挑选Wordpress欠好,可是你能够运用Gatsby,创立高性能的React网站!

            8. 运用Gridsome树立博客

            Gridsome与Vue的联系嘛……咱们已经在介绍Nuxt的时分拿Next做类比了,可是Gridsome和Gatsby也是如此。两者都运用GraphQL作为数据层,只不过Gridsome运用VueJS。Gridsome是一个十分超卓的网站生成东西,它能够协助创立优异的博客:

            你能够学习到的技能

            这个项目将教你怎么运用Gridsome、GraphQL和Markdown构建一个简略的博客,它还介绍了怎么经过Netlify布置运用程序。

            技能栈与功用

            • Gridsome
            • Vue
            • GraphQL
            • Markdown
            • Netlify

            当然,如下教程并不是很全面,但它涵盖了Gridsome和Markdown的基本概念,能够作为一个很好的起点。

            9. 运用Quasar构建类似于SoundCloud的音频播放器运用

            Quasar是另一个Vue结构,也可用于构建移动运用程序。在这个项目中,你将创立一个音频播放器运用,如下所示:

            你能够学习到的技能

            上述其他项目首要重视Web运用程序,但该项目将向你展现怎么经过Quasar结构运用Vue创立移动运用。在这个项目开端之前,你应该装备好Cordova,并装备了android studio / xcode。假如没有的话,那么能够点击教程中的链接,翻开quasar网站,学习怎么设置。

            技能栈与功用

            • Quasar
            • Vue
            • Cordova
            • Wavesurfer
            • UI组件

            这是一个小项目,首要展现了Quasar在构建前端高档开发工程师修炼攻略移动运用方面的强壮功用。

            总结

            在本文中,我展现了9个你能够测验构建的项目,其间每个项目都专心于不同的JavaScript结构或库。接下来,挑选权在你手中:你是否乐意测验从未用过的结构?仍是说2020年你期望在所有的项目中持续吃老本?

            更多前端常识欢迎谈论区留言或私信我!

            本文九个项目教程链接因头条规矩原因无法参加

            链接地址获取重视大众号:fkdcxy 张狂的程序员丶

            请关注微信公众号
            微信二维码
            不容错过
            Powered By Z-BlogPHP