Vue3.0再不学就out了！跟我入门第一天，含集成ts、router、vuex等使用方法

2024-01-07 10:44:30

从零开始，入门Vue3.0

1. 安装与配置

1.1 安装Vue3.0

npm install -g @vue/cli
vue create my-app
cd my-app

1.2 集成TypeScript

vue add typescript

1.3 安装Vue Router和Vuex

npm install vue-router vuex

2. TypeScript基础

2.1 TypeScript简介

TypeScript是一种超集JavaScript的语言，它可以在编译时发现很多潜在的错误，使代码更加健壮。

2.2 类型注解

类型注解是TypeScript的重要特性之一，它可以帮助我们定义变量和函数的类型，从而提高代码的可读性和可维护性。

3. Vue Router入门

3.1 Vue Router简介

Vue Router是一款官方的路由管理库，它可以帮助我们在单页面应用中轻松实现页面跳转和状态管理。

3.2 路由配置

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

3.3 使用路由

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

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

4. Vuex入门

4.1 Vuex简介

Vuex是一款官方的状态管理库，它可以帮助我们在单页面应用中管理共享状态。

4.2 创建Store

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

4.3 使用Store

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

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}
</script>