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 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 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
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
jquery 选择器部分整理
2009/10/28 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
简单介绍Python中的JSON使用
2015/04/28 Python
Python set常用操作函数集锦
2017/11/15 Python
python实现猜单词小游戏
2020/05/22 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
师生聚会感言
2014/01/26 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
实习单位鉴定意见
2015/06/04 职场文书
大学同学聚会感言
2015/07/30 职场文书