玩转CLI脚手架、Element-UI：路由传参的妙招

前端

2023-01-11 04:36:00

快速打造美观易用的 Vue 项目：使用 CLI 脚手架和 Element-UI

大家好，欢迎来到这篇技术博客！我们今天将深入探讨如何使用 CLI 脚手架和 Element-UI 迅速搭建一个 Vue 项目。无论您是新手还是经验丰富的开发人员，本文将为您提供一步步的指南，让您在短时间内打造出一个令人惊叹的应用程序。

一、CLI 脚手架：快速搭建 Vue 项目

想象一下，您正准备踏上一段激动人心的开发之旅，这时您遇到了 CLI 脚手架，它是您的得力助手，可以为您节省大量时间和精力。CLI 脚手架基于 Vue CLI，它是一个命令行工具，可以帮助您快速创建一个新的 Vue 项目。

使用 CLI 脚手架的步骤如下：

安装 CLI 脚手架： 使用终端窗口，输入 npm install -g @vue/cli 命令。
创建 Vue 项目： 导航到您希望创建项目的位置，并输入 vue create <project-name> 命令。
选择 UI 框架： 在弹出的选项中，选择 Element-UI 作为您的 UI 框架。

二、Element-UI：打造美观易用的界面

Element-UI 是一个基于 Vue.js 的 UI 框架，它拥有丰富的组件和样式，可以帮助您快速构建美观且易于使用的界面。要使用 Element-UI：

安装 Element-UI： 在终端窗口中，导航到您的 Vue 项目目录，并输入 npm install element-ui 命令。
使用 Element-UI 组件： 在您的 Vue 组件中，使用 Element-UI 组件来构建界面。例如，以下代码使用了一个按钮组件：

<template>
  <el-button type="primary">点击我</el-button>
</template>

三、路由传参：在组件之间传递数据

路由传参是您在组件之间传递数据的强大工具。在 Vue.js 中，有四种方法可以进行路由传参：

查询参数： 通过 URL 地址传递数据，例如：/user?id=1。使用 this.$route.query 对象访问查询参数。
路由参数： 也通过 URL 地址传递数据，但强制提供，否则路由将不匹配，例如：/user/:id。使用 this.$route.params 对象访问路由参数。
props： 父组件向子组件传递数据，例如：<child-component :user-id="1"></child-component>。在子组件中，使用 props 对象访问 props 数据。
Vuex： 一个状态管理库，可以在组件之间共享数据。使用 store.commit() 和 store.dispatch() 方法修改状态。

四、示例代码

以下是一个使用 CLI 脚手架、Element-UI 和路由传参的示例代码片段：

<template>
  <el-button @click="goToUser(1)">
    <span>跳转到用户 1</span>
  </el-button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goToUser = (id) => {
      router.push({ path: `/user/${id}` });
    };

    return { goToUser };
  }
};
</script>