一、创建项目
vueTypeScript创建项目和vue创建项目时一样的(首先你要有vue-cli3版本)
(2)vue-cli查看
npm install vue-cli -g
1、vue-cli的版本查看(注意-V大写)
vue -V
2、vue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的
npm install @vue/cli -g
3、如果之前已经安装了,先卸载再安装新的
npm uninstall vue-cli -g
4、使用命令查看webpack配置,注意vue必须是3.0+以上版本
vue inspect > output.js
vueTypeScript安装
- 选择创建模式
vue create ts-temp//ts-temp是项目名称
2.手动选择特性(上下箭头移动、空格选择、回车完成)
3.接下来会选择一些配置(y-是、n-否)
(1)、是否使用类样式组件语法?
(2)、是否将babel与typescript一起使用?
(3)、路由是否使用history模式(默认hash模式)
(4)、选择css预编译方式,我选的是Sass/SCSS (with node-sass)
(5)、选择一个语法检测配置,选择TSLint
(6)、选择语法检查方式,选择Lint on save
(7)、你希望babel、postcss、eslint等的配置文件放在哪?选择In dedicated config files
(8)、将此保存为将来项目的预设?随意选,我选的n
二、项目的简单运用
简单的文件介绍
所有的js文件变成了ts文件其次在main.ts里面引用了(是阻止显示生产模式的消息)
语法的运用
定义数据、事件绑定
<template>
<div class="home">
{{ msg }}
<p><button @click="add">添加</button></p>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";//Component|Vue必须引入
@Component //引入组件的时候可是使用这个
export default class Home extends Vue {
public msg: string | number = "tan";//规定了这个属性的类型
// methods方法 省略了 methods 可以直接写方法
public add(): void {
this.msg += "1";
}
// 事件监听 事件监听后面必须写一个函数进行监听 否则会报错
}
</script>
事件监听
<template>
<p>监听:{{ count }} ,结果:{{ watchMsg }}</p>
<button @click="addCount">监听</button>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
@Component
export default class Home extends Vue {
public watchMsg: string = "开始";
public count: number = 0;
//这里是监听的事件(属性变化)
addCount(): number {
return this.count++;
}
@Watch("count") //这个监听的就是count 值的变化
Msg(counts: number) { //counts这个只是一个变量 用来下面的监听判断
if (counts < 10) {
this.watchMsg = "我是数字" + counts;
} else {
this.watchMsg = "我会增长";
}
}
}
</script>
组件传值(父传子)
(1)父组件
<template>
<div class="home">
<!-- 引入的组件-->
<HelloWorld :msg="msg" />
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import HelloWorld from "../components/HelloWorld.vue"; //这个路径是自己编写的
@Component({
components: {
HelloWorld, //需要在这里抛出组件 让其在页面能都调用
},
})
// 生命周期之前定义省略了(,) 生命周期和之前的执行顺序一样
export default class Home extends Vue {
public msg: string | number = "tan";
}
</script">
(2)子组件
<template>
<div class="hello">
<h1>{{ msg }}</h1> //页面就能拿到值
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string; //这个就是父组件传过来的值
//这里要想拿到值就需要this来获取和2获取的时候一样
}
</script>
一些常见的详情vueTs书写