vue-cli3+typescript初体验小结

2020-06-13 10:42:17易采站长站整理

前言

气势汹涌,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';

@Component
export default class HelloWorld extends Vue {