首页手记 Vue3入门：新手必读教程

Vue3入门：新手必读教程

标签：

Vue.js

本文详细介绍了vue3入门的相关知识，包括环境搭建、基本语法、组件开发及响应式原理，帮助开发者快速上手vue3入门。文章还涉及了Vue3与TypeScript的集成以及一个简单的待办事项实战项目，提供了全面的学习和实践指南。

Vue3简介与环境搭建

什么是Vue3

Vue是一个由尤雨溪在2014年开发的渐进式JavaScript框架，用于构建用户界面。Vue的设计哲学是尽可能提供精简的基础功能，同时通过插件和工具来扩展其功能。Vue3是在2020年推出的一个重大版本，它带来了许多新特性和改进，包括性能优化、更好的类型支持、更细粒度的API控制、以及对实验性特性如Teleport和Fragments的支持。

安装Node.js

要开始使用Vue3，首先需要安装Node.js。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务端运行JavaScript代码。Node.js不仅用于运行JavaScript代码，还可以用于开发和运行诸如Vue这样的前端应用程序。

访问Node.js官方网站，下载最新的LTS版本的Node.js。
选择对应的安装包，根据安装向导进行安装。
安装完成后，在命令行中输入以下命令，验证安装是否成功：
```
node -v
npm -v
```

如果上述命令返回了Node.js和npm的版本号，说明安装成功。

使用Vue CLI创建Vue3项目

Vue CLI是Vue.js的官方脚手架，它可以帮助快速搭建Vue项目环境，包括初始化项目、创建开发环境、构建生产环境、启动开发服务器等。要使用Vue CLI创建Vue3项目，需要先安装Vue CLI。

在命令行中输入以下命令，全局安装Vue CLI：
```
npm install -g @vue/cli
```
使用Vue CLI创建一个新的项目。在命令行中输入以下命令，选择Vue3作为基础模板：
```
vue create my-vue3-project
```
在创建项目的提示中，选择Vue3版本，或者选择手动配置项目并选择Vue3。
创建完成后，进入项目目录并执行以下命令启动开发服务器：
```
cd my-vue3-project
npm run serve
```

此时，Vue CLI将启动本地服务器，并在浏览器中打开默认的Vue应用页面。

运行与调试项目

Vue CLI在项目创建时提供了一些基本的开发工具和配置，使开发和调试变得非常简单。为了更好地调试和开发Vue项目，可以使用一些工具和方法：

使用Chrome DevTools：Chrome DevTools是一个非常强大的工具，可以帮助查看和调试页面的元素、JavaScript代码、网络请求等。要使用它，只需在浏览器中打开Vue应用，点击右上角的Chrome DevTools图标（通常是一个放大镜图标），或者快捷键Ctrl+Shift+I（Windows）或Cmd+Option+I（Mac）。
使用Vue Devtools：Vue Devtools是一个专门针对Vue.js应用的浏览器插件，可以方便地查看和操作Vue组件的层级结构、状态、生命周期等。安装方法：访问Vue Devtools的GitHub仓库，下载合适的安装包，按照提示进行安装。
添加断点与日志：在代码中添加断点和打印语句，可以在调试过程中更加精确地定位问题。例如，可以在组件的生命周期钩子中添加console.log来输出组件的状态。
```
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue3'
    };
  },
  created() {
    console.log('Component created');
  }
};
```

通过这些工具和方法，可以更加高效地进行Vue项目开发和调试。

Vue3基本语法

组件与模板语法

在Vue中，组件是可重用的Vue实例，允许将单个组件组合成复杂的用户界面。组件可以有模板（template）、脚本（script）和样式（style）三个部分，每个部分都定义了组件的不同方面。

创建自定义组件：创建一个自定义Vue组件，首先需要定义组件的结构、数据、方法和生命周期钩子。例如，创建一个简单的自定义组件HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  },
  methods: {
    sayHello() {
      alert('Hello!');
    }
  }
};
</script>

<style scoped>
.hello {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}
</style>

使用组件：在其他组件或根组件中注册和使用自定义组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

数据绑定与事件处理

Vue的数据绑定和事件处理是其核心特性之一，可以使DOM操作更加高效和方便。

数据绑定：Vue提供了丰富的数据绑定方法，包括插值、v-model、v-bind等。例如，使用插值绑定变量到DOM元素：

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue3'
    };
  }
};
</script>

事件处理：Vue支持使用v-on指令绑定元素的事件处理程序。例如，绑定一个按钮的点击事件：

<template>
  <div id="app">
    <button v-on:click="sayHello">Say Hello</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    sayHello() {
      console.log('Hello!');
    }
  }
};
</script>

生命周期钩子

Vue的生命周期钩子允许开发者在组件的生命周期中执行一些自定义逻辑。生命周期钩子可以在组件的不同阶段被触发，例如，组件挂载到DOM之前或之后、数据变化、组件卸载等。

常见生命周期钩子：
- beforeCreate：在实例初始化之前，尚未生成data属性。
- created：实例创建完毕，此时data属性已经生成。
- beforeMount：在组件挂载到DOM之前。
- mounted：组件挂载到DOM之后。
- beforeUpdate：在组件更新之前。
- updated：组件更新之后。
- beforeUnmount：在组件卸载之前。
- unmounted：组件卸载之后。

使用生命周期钩子：
例如，在mounted钩子中添加一个初始化的网络请求：

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue3'
    };
  },
  mounted() {
    console.log('Component mounted');
    // 进行网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        console.log('Data received:', data);
      });
  }
};
</script>

路由与状态管理简述

路由：Vue Router是Vue.js的官方路由实现，可以方便地管理单页面应用的路由。例如，安装并配置Vue Router：

npm install vue-router@next

在src/router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在主组件中引入和使用路由：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');
</script>

状态管理：Vuex是Vue.js的状态管理模式，可以方便地管理应用的状态。例如，安装并配置Vuex：

npm install vuex@next

在src/store/index.js中配置Vuex：

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    fetchCount(context) {
      return new Promise((resolve) => {
        axios.get('https://api.example.com/count')
          .then(response => {
            context.commit('increment', response.data);
            resolve();
          });
      });
    }
  }
});

export default store;

在主组件中引入并使用Vuex：

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

<script>
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');
</script>

Vue3组件开发

创建自定义组件

自定义组件是Vue项目中最常见的组件类型，它封装了特定功能或UI元素。创建自定义组件的过程包括定义组件结构、数据属性、方法和生命周期钩子。

定义组件：在Vue项目中，每个组件都包含一个或多个文件，通常使用.vue扩展名。例如，创建一个名为Counter.vue的组件：

<template>
  <div class="counter">
    <h1>Counter</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

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

<style scoped>
.counter {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}
</style>

注册和使用组件：在其他组件或根组件中注册并使用自定义组件。例如，在App.vue中使用Counter组件：

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from './components/Counter.vue';

export default {
  name: 'App',
  components: {
    Counter
  }
};
</script>

属性与插槽

传递属性（Props）：通过Props，可以将父组件的数据传递到子组件。例如，创建一个UserCard.vue组件，接收一个user属性：

<template>
  <div class="user-card">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    user: {
      type: Object,
      required: true
    }
  }
};
</script>

在父组件中使用UserCard组件并传递属性：

<template>
  <div id="app">
    <UserCard :user="user" />
  </div>
</template>

<script>
import UserCard from './components/UserCard.vue';

export default {
  name: 'App',
  data() {
    return {
      user: {
        name: 'John Doe',
        email: 'john@example.com'
      }
    };
  },
  components: {
    UserCard
  }
};
</script>

使用插槽（Slots）：插槽可以将父组件的内容传递到子组件的特定位置。例如，创建一个Card.vue组件，包含一个默认插槽和一个名为header的具名插槽：

<template>
  <div class="card">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card'
};
</script>

<style scoped>
.card {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}
.header {
  font-weight: bold;
  margin-bottom: 10px;
}
</style>

在父组件中使用Card组件并传递内容：

<template>
  <div id="app">
    <Card>
      <template v-slot:header>
        <h1>Title</h1>
      </template>
      <p>This is the content of the card.</p>
    </Card>
  </div>
</template>

<script>
import Card from './components/Card.vue';

export default {
  name: 'App',
  components: {
    Card
  }
};
</script>

组件通信

组件之间的通信是Vue项目开发中常见的需求。Vue提供了多种方法实现组件间的通信，包括父组件向子组件传递属性、子组件向父组件传递事件、兄弟组件之间的通信等。

父组件向子组件传递属性：通过Props，父组件可以向子组件传递数据。例如，创建一个名为ParentChildCommunication.vue的组件，父组件向子组件传递一个message属性：

<template>
  <div class="parent-child-communication">
    <h1>Parent Component</h1>
    <Child :message="parentMessage" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  name: 'ParentChildCommunication',
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  },
  components: {
    Child
  }
};
</script>

子组件接收并使用传递过来的属性：

<template>
  <div class="child">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    message: String
  }
};
</script>

子组件向父组件传递事件：通过自定义事件，子组件可以触发事件，父组件监听该事件并执行相应逻辑。例如，创建一个名为ChildParentCommunication.vue的组件，子组件触发一个childMessage事件：

<template>
  <div class="child-parent-communication">
    <h1>Parent Component</h1>
    <Child @childMessage="handleChildMessage" />
    <p>{{ childMessage }}</p>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  name: 'ChildParentCommunication',
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    handleChildMessage(message) {
      this.childMessage = message;
    }
  },
  components: {
    Child
  }
};
</script>

子组件触发事件并向父组件传递数据：

<template>
  <div class="child">
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    sendMessage() {
      this.$emit('childMessage', 'Hello from child!');
    }
  }
};
</script>

兄弟组件之间的通信：兄弟组件之间没有直接的父子关系，可以通过一个中间件进行通信，例如使用Vue的事件总线或全局状态管理工具如Vuex。例如，创建一个名为SiblingCommunication.vue的组件，通过事件总线实现兄弟组件之间的通信：

<template>
  <div class="sibling-communication">
    <div class="sibling1">
      <h1>Component 1</h1>
      <button @click="sendMessage">Send Message</button>
    </div>
    <div class="sibling2">
      <h1>Component 2</h1>
      <p>{{ message }}</p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';

const eventBus = new Vue();

export default {
  name: 'SiblingCommunication',
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello from sibling 1!');
    }
  },
  created() {
    eventBus.$on('message', message => {
      this.message = message;
    });
  }
};
</script>

动态组件与异步组件

动态组件：动态组件允许根据某些条件动态地切换显示不同的组件。例如，使用<component>标签和is属性来定义动态组件：

<template>
  <div class="dynamic-components">
    <button @click="showComponent = 'Component1'">Show Component 1</button>
    <button @click="showComponent = 'Component2'">Show Component 2</button>
    <component :is="showComponent"></component>
  </div>
</template>

<script>
import Component1 from './Component1.vue';
import Component2 from './Component2.vue';

export default {
  name: 'DynamicComponents',
  data() {
    return {
      showComponent: 'Component1'
    };
  },
  components: {
    Component1,
    Component2
  }
};
</script>

异步组件：异步组件允许按需加载组件，提高应用的性能和加载速度。例如，定义一个异步组件：

const LazyComponent = () => ({
  component: import('./LazyComponent.vue')
});

在父组件中使用异步组件：

<template>
  <div class="async-components">
    <button @click="loadComponent = true">Load Component</button>
    <component v-if="loadComponent" :is="LazyComponent"></component>
  </div>
</template>

<script>
import LazyComponent from './LazyComponent.vue';

export default {
  name: 'AsyncComponents',
  data() {
    return {
      loadComponent: false
    };
  },
  components: {
    LazyComponent
  }
};
</script>

Vue3响应式原理

响应式系统介绍

Vue的响应式系统是其核心特性之一，它允许开发者通过简单的属性访问和赋值来实现复杂的DOM更新。Vue使用了一种称为“依赖收集”的机制来实现响应式，即自动追踪组件中的属性变化，并在属性发生变化时更新视图。

依赖收集：当组件初始化时，Vue会自动收集该组件及其子组件中的所有数据属性，并将它们转变成可观察的对象。当这些属性发生变化时，Vue会自动触发视图更新。

依赖追踪：Vue使用依赖追踪机制来追踪每个组件的依赖关系。当依赖属性发生变化时，Vue会触发视图更新，同时更新依赖该属性的所有组件。例如，创建一个名为ReactiveDemo.vue的组件：

<template>
  <div class="reactive-demo">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  name: 'ReactiveDemo',
  data() {
    return {
      message: 'Hello, Vue3'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, World!';
    }
  }
};
</script>

响应式与计算属性

在Vue中，响应式数据属性和计算属性是两种常用的数据处理方式。

响应式数据属性：响应式数据属性是通过data函数定义的组件属性，当这些属性发生变化时，Vue会自动触发视图更新。例如，创建一个名为ReactiveDataDemo.vue的组件：

<template>
  <div class="reactive-data-demo">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  name: 'ReactiveDataDemo',
  data() {
    return {
      message: 'Hello, Vue3'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, World!';
    }
  }
};
</script>

计算属性：计算属性是基于响应式数据属性的计算结果，它在组件中定义为一个函数。计算属性的结果会被缓存，只有在其依赖的数据属性发生变化时才会重新计算。例如，创建一个名为ComputedDemo.vue的组件：

<template>
  <div class="computed-demo">
    <p>{{ fullName }}</p>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

<script>
export default {
  name: 'ComputedDemo',
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

Vue3 Reactivity API详解

Vue3的Reactivity API提供了更细粒度的API来操作响应式系统，包括ref、reactive、watch等。

ref：ref是一个获取和设置底层值的引用类型，可以用于简单类型的数据。例如，创建一个名为RefDemo.vue的组件：

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

<script>
import { ref } from 'vue';

export default {
  name: 'RefDemo',
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

reactive：reactive将一个普通对象转换为响应式的，它返回的是一个代理对象，直接操作该对象的属性即可实现响应式。例如，创建一个名为ReactiveDemo.vue的组件：

<template>
  <div class="reactive-demo">
    <p>{{ user.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'ReactiveDemo',
  setup() {
    const user = reactive({
      name: 'John Doe'
    });

    const updateName = () => {
      user.name = 'Jane Doe';
    };

    return {
      user,
      updateName
    };
  }
};
</script>

watch：watch用于监听响应式数据的变化，当被监听的数据发生变化时，会执行回调函数。例如，创建一个名为WatchDemo.vue的组件：

<template>
  <div class="watch-demo">
    <p>{{ message }}</p>
    <input v-model="message" placeholder="Enter message">
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  name: 'WatchDemo',
  setup() {
    const state = reactive({
      message: ''
    });

    watch(() => state.message, (newVal, oldVal) => {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    });

    return {
      message: state.message
    };
  }
};
</script>

侦听器与依赖收集

在Vue的响应式系统中，依赖收集和依赖追踪是实现视图自动更新的核心机制。

依赖收集：依赖收集是在组件初始化时自动进行的，Vue会追踪每个组件中所有数据属性的依赖关系。例如，创建一个名为DependencyDemo.vue的组件：

<template>
  <div class="dependency-demo">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'DependencyDemo',
  setup() {
    const state = reactive({
      message: 'Hello, Vue3'
    });

    const updateMessage = () => {
      state.message = 'Hello, World!';
    };

    return {
      message: state.message,
      updateMessage
    };
  }
};
</script>

依赖追踪：当依赖属性发生变化时，Vue会自动触发视图更新。例如，创建一个名为DependencyDemo2.vue的组件：

<template>
  <div class="dependency-demo2">
    <p>{{ fullName }}</p>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  name: 'DependencyDemo2',
  setup() {
    const state = reactive({
      firstName: '',
      lastName: ''
    });

    const fullName = computed(() => `${state.firstName} ${state.lastName}`);

    watch(() => state.firstName, () => {
      console.log(`First Name changed to ${state.firstName}`);
    });

    watch(() => state.lastName, () => {
      console.log(`Last Name changed to ${state.lastName}`);
    });

    return {
      fullName,
      firstName: state.firstName,
      lastName: state.lastName
    };
  }
};
</script>

Vue3与TypeScript集成

安装TypeScript

TypeScript是一个由微软开发的开源编程语言，它是JavaScript的一个超集，添加了静态类型和面向对象的功能。要开始使用TypeScript，首先需要安装TypeScript。

在命令行中输入以下命令，全局安装TypeScript：
```
npm install -g typescript
```
在Vue项目中安装TypeScript：
```
npm install --save-dev typescript
```

在项目根目录下创建tsconfig.json文件，配置TypeScript环境：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "esnext"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "allowJs": true,
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

配置TypeScript环境

在Vue项目中使用TypeScript需要进行一些配置，确保TypeScript环境的正确配置。

安装Vue相关类型定义：安装Vue和Vue Router等库的类型定义：
```
npm install --save-dev @types/vue
npm install --save-dev @types/vue-router
```

配置TypeScript环境：在项目根目录下创建或修改tsconfig.json文件，添加Vue和Vue Router的类型定义路径：

{
  "compilerOptions": {
    "paths": {
      "vue": ["node_modules/vue"],
      "vue-router": ["node_modules/vue-router"]
    }
  }
}

修改Vue项目配置：在vue.config.js文件中配置TypeScript：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js']
    }
  }
};

使用TypeScript编写Vue组件

使用TypeScript编写Vue组件可以提高代码的可读性和可维护性。

创建TypeScript组件：创建一个名为App.vue的组件，使用TypeScript编写：

<template>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const message = ref('Hello Vue3');

    const sayHello = () => {
      alert('Hello!');
    };

    return {
      message,
      sayHello
    };
  }
});
</script>

使用TypeScript定义Props和Emits：在组件中定义Props和Emits，提高代码的类型安全性：

<template>
  <div class="user-card">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'UserCard',
  props: {
    user: {
      type: Object as PropType<{ name: string; email: string }>,
      required: true
    }
  }
});
</script>

类型推断与类型检查

在TypeScript中，类型推断可以自动推断变量、函数等的类型，而类型检查可以在编译时发现类型错误。

类型推断：TypeScript可以根据变量的初始值自动推断其类型。例如，创建一个名为TypeInference.vue的组件：

<template>
  <div class="type-inference">
    <p>{{ message }}</p>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'TypeInference',
  setup() {
    const message = ref('Hello Vue3');

    const sayHello = () => {
      alert('Hello!');
    };

    return {
      message,
      sayHello
    };
  }
});
</script>

类型检查：在编写代码时，使用TypeScript的类型检查功能可以发现潜在的类型错误。例如，创建一个名为TypeChecking.vue的组件：

<template>
  <div class="type-checking">
    <p>{{ message }}</p>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'TypeChecking',
  setup() {
    const message = ref('Hello Vue3');

    const sayHello = () => {
      alert('Hello!');
    };

    return {
      message,
      sayHello
    };
  }
});
</script>

Vue3实战项目

创建一个简单的待办事项应用

创建一个新的Vue项目：
```
vue create todo-app
```
安装Vue Router：
```
npm install vue-router@next
```

创建组件：

src/views/TodoList.vue：待办事项列表组件：

<template>
  <div class="todo-list">
    <h1>Todo List</h1>
    <div v-for="todo in todos" :key="todo.id">
      <p>{{ todo.text }}</p>
      <button @click="deleteTodo(todo)">Delete</button>
    </div>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo" placeholder="Add a new todo" />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'TodoList',
  setup() {
    const todos = ref([]);
    const newTodo = ref('');

    const addTodo = () => {
      todos.value.push({ id: Date.now(), text: newTodo.value });
      newTodo.value = '';
    };

    const deleteTodo = (todo) => {
      todos.value = todos.value.filter((t) => t.id !== todo.id);
    };

    const completedTodos = computed(() => {
      return todos.value.filter((todo) => todo.completed === true);
    });

    return {
      todos,
      newTodo,
      addTodo,
      deleteTodo,
      completedTodos
    };
  }
};
</script>

<style scoped>
.todo-list {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
</style>

src/views/TodoDetail.vue：待办事项详情组件：

<template>
  <div class="todo-detail">
    <h1>{{ todo.text }}</h1>
    <p><span>Completed:</span> {{ todo.completed }}</p>
    <button @click="deleteTodo">Delete</button>
  </div>
</template>

<script>
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'TodoDetail',
  props: {
    todo: {
      type: Object as PropType<{ id: number; text: string; completed: boolean }>,
      required: true
    }
  },
  setup(props, { emit }) {
    const deleteTodo = () => {
      emit('delete', props.todo.id);
    };

    return {
      deleteTodo
    };
  }
});
</script>

<style scoped>
.todo-detail {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
</style>

配置Vue Router：

src/router/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import TodoList from '../views/TodoList.vue';
import TodoDetail from '../views/TodoDetail.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'TodoList',
    component: TodoList
  },
  {
    path: '/todo/:id',
    name: 'TodoDetail',
    component: TodoDetail
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

使用路由：

src/App.vue：

<template>
  <router-view></router-view>
</template>

<script>
import { createApp } from 'vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');
</script>

项目部署与打包

配置Webpack打包：

vue.config.js：

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true
    }
  },
  css: {
    extract: true
  }
};

打包项目：
```
npm run build
```
打包完成后，会在dist目录下生成打包文件，可以部署到服务器或静态文件托管服务。

常见问题与解决方案

问题：组件间传递数据时，数据没有及时更新

解决方案：确保父组件和子组件之间的Props和事件处理逻辑正确。可以尝试使用watch监听Props的变化，或者使用provide和inject进行数据传递。

示例代码：

<template>
<parent>
  <child :message="parentMessage" />
</parent>
</template>

<script>
import Child from './Child.vue';

export default {
name: 'Parent',
data() {
  return {
    parentMessage: 'Hello from parent!'
  };
},
components: {
  Child
}
};
</script>

<script>
import { watch } from 'vue';

export default {
name: 'Child',
props: {
  message: String
},
setup(props) {
  watch(() => props.message, (newVal) => {
    console.log(`Message changed to ${newVal}`);
  });
}
};
</script>

问题：调试时无法定位具体错误
- 解决方案：使用Chrome DevTools和Vue Devtools进行调试。可以在组件的方法和生命周期钩子中添加console.log来输出调试信息，或者使用断点进行调试。
- 示例代码：
```
<script>
export default {
name: 'App',
setup() {
  const someMethod = () => {
    console.log('Method called');
  };

  return {
    someMethod
  };
}
};
</script>
```

问题：路由跳转时页面闪烁

解决方案：确保Vue Router的配置正确，使用createWebHistory而不是createHashHistory。可以尝试在路由配置中添加scrollBehavior来控制页面滚动行为。

示例代码：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
history: createWebHistory(),
scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { top: 0 };
  }
},
routes: [
  // 路由配置
]
});

export default router;

问题：打包后样式丢失
- 解决方案：检查打包配置，确保CSS提取选项正确。可以尝试使用mini-css-extract-plugin插件来提取CSS文件。确保CSS文件路径正确，没有被压缩或混淆。
- 示例代码：
```
module.exports = {
configureWebpack: {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
};
```

通过以上步骤，可以创建一个简单的待办事项应用，并进行部署和打包。在项目开发过程中，遇到问题时可以参考以上解决方案，也可以查阅官方文档和社区资源获得更多帮助。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

泛舟湖上清波郎朗

手记
篇

粉丝

32

获赞与收藏

226

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31315 347

网络编程入门教程

20个小节 12835 241

Pandas 入门教程

25个小节 18713 350

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3入门：新手必读教程

Vue3简介与环境搭建

什么是Vue3

安装Node.js

使用Vue CLI创建Vue3项目

运行与调试项目

Vue3基本语法

组件与模板语法

数据绑定与事件处理

生命周期钩子

路由与状态管理简述

Vue3组件开发

创建自定义组件

属性与插槽

组件通信

动态组件与异步组件

Vue3响应式原理

响应式系统介绍

响应式与计算属性

Vue3 Reactivity API详解

侦听器与依赖收集

Vue3与TypeScript集成

安装TypeScript

配置TypeScript环境

使用TypeScript编写Vue组件

类型推断与类型检查

Vue3实战项目

创建一个简单的待办事项应用

项目部署与打包

常见问题与解决方案

阅读免费教程