Vue.js 十五分钟入门

TypeScript 为 JavaScript 带来静态类型检查，让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误。

Vue 很早就支持 TypeScript，但配置起来比较麻烦，幸好有了 Vue CLI 3.0。安装好 vue-cli 之后，使用 vue create 项目名称 来创建项目，vue 脚本手架自动创建以项目名称命名的目录。

vue-cli 3 生成的项目结构比较科学，尤其是通过 components 和views 将作为控件的组件和作为页面的组件分离开来，结构更清晰。可以理解为 views 中定义的组件是要配置在路由中的，而 componets 中定义的组件是被其它组件调用的。

HTML 需要定义一个

作为 Vue 应用的容器，main.ts 中会通过 new Vue(…) 生成应用实例并将之与容器绑定。注意 HTML 中定义的

会被 App.vue 模板中定义的

…

替换掉。

Vue 是一个组件化的框架，组件是 Vue 的基本元素。一个 Vue 应用是由若干组件构成的，组件与组件之间的嵌套或并列关系，最终可以用树形来表示。main.ts 中创建的 Vue 实例是最顶层组件。
每个 Vue 组件都有三个组成部分，即骨架（HTML）、样式（CSS/LESS/SCSS）和脚本（JavaScript/TypeScript）。可以在一个 .vue 文件中写完三个部分，也可以将样式和脚本部分分别写成独立的文件。笔者推荐独立文件的方式。