学习Vue.js 3：上手指南

2024-01-26 14:25:28

在瞬息万变的技术世界中，紧跟时代潮流至关重要。作为一名经验丰富的程序员，我欣然接受了Vue.js 3的到来，并迫不及待地想与您分享我的见解。这篇文章将深入探讨我建立Vue.js 3项目的个人历程，提供有用的见解和实用指南，助力您踏上Vue.js 3的奇妙之旅。

开始之前

在开始我们的旅程之前，确保您拥有以下先决条件：

对JavaScript和HTML/CSS的扎实理解
Node.js和npm已安装在您的系统上
文本编辑器或IDE

项目设置

创建新项目： 使用npm或Yarn创建新项目：

npm create vite@latest my-vue3-project

安装依赖： 安装Vue.js 3和任何其他必需的依赖：

npm install vue@3

配置webpack： 配置webpack以处理Vue.js 3应用程序：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
};

启动开发服务器： 运行以下命令启动开发服务器：

npm run dev

组件创建

Vue.js 3的核心概念是组件。组件是可重用的代码块，负责呈现特定UI元素或功能。

创建组件： 在src目录中创建一个新文件MyComponent.vue：

<template>
  <div>Hello from MyComponent</div>
</template>

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

注册组件： 在main.js中注册组件：

import MyComponent from './MyComponent.vue';

Vue.component('my-component', MyComponent);

使用组件： 在应用程序模板中使用组件：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

状态管理

状态管理对于管理复杂应用程序的数据流至关重要。Vue.js 3提供了Vuex 4用于集中式状态管理。

安装Vuex： 安装Vuex：

npm install vuex

创建存储： 创建一个Vuex存储：

import { createStore } from 'vuex';

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

注入存储： 将存储注入Vue实例：

import { createApp } from 'vue';

const app = createApp({});

app.use(store);

使用存储： 使用Vuex getter和setter来访问和修改状态：

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    return {
      count: store.state.count,
      increment() {
        store.commit('increment');
      }
    };
  }
};
</script>

路由

路由对于管理单页面应用程序的导航至关重要。Vue.js 3与Vue Router 4集成，用于路由管理。

安装Vue Router： 安装Vue Router：

npm install vue-router

创建路由器： 创建一个Vue Router实例：

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

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

注入路由器： 将路由器注入Vue实例：

import { createApp } from 'vue';

const app = createApp({});

app.use(router);

使用路由： 使用<router-link>和<router-view>组件在应用程序中管理导航：

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

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