万事开头难，一个好的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的web服务器

    1.浏览器请求动态页面过程 2.WSGI Python Web Server Gateway Interface (或简称 WSGI,读作“wizgy”). WSGI允许开发者将选择web框架和web ...

  2. Redis开发与运维

    常用命令 redis-server启动redis redis-server /opt/redis/redis.conf    配置启动 redis-server --port 6379 --dir / ...

  3. Linux下解决高并发socket最大连接数限制，tcp默认1024个连接

    linux作为服务器系统,当socket运行高并发TCP程序时,通常会出现连接建立到一定个数后不能再建立连接的情况 本人在工作时,测试高并发tcp程序(GPS服务器端程序),多次测试,发现每次连接建立 ...

  4. Solidity中如何判断mapping中某个键是否为空呢？

    Solidity中如何判断mapping中某个键是否为空呢? 一.比较标准的做法是建立一个专门和value相关的结构体,用一个布尔型变量来看是否这个key所对应的value被赋过值 代码如下: pra ...

  5. T-SQL 分布式查询

    --返回本地服务器中定义的链接服务器列表. EXEC sys.sp_linkedservers /* 创建或更新 SQL Server 本地实例上的登录名与远程服务器中安全帐户之间的映射. 当用户登录 ...

  6. k8s使用nfs动态存储

    1.Kubernetes集群管理员通过提供不同的存储类,可以满足用户不同的服务质量级别.备份策略和任意策略要求的存储需求.动态存储卷供应使用StorageClass进行实现,其允许存储卷按需被创建.如 ...

  7. 你的网站升级https了吗

    升级 HTTPS,价值何在? HTTPS 实质上是一种面向安全信息通信的协议.从最终的数据解析的角度上看,HTTPS 与 HTTP 没有本质上的区别.对于接收端而言,SSL/TSL 将接收的数据包解密 ...

  8. VS2010 调试C++项目 fatal error LNK1123 错误解决办法

    最近用VS2010写C++项目,奇怪的是每次生成解决方案都有一个fatal error LNK1123错误,提示生成失败.查阅资料总结解决方案如下: (1)项目——>属性——>连接器——& ...

  9. Jquery停止动画

    stop方法 第一个参数:是否清除动画队列 true | false 第二个参数:是否跳转到动画最终效果   true | false 使用stop()方法的技巧 当下拉菜单和手风琴产生动画队列的问题 ...

  10. 检测锁及死锁详细信息，及sql语句

    SELECT SessionID = s.Session_id, l.request_session_id spid, a.blocked, a.start_time, a.ecid, OBJECT_ ...