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实现打开本地文件或文件夹
Mar 09 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
js实现京东轮播图效果
Jun 30 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
原生JavaScript实现刮刮乐
Sep 29 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简单命令代码集锦
2007/09/24 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
jquery 上下滚动广告
2009/06/17 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
python创建进程fork用法
2015/06/04 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python实现飞机大战
2018/09/11 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
业务部门经理岗位职责
2014/02/23 职场文书
小学生安全保证书
2015/05/09 职场文书