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 CSS 修改学习第四章 透明度设置
Feb 19 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
vue开发简单上传图片功能
Jun 30 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
第九节 绑定 [9]
2006/10/09 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JavaScript中this详解
2015/09/01 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
教师四风问题整改措施
2014/09/25 职场文书
综合管理员岗位职责
2015/02/11 职场文书
停课通知书
2015/04/24 职场文书
运动会新闻报道稿
2015/07/22 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python