vue-cli3+typescript初体验小结

下面是“vue-cli3+typescript初体验小结”的完整攻略。

简介

本文主要介绍vue-cli3.x和TypeScript的结合使用，主要内容包括：

vue-cli3.x和TypeScript的搭建；
TypeScript在vue组件开发中的应用；
通过示例演示如何在vue中使用TypeScript。

vue-cli3.x和TypeScript的搭建

首先，我们需要安装vue-cli3.x和TypeScript。打开终端，输入以下命令进行安装：

npm install -g @vue/cli
npm install -g typescript

安装完成之后，我们开始搭建vue项目。在终端输入以下命令：

vue create vue-typescript-demo

按照提示选择需要的配置即可。搭建完成后，我们需要为项目配置TypeScript。

在项目的根目录下，创建vue.config.js文件，输入以下内容：

module.exports = {
  transpileDependencies: [
    'vue-awesome'
  ],
  runtimeCompiler: true,
  lintOnSave: false,
  css: {
      loaderOptions: {
          scss: {
              prependData: '@import "~@/assets/scss/index.scss";'
          }
      }
  },
  chainWebpack: (config) => {
      // 添加 TypeScript 支持
      config.module
          .rule('ts')
          .test(/\.tsx?$/)
          .use('ts-loader')
          .loader('ts-loader')
          .end();
  }
}

然后，在项目根目录下创建一个src/shims-tsx.d.ts文件，输入以下内容：

declare module '*.tsx' {
  import Vue from 'vue';
  export default Vue;
}

最后，在src目录下创建一个main.ts文件，输入以下内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

至此，vue-cli3.x和TypeScript的搭建工作完成。

TypeScript在vue组件开发中的应用

我们知道，TypeScript是JavaScript的超集，通过更强的类型检测和语法结构，可以有效避免一些类型转换错误和语法错误。

在vue组件开发中，我们可以使用TypeScript来规范化代码，使代码更加易于维护。下面是一个使用TypeScript的vue组件示例：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <button @click="clickHandler">Click Me</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  },
  methods: {
    clickHandler(): void {
      this.count++
      this.message = `Clicked ${this.count} times.`
    }
  }
})
</script>

<style scoped>
h1 {
  font-size: 4rem;
}
</style>

在上面的示例中，我们通过在<script>标签中指定lang="ts"，然后使用Vue.extend来扩展Vue组件，并定义了组件的类型、props的类型、data的类型和方法的类型，使代码更易于阅读和维护。

在vue中使用TypeScript的示例

下面，我们通过两个示例来演示在vue中使用TypeScript的方法。

示例1：计数器

在这个示例中，我们创建一个计数器，每次点击按钮都会增加计数器的值。

首先，在src/components目录下创建一个Counter.vue文件，输入以下内容：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(): void {
      this.count++
    }
  }
})
</script>

<style>
p {
  font-size: 2rem;
}
</style>

然后，在App.vue文件中添加Counter组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Counter />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Counter from '@/components/Counter.vue'

export default Vue.extend({
  name: 'App',
  components: {
    Counter
  }
})
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
</style>

这样，我们就完成了在vue中使用TypeScript的第一个示例。

示例2：TodoList

在这个示例中，我们创建一个TodoList（任务列表），可以添加和删除任务。

首先，在src/interfaces目录下创建一个ITodo.ts文件，输入以下内容：

export default interface ITodo {
  text: string
  done: boolean
}

然后，在src/components目录下创建一个TodoList.vue文件，输入以下内容：

<template>
  <div>
    <h1>TodoList</h1>
    <div class="add-todo">
      <input v-model="newTodo" placeholder="Add new todo" />
      <button @click="addTodo">Add</button>
    </div>
    <div class="todo-container">
      <div v-for="(todo, index) in todoList" :key="index" class="todo-item">
        <p :class="{ done: todo.done }">{{ todo.text }}</p>
        <button @click="deleteTodo(index)">Delete</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import ITodo from '@/interfaces/ITodo'

export default Vue.extend({
  name: 'TodoList',
  data (): { todoList: ITodo[], newTodo: string } {
    return {
      todoList: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo (): void {
      if (this.newTodo.trim()) {
        this.todoList.push({
          text: this.newTodo,
          done: false
        })
        this.newTodo = ''
      }
    },
    deleteTodo (index: number): void {
      this.todoList.splice(index, 1)
    }
  }
})
</script>

<style>
h1 {
  font-size: 2rem;
}
.add-todo {
  display: flex;
  margin-bottom: 1rem;
}
.add-todo input {
  flex: 1;
  margin-right: 1rem;
  padding: 0.5rem;
  font-size: 1rem;
}
.add-todo button {
  font-size: 1rem;
  padding: 0.5rem;
  background-color: #42b983;
  color: #fff;
  border: none;
  cursor: pointer;
}
.todo-container {
  display: flex;
  flex-direction: column;
}
.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
}
.todo-item .done {
  text-decoration: line-through;
  color: #ccc;
}
.todo-item button {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  background-color: #f44336;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

最后，在App.vue文件中添加TodoList组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Counter />
    <TodoList />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Counter from '@/components/Counter.vue'
import TodoList from '@/components/TodoList.vue'

export default Vue.extend({
  name: 'App',
  components: {
    Counter,
    TodoList
  }
})
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
</style>

这样，我们就完成了在vue中使用TypeScript的第二个示例，实现了一个简单的TodoList。

以上是“vue-cli3+typescript初体验小结”的完整攻略，希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-cli3+typescript初体验小结 - Python技术站