Vue联合TypeScript简单运用[持续跟新中...]

239 阅读1分钟

一、创建项目

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安装

  1. 选择创建模式
    vue create ts-temp//ts-temp是项目名称

2.手动选择特性(上下箭头移动、空格选择、回车完成) 20191008224428363.png

3.接下来会选择一些配置(y-是、n-否)

(1)、是否使用类样式组件语法?

20191008224819989.png

(2)、是否将babel与typescript一起使用?

20191008224959220.png

(3)、路由是否使用history模式(默认hash模式) 2019100822515279.png

(4)、选择css预编译方式,我选的是Sass/SCSS (with node-sass)

20191008225333993.png

(5)、选择一个语法检测配置,选择TSLint

20191008225550317.png

(6)、选择语法检查方式,选择Lint on save

20191008225911221.png

(7)、你希望babel、postcss、eslint等的配置文件放在哪?选择In dedicated config files

20191008230337835.png

(8)、将此保存为将来项目的预设?随意选,我选的n

20191008230515834.png

二、项目的简单运用

简单的文件介绍

所有的js文件变成了ts文件其次在main.ts里面引用了(是阻止显示生产模式的消息) %X711ES)5S9I_F36(Q_J({J.png

语法的运用

定义数据、事件绑定

<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书写