万事开头难，一个好的Hello World程序可以节省我们好多的学习时间，帮助我们快速入门。Hello World程序之所以是入门必读必会，就是因为其代码量少，简单易懂。但我觉得，还应该做到功能丰富，涉及的知识点多。这样才是一个好的初学者入门指引程序。

之所以选择Vue，不仅因为其流行，还因为其轻量化。用过Angular的同学都深有体会，一个简单的Hello World编译后都好几百K，复杂点的将近1M，还是-prod编译。而Vue只有70k左右，加载速度占绝对优势。一个好的Vue前端框架，应该使用TypeScript编写，TS与JS高度兼容，配合VSCode使用很爽的，代码智能提醒，提高编码速度。而且类型化的编程风格，很适合习惯Java和C#的程序员快速适应Web前端开发。还可以使用await/async语法，避免JS的回调地狱式写法。在这个Hello World里会有简单的代码演示，你会一下子喜欢上TS语言。WebPack已经成为前端编译打包的标配，可以做到分离公共代码和应用程序代码，充分利用缓存；可以分模块编译打包，方便按需加载和代码拆分。

此入门程序涉及的知识点：

  • 30行代码实现的简单的路由。为了加入路由功能，而引入过大的包得不偿失。

  • TS代码和模版分开，ts代码写在单独的文件里。使用类型化的编码方式

  • 使用await/async编写异步代码，避免回调嵌套，代码清晰可读性强。如login方法。亲测的编译成es5后，在Chrome/40.0.2214.120以上完全支持。await/async语法借助Typescript得以在浏览器端完美使用。

  • 充分利用webpack的代码分离功能，按需加载，避免生成过大的模块，影响加载速度

　　

  • 利用webpack的代理功能，解决调用远程接口的跨域问题，方便本地调试代码

　　

获取源代码

使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async）的更多相关文章

  1. vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

    各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...

  2. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async）

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  3. 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...

  4. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  5. vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...

  6. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  7. 部署spring boot + Vue遇到的坑（权限、刷新404、跨域、内存）

    部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作L ...

  8. route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  9. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

随机推荐

  1. 此请求已被阻止，因为当用在 GET 请求中时，会将敏感信息透漏给第三方网站。若要允许 GET 请求，请将 JsonRequestBehavior 设置为 AllowGet。

    1.问题描述 mvc从一个路径获取所有的图片信息,ajax方法如下: function getimages(day) { var year = $("#selYear").val( ...

  2. 微软消息队列-MicroSoft Message Queue(MSMQ)队列的C#使用

    目录 定义的接口 接口实现 建立队列工厂 写入队列 获取消息 什么是MSMQ Message Queuing(MSMQ) 是微软开发的消息中间件,可应用于程序内部或程序之间的异步通信.主要的机制是:消 ...

  3. IDEA阅读spring源码并调试

    目标:搭建起Spring源码阅读和代码调试跟踪的环境,顺便建立一个简单的Demo,能够调试Spring的源代码 本节,主要介绍一下Spring源码阅读和调试的相关环境搭建,并使用MVN创建一个非常简单 ...

  4. eclipse如何安裝JPA 和Data Source Explorer

    安裝Data Source Explorer https://blog.csdn.net/XIAOZHI0999/article/details/61199801?utm_source=blogxgw ...

  5. python数据分析及展示（二）

    一.Matplotlib库入门 1. Matplotlib库的介绍 http://matplotlib.org/gallery.html可查看Matplotlib库的效果 Matplotlib库由各种 ...

  6. 关于vb编程之字符串连接/拼接的方法与技巧

    在VB中,笔者知道的字符串的拼接方法主要有两种拼接符号,一种为"&"符,另一种则为"+"符 一.其中&连接运算符用于强制将两个表达式作为字符串连 ...

  7. webpack使用小记

    前言 webpack是目前前端开发必不可少的一款模块加载器兼构建工具,它能极其方便的处理各种资源的打包和使用, 让前端开发获得与后端开发几乎一致的体验. webpack特点 webpack 是以 co ...

  8. 死锁的原因及解决办法RLock递归锁

    死锁 说到死锁,可以讲一个科学家吃面的问题: 有几个科学家在一张桌子旁,桌子上只有一把筷子和一碗面,我们将面和筷子都加锁.这是可能会导致一个科学家抢到面,另一个科学家抢到筷子,这是就全部阻塞了,这就是 ...

  9. Java设计模式系列 — 构造器模式

    想象下你有一个类,像下图所示有许多属性.假设你想让你的类不可变(顺便说一下,除非有一个好的理由不这样做,否则你应该坚持.但是我们会以另一种方式来达到要求.) public class User { p ...

  10. vim 多窗口操作

    1.打开多个窗口打开多个窗口的命令以下几个:横向切割窗口:new+窗口名(保存后就是文件名) :split+窗口名,也可以简写为:sp+窗口名纵向切割窗口名:vsplit+窗口名,也可以简写为:vsp ...