安装vue脚手架

Vue CLI内置了TypeScript的支持，并且@vue/cli3提供了TypeScript插件，因此搭建支持TypeScript的vue工程非常方便。
因此我们需要先全局安装vue3.0+的脚手架，在node命令行中执行如下命令:

npm install @vue/cli -g

如果安装成功则在命令行中输入vue -V，会输出如下：

image.png

创建项目

使用命令vue create PROJECT_NAME创建vue项目。

vue create tsvue

tsvue为我的项目名称。
进入如下界面：

image.png

我们因为是使用typeScript,所以需要选择自行选择配置，就是我蓝色箭头指向的选项。
然后自行选择：

image.png
我们对以上选择做出如下解释：

1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
3  ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
4  ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
5  ( ) Router // vue-router（vue路由）
6  ( ) Vuex // vuex（vue的状态管理模式）
7  ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
8  ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
9  ( ) Unit Testing // 单元测试（unit tests）10 ( ) E2E Testing // e2e（end to end） 测试

接着如下界面
是否使用class-style结构，这里选择Y(yes).

image.png

使用Babel与TypeScript一起用于自动检测的填充,这里选择Y

image.png
路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面;这里选择Y
image.png
挑选一个css预处理工具，看自己喜好，我选择less
image.png

下一步：代码检查设置 我选择eslint+prettier;

image.png
对应的相关解释：
只进行报错提醒；
不严谨模式；
正常模式；
严格模式；
typescript格式验证工具；（不推荐）
代码检查方式：我选择保存时检查 Lint on save
image.png
选择配置写在单独配置文件中还是package.json中，个人习惯，我选择单独配置文件中In dedicated config files;
image.png

是否保存这次的配置，我选择否N。如果选择是，则会让你再填写一次配置名称。

image.png
项目创建完成。
image.png

使用Ts做一个简单的组件并进行传值

• 因为是脚手架生成的项目，我们去项目根目录下执行npm run serve，就可以直接运行项目了。
• 接着我们就是修改代码，并加入自己的代码了。先阅读一下该文章。
• 注意：script 上需要加 lang='ts'

这里引用一个文章vue-property-decorator用法

然后我在App.vue中增加一个路由跳转

<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link>|
            <router-link to="/about">About</router-link>|
            <router-link to="/abc">我自己写的组件</router-link>
        </div>
        <router-view />
    </div>
</template>

<style lang="less">
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>

接着在router中index.ts中增加一个路由abc

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    },
    {
        path: '/abc',
        name: 'abc',
        component: () => import(/* webpackChunkName: "abc" */ '../views/abc.vue'),
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
});

export default router;

abc组件

<template>
    <div>
        我是abc组件
        <p>{{ getvalue }}</p>
        <mycom :name="jim" :age="age" @pass="got"></mycom>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
import mycom from '../components/mycom.vue';
@Component({
    components: {
        mycom,
    },
})
export default class abc extends Vue {
    jim: string = 'jack';
    age: number = 11;
    getvalue: any = '';
    got(name: any) {
        this.getvalue = name;
    }
}
</script>

mycom子组件
组件需要父组件传name age字段，并把name和age反给父组件，并在父组件中展示。

<template>
   <div class="box">
       <div>
           {{ name + '的年龄' + myage }}
           <p>有一个{{ num }}岁的哥哥</p>
       </div>
       <div>
           <button @click="changeAge">点击改变年龄</button>
       </div>
   </div>
</template>

<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
@Component
export default class mycom extends Vue {
   //prop为父组件向子组件传值，！为必须有值，？为可有值
   @Prop({default: 'jack'}) name!: string;
   @Prop({default: 23}) age!: number;
   get num() {
       return this.myage + 4;
   }
   myname: string = this.name;
   myage: number = this.age;
   changeAge(): void {
       this.myage = Math.floor(Math.random() * 100);
       this.$emit('pass', this.myname + this.myage);//子组件向父组件传值
   }
}
</script>

<style lang="less">
.box {
   color: red;
}
</style>

接着在终端命令行中执行 npm run serve就能执行自己的项目了，执行npm run lint --fix可以检查自己的项目并修复一些不符合eslint规则的错误和警告。
这里我们习惯于缩进为4 ，但是执行了npm run lint --fix,会自行格式化我们的代码并把缩进改成了2。再多放查找情况下，我们需要给@typescript-eslint/parser进行配置。
在根目录下新建一个.prettierrc.js文件，将一下内容写入到文件中：

module.exports = {
    // 箭头函数只有一个参数的时候可以忽略括号
    arrowParens: 'avoid',
    // 括号内部不要出现空格
    bracketSpacing: false,
    // 行结束符使用 Unix 格式
    endOfLine: 'lf',
    // true: Put > on the last line instead of at a new line
    jsxBracketSameLine: false,
    // jsx 属性使用双引号
    jsxSingleQuote: false,
    // 行宽
    printWidth: 100,
    // 换行方式
    proseWrap: 'preserve',
    // 分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 缩进
    tabWidth: 4,
    // 使用空格缩进
    useTabs: false,
    // 后置逗号，多行对象、数组在最后一行增加逗号
    trailingComma: 'es5',
    // parser: 'babylon',
};

至此自动格式化就是缩进就是4个字符了。