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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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
超级简单的发送邮件程序
2006/10/09 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python迭代和迭代器详解
2016/11/10 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
pip install命令安装扩展库整理
2021/03/02 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
家电创业计划书
2019/08/05 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
python内置模块之上下文管理contextlib
2022/06/14 Python