笔记大全

Vuecli3中如何使用TS语法

更新时间：2023-10-06

1. 前置条件

在使用Vue-cli3构建项目之前，需要先确保Node.js的版本高于8.9，并且全局安装Vue-cli3：

npm install -g @vue/cli

创建一个新的Vue项目：

vue create my-project

2. 引入TypeScript

在新建项目时，可以选择默认的preset，也可以手动选择相关选项。当手动选择时，最后会有一个可选项，即是否使用TypeScript。如下：

Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

如果未选择使用TypeScript，可以通过执行下面的命令来添加TypeScript:

vue add @vue/typescript

3. 在Vue组件中使用TS

创建的Vue项目默认会在src目录下创建一个"HelloWorld.vue"的示例组件。可以在该组件中使用TypeScript。首先需要将"lang"属性指定为"ts"，如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank">News</a></li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  private msg: string = 'Welcome to Your Vue.js App';
}
</script>

<style scoped>
  .hello {
    font-size: 3em;
    text-align: center;
  }
  .hello>h1 {
    font-weight: normal;
  }
  .hello ul {
    list-style-type: none;
    padding: 0;
  }
  .hello ul>li>a {
    color: #42b983;
  }
</style>

这里引入了vue-property-decorator，并使用@Component装饰器来标记当前组件为Vue组件。

4. 编译打包

在完成组件的编写之后，需要执行下面的命令来编译打包项目：

npm run build

这将会在根目录下创建一个"dist"目录，其中包含编译打包后的文件。

总结

使用Vue-cli3创建使用TypeScript的Vue项目相对简单，只需要通过"@vue/cli-plugin-typescript"插件即可轻松完成。在Vue组件中使用TypeScript需要引入相关的依赖，并使用相关的装饰器来标记当前组件为Vue组件。另外，在编写代码时需要注意使用TypeScript的语法，包括类型声明、泛型、接口等。

c语言编程笔录