vue-cli3+typescript初体验小结


Posted in Javascript onFebruary 28, 2019

前言

气势汹涌,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。还包括这里没有列举出来的ModelEmitInjectProvide,可以自己尝试下。

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 {
 //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>

以上就是demo,代码组织有点散,没有原来js书写的整齐。

这个demo没有引入组件,如果需要引入组件,应该这样书写:

<template>
 <div class="home">
  <img alt="Vue logo" src="../assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" names="aaa" />
  <HelloWorld2 msg="Welcome to Your Vue.js + TypeScript App" names="bbb" />
 </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import HelloWorld2 from '@/components/HelloWorld2.vue'; // @ is an alias to /src

@Component({
 components: {
  HelloWorld,
  HelloWorld2,
 },
})
export default class Home extends Vue {}
</script>

结语

如果VSCode编辑器有警告提示,比如:

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

可以把工作区其他的项目移除,或者把本项目拖动到工作区的首位,或者在把本项目的tsconfig.json复制到工作区首位的项目的根目录下,重启编辑器,有比较大的概率可以解决警告提示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 #Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 #Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 #Javascript
详解写好JS条件语句的5条守则
Feb 28 #Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 #Javascript
jQuery.parseJSON()函数详解
Feb 28 #jQuery
js获取form表单中name属性的值
Feb 27 #Javascript
You might like
php下载远程文件类(支持断点续传)
2008/11/14 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP 断点续传实例详解
2017/11/11 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
发现的以前不知道的函数
2006/09/19 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python中的默认参数详解
2015/06/24 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python pandas库的安装和创建
2019/01/10 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
python的help函数如何使用
2020/06/11 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
ASP.NET Core中的配置详解
2021/02/05 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
2014全国两会大学生学习心得体会
2014/03/10 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS