使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)
万事开头难,一个好的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)的更多相关文章
- vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...
- 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...
- vue中的懒加载和按需加载
懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...
- vue按需加载组件-webpack require.ensure
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...
- 部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)
部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作L ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
随机推荐
- C语言 · 数字黑洞
算法提高 数字黑洞 时间限制:1.0s 内存限制:256.0MB 问题描述 任意一个四位数,只要它们各个位上的数字是不全相同的,就有这样的规律: 1)将组成该四位数的四个数字由大到小 ...
- 【javascript】定时器组件
'use strict'; module.exports = function() { this.timer = {}; this.config = {}; // 初始化参数 this.init = ...
- Linux iptables原理和使用
1.原理 iptables简介 netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,它可以代替昂贵 ...
- (笔记)一场由SD卡引发的灾难
一场由SD卡引发的灾难 注:此文章转自“https://user.qzone.qq.com/63915185/blog/1512562541”. Flash里面的数据在使用过程中莫名改变或不翼 ...
- MyBatis Plus:No qualifying bean of type 'com.baomidou.mybatisplus.mapper.BaseMapper<?>' available: expected single matching bean but found 4
场景: 应用MyBatis Plus 和通用Mapper 继承自ServiceImpl实现对Service里的方法进行包装再处理. public interface IServiceBase2< ...
- react服务端渲染同构报错Browser history needs a DOM
https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..
- thinkphp3.2在nginx下的配置
最近一直没用nginx 昨天将tp3.2的项目部署到Ubuntu下的nginx下,发现忘记怎么配置的了 特将配置方式记录下来,以方便日后查找 服务器nignx 配置文件 server { listen ...
- Vivado Design Suite用户指南之约束的使用第二部分(约束方法论)
Constraints Methodology(约束方法论) 关于约束方法论 设计约束定义了编译流程必须满足的要求,以使设计在板上起作用. 并非所有步骤都使用所有约束在编译流程中. 例如,物理约束仅在 ...
- 开发环境使用docker 快速启动 单机 RocketMq
镜像说明 https://cr.console.aliyun.com/?spm=5176.2020520001.1001.8.kpaxIC&accounttraceid=176ddc4e-62 ...
- 管理菜单 结贴回复 来自 202.112.36.253 的回复: TTL 传输中过期
发表于 2010-08-26 18:29:14 楼主 其实标题是我执行如下命令时的输出:C:\Users\ChenWeiguang>ping 218.198.81.190 正在 Ping 218 ...