初识vue和router

Delighted
1,099 阅读4分钟

Vue.js，作为现代前端开发的明星框架之一，以其轻量级、高效和易上手的特点，吸引了全球众多开发者。构建一个高效、稳定的Vue开发环境是开始Vue之旅的第一步。本文将详尽指导你从零开始，搭建一个适合Vue开发的环境，包括Node.js安装、Vue CLI工具的使用、项目创建与运行，以及推荐的开发工具配置，让你轻松启程Vue开发之旅。

前置条件：安装Node.js

Vue CLI（Command Line Interface）工具依赖于Node.js环境，因此首先确保你的机器上已安装Node.js。访问Node.js官方网站下载并安装最新稳定版。安装过程中，建议勾选“Add to PATH”选项，以便在命令行中直接使用Node.js和npm（Node包管理器）。

安装完成后，打开终端或命令提示符，输入以下命令验证安装是否成功：

node -v
npm -v

分别应显示出Node.js和npm的版本号。

安装Vue CLI

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

npm install -g @vue/cli

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

  • 加载其它 CLI 插件的核心服务；
  • 一个针对绝大部分应用优化过的内部的 webpack 配置；
  • 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

npm install -g @vue/cli-service

安装完成后，同样可以通过命令验证是否安装成功：

vue --version

image.png

三、创建Vue项目

Vue CLI提供了一套命令行工具来快速生成和管理Vue项目。打开终端，输入以下命令创建一个新的Vue项目：

npm create vue@latest

image.png

随后就可以输入你的项目名称（这里的项目名称为a）。过程中，Vue CLI会询问你选择预设，你可以根据需求选择默认配置（默认包含ESLint和Babel）、手动选择特性或是使用自定义配置。对于初学者，推荐选择默认配置开始（就是全选否）。

运行Vue项目

进入项目目录，启动开发服务器：

cd a
npm install
npm run dev

image.png

cd a进入到项目终端中，npm install是对项目进行初始化，npm run dev运行项目。

Vue Router简介

Vue Router是Vue官方提供的路由解决方案，它使我们可以构建单页面应用中的多视图（页面）导航。Vue Router主要通过两个核心组件<router-link>和<router-view>来实现这一功能。

  • router-link：用于导航至不同的URL。它会被渲染成一个<a>标签，默认会阻止浏览器的跳转行为，改为通过JavaScript进行路由切换。
  • router-view：是一个占位符，用来展示根据当前URL匹配到的组件。随着URL的变化，<router-view>中展示的组件也会相应地切换。

路由配置与跳转

在Vue项目中，首先需要在src/router/index.js中定义路由规则。如下面案例，有两种方法配置，一种是在开始使用import导入路径，还一种是在component下导入。两种的区别在于，第一种无论页面是否跳转都会加载，而第二种只有在跳转时才加载，相比之下第二种能实现性能优化的效果。

import { createRouter, createWebHistory } from "vue-router"
import Bot from "../views/Bot.vue"

const routes = [
    {
        path: '/home',
        component: () => import('../views/Home.vue')
    },
    {
        path:'/bot',
        component: Bot
    },
    {
        name:'hot',
        path:'/hot/:id',
        component: () => import('../views/Hot.vue'),
        props: true
    }
]

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

export default router

这里存在两个路由：首页和热门页面。

  • 通过router-link跳转：在模板中使用<router-link>标签进行导航，如<router-link to="/hot">沸点</router-link>。
  • 编程式路由跳转：在Vue组件内，可以绑定点击事件调用this.$router.push()方法实现跳转。例如，跳转到热门页面：
<template>
    <div>
        <h2>home</h2>
        <button @click="goHot">去沸点</button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goHot = () => {
    router.push({
        name: 'hot',
        params: {
            id: 1
        }
    });
}
</script>

<style lang="css" scoped></style>

路由参数传递与接收

Vue Router支持两种传递参数的方式：查询参数（query）和路由参数（params）。

  • 查询参数：通过URL的查询字符串传递，使用this.$router.push({ path: '/hot', query: { id: 123 }})。在目标组件中，通过this.$route.query.id访问。
  • 路由参数：直接在路由路径中定义，如/hot/:id，并通过this.$router.push({ name: 'hot', params: { id: 123 }})传递。在目标组件中，使用this.$route.params.id访问，或者更推荐使用Composition API的useRoute获取路由信息，并通过props解构参数。
<template>
    <div>
        hot --- {{ $route.params.id }} --- {{ props.id }}

    </div>
</template>

<script setup>
const props = defineProps({
    id: String
})
</script>

<style lang="css" scoped>

</style>

持续学习与进阶

Vue生态系统庞大，除了基础的Vue.js框架，还有Vuex状态管理、Vue Router路由管理、Vue Test Utils测试工具等，都是值得深入学习的内容。官方文档(Vue.js中文文档)是最佳的学习资源，此外，参与社区讨论、阅读高质量的技术博客和教程，也是提升技能的有效途径。

总之，通过上述步骤，你已经成功搭建起Vue开发环境。接下来，就是不断探索和实践，开启你的Vue开发旅程，享受构建高效、美观Web应用的乐趣吧！

avatar
文章
阅读
粉丝