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 相关文章推荐
Google AJAX 搜索 API实现代码
Nov 17 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
详解超简单的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
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php生成excel列序号代码实例
2013/12/24 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
详解cordova打包成webapp的方法
2017/10/18 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
Django中几种重定向方法
2015/04/28 Python
python实现用户管理系统
2018/01/10 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
python中有帮助函数吗
2020/06/19 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
安全检查与奖惩制度
2014/01/23 职场文书
超市店庆活动方案
2014/08/31 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS