万事开头难，一个好的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. odoo datetime 直接修改模版语言 去掉时分秒

    <field name='date_order' widget='date'/> 利用date widget即可使dateime类型的显示为date.

  2. JobScheduler调度器过程（JobSchedulerService的启动过程）

    JobSchedulerService启动过程,最主要工作是从jobs.xml文件收集所有的jobs,放入到JobStore的成员变量mJobSet,转成jobinfo. JobScheduler服务 ...

  3. Parallel Gradient Boosting Decision Trees

    本文转载自:链接 Highlights Three different methods for parallel gradient boosting decision trees. My algori ...

  4. spring cloud开发、部署注意

    一.开发时,配置服务的配置使用本地路径,不使用svn和git,因为后者每个开发人员都会修改配置,导致别人也拿到其他人修改的配置,本地配置示例如下: spring: application: name: ...

  5. Qt中QMenu的菜单关闭处理方法

    Qt中qmenu的实现三四千行... 当初有个特殊的需求, 要求菜单的周边带几个像素的阴影, 琢磨了半天, 用QMenu做不来, 就干脆自己用窗口写一个 然而怎么让菜单消失却非常麻烦 1. 点击菜单项 ...

  6. github绑定自己的域名

    1.进入需要绑定域名的项目里面,然后新建一个文件CNAME,没有后缀的. 2.在文件里面输入你的域名,然后保存.github这边就完成了. 3.然后去你购买域名的网站,进入控制台,找到域名,然后域名解 ...

  7. 百度&高德地图小区景点边界轮廓实现

    经常的我们在使用地图功能时,会发现在选择一个小区或者一个热门景点的时候,地图上面会给出其边界轮廓,能够方便我们知道其范围大小,有时候在我们使用地图组件的时候,也会面临着类似的需求.比如在地图上面标识出 ...

  8. Nginx配置资源下载目录

    访问我的博客 之前在网上找 CentOs 的镜像的时候,发现了阿里云的这个镜像源,速度蛮快的.今天也来搭建一个类似的站,使用 nginx 作为资源下载服务器. 图片详情: 安装 Nginx 参考这篇教 ...

  9. Percona XtraDB Cluster

    简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1.同步复制,事务要么在所有节点提交或不提交. ...

  10. PetaPoco源代码学习--3.Sql类

    PetaPoco对数据库的操作直接使用SQL语句,在代码中进行调用既可以直接传递SQL语句,也可以使用提供的SQL类来获取到SQL语句进行操作,直接传递SQL语句在内部实现中也是封装成Sql类传递到底 ...