vue-cli3+typescript初体验小结

前言

气势汹涌，ts似乎已经在来的路上，随时可能敲门。

2015年，三大前端框架开始火爆的时候，我还在抱着Backbone不放，一直觉得可以轻易转到其他框架去。后来换工作，现实把脸都打肿了，没做过vue、react、angular？不要！

今天，不能犯这个错了，毕竟时不我与，都快奔三了。

vue-cli3

vue-cli3的详细功能推荐官方文档，不在本文介绍范围内。

安装：

npm install -g @vue/cli

检查安装成功与否：

vue --version

创建项目：

vue create myapp

可以选择Manually select feature来自由选择功能，常用的有vuex、vue-router、CSS Pre-processors等，我们再把typescript勾上，就可以回车进入下一步了。PS：勾选的操作是按空格键。
创建成功之后，执行启动命令：

npm run serve

就可以通过http://localhost:8080/访问本地项目啦。

typescript

如果没有typescript基础，可以先补补课，大概花三十分钟就可以了解typescript的一些特性，比如：TypeScript 入门教程。
ts最主要的一点就是类型定义，有个概念才好看得懂demo。

vue-property-decorator

这是一个涵盖了vue的一些对象的集合，我们可以从这里取一些东西出来：

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

取出来的这几个属性，分别是 组件定义Component，父组件传递过来的参数Prop，原始vue对象Vue，数据监听对象Watch。还包括这里没有列举出来的Model，Emit，Inject，Provide，可以自己尝试下。

demo

<template> <div class="hello">  <h1>{{ msg }}--{{ names }}</h1>  <input type="text" v-model="txt">  <p>{{ getTxt }}</p>  <button @click="add">add</button>  <p>{{ sum }}</p> </div></template><script lang="ts">import { Component, Prop, Vue, Watch } from 'vue-property-decorator';@Componentexport default class HelloWorld extends Vue { //props @Prop() private msg!: string @Prop() private names!: string //data private txt: string = '1' private sum: number = 0 //computed get getTxt(){  return this.txt } //methods private add(){  this.sum++  console.log(`sum : ${this.sum}`) } //生命周期 created(){  console.log('created') } //watch @Watch('txt')  changeTxt(newTxt: string, oldTxt: string){  console.log(`change txt: ${oldTxt} to ${newTxt}`) } }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped lang="less">h3 { margin: 40px 0 0;}input { width: 240px; height: 32px; line-height: 32px;}</style>