万事开头难，一个好的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的代理功能，解决调用远程接口的跨域问题，方便本地调试代码

　　

获取源代码

Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async）的更多相关文章

  1. vue项目按需加载的3种方式

    本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...

  2. 在webpack自定义配置antd的按需加载和修改主题色

    最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...

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

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

  4. React（九）create-react-app创建项目 + 按需加载Ant Design

    (1)create-react-app如何创建项目我前面第一章介绍过了,这里就不过多写了, (2)我们主要来说说按需加载的问题 1. 引入antd npm install antd --save 2. ...

  5. webpack：代码分割与按需加载

    代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 代码中总有些东西我们希望拆分开来,比如: 使用概率较低的模块,希望后期使用的时候异步加载 框架代码,希望能利用浏 ...

  6. webpack css模块化和ant-design按需加载冲突

    其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用exclude将node_module目录下的文件排除,网上有很多相关例子,但不知是不是因为时间久远,都不生效,无 ...

  7. 快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  8. 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async）

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

  9. vue项目实现按需加载的3种方式：vue异步组件技术、es提案的import()、webpack提供的require.ensure()

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

随机推荐

  1. (转）Python自动化运维之13、异常处理及反射(__import__,getattr,hasattr,setattr)

    原文:http://www.cnblogs.com/xiaozhiqi/p/5778856.html https://blog.csdn.net/zong596568821xp/article/det ...

  2. WebStorm project 打开多个项目的方法

    File ---> Setting ---> Project:xxx ---> Sirectories 点击右侧  + Add content root,选择目录后即可显示该项目. ...

  3. Java 调用系统命令

    ProcessBuilder import java.io.File; import java.io.IOException; import java.io.InputStream; import j ...

  4. 有意思的App

    掘金 javadoop 专业相机也羡慕奖 – Focos 说个睡前故事 so easy 奖 – 洪恩双语绘本 效率蹭蹭上升奖 – Sorted³ 时光隧道走一回奖 – NOMO 相机 设计师也爱用奖 ...

  5. 用Elasticsearch做大规模数据的多字段、多类型索引检索

    本文同时发布在我的个人博客 之前尝试了用mysql做大规模数据的检索优化,可以看到单字段检索的情况下,是可以通过各种手段做到各种类型索引快速检索的,那是一种相对简单的场景. 但是实际应用往往会复杂一些 ...

  6. Java 范例 - 线程

    创建线程 Java 中有以下三种方式创建线程,其中前两种无法获取返回值,而最后一种可以获取返回值. 实现 Runnable 接口 继承 Thread 类 通过 Callable.Future 接口配合 ...

  7. SPI(Service Provider Interface)机制

    JAVA SPI 约定如下:当服务的提供者提供了服务接口的一种实现之后,在jar包的META-INF/services/ 目录中同时创建一个以服务接口命名的文件,该文件中的内容就是实现该服务接口的具体 ...

  8. ELK之filebeat

    1.概述 filebeat使用go语言开发,轻量级.高效.主要由两个组件构成:prospector和harvesters. Harvesters负责进行单个文件的内容收集,在运行过程中,每一个Harv ...

  9. ArcGIS紧凑型切片读取与应用3-紧凑型批量转分散型(附源码)

    1.前言 上篇介绍了webgis动态加载解析紧凑型切片的例子,现在我们使用逆向思维实现紧凑型切片转分散型切片,在实际工作中很有用处,紧凑型切片易于拷贝,但读取只有部署到Arcgis Server才行. ...

  10. springboot+cloud 学习（一）高可用服务注册中心（Eureka）

    先说说Eureka Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.SpringClo ...