使用Vue CLI创建Vue项目并使用Vue Router进行基本配置的步骤

步骤 1: 安装 Vue CLI

首先,确保你的电脑上已经安装了Node.js和npm。然后,通过以下命令安装Vue CLI(如果已经安装,请跳过此步骤):

npm install -g @vue/cli

步骤 2: 创建新的Vue项目

使用Vue CLI创建一个新的Vue项目。在命令行中执行以下命令:

vue create vue-router-demo

这将创建一个名为vue-router-demo的新目录,并安装Vue.js的基本项目结构和依赖项。

步骤 3: 安装 Vue Router

进入项目目录,并安装Vue Router:

cd vue-router-demo
npm install vue-router

步骤 4: 创建和配置路由

在项目的根目录(src目录下)创建一个新文件夹router,然后在其中创建一个名为index.js的文件。在该文件中配置路由:

// src/router/index.jsimport Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);// 定义路由
const routes = [{path: '/',name: 'Home',component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')},{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')}
];// 创建 Router 实例
const router = new VueRouter({mode: 'history', // 可选:'hash' | 'history'base: process.env.BASE_URL,routes
});export default router;

步骤 5: 创建视图组件

src/views目录下创建两个Vue组件文件:Home.vueAbout.vue,并编写内容:

<!-- src/views/Home.vue -->
<template><div><h1>Home</h1><p>Welcome to the Home Page!</p></div>
</template><script>
export default {name: 'Home'
}
</script>
<!-- src/views/About.vue -->
<template><div><h1>About</h1><p>This is an About Page.</p></div>
</template><script>
export default {name: 'About'
}
</script>

步骤 6: 在主应用程序中使用路由

src/main.js中导入创建的路由,并将其挂载到Vue实例中:

// src/main.jsimport Vue from 'vue';
import App from './App.vue';
import router from './router';Vue.config.productionTip = false;new Vue({router,render: h => h(App),
}).$mount('#app');

步骤 7: 创建入口组件

创建入口组件App.vue并定义主要的应用程序结构:

<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script>

步骤 8: 运行和测试

最后,在项目根目录下运行以下命令启动开发服务器,并在浏览器中查看效果:

npm run serve

这将启动一个开发服务器,你可以在浏览器中访问http://localhost:8080查看你的Vue应用程序,点击导航链接测试路由切换。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/863370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HPC高性能计算课程(乔治亚理工)

HPC科学计算 Edmond Chow教授主页 学习笔记

【Mac】Listen 1 for Mac(最强的音乐搜索工具)软件介绍

软件介绍 Listen 1 for Mac 是一款非常方便的音乐播放软件&#xff0c;主要功能是集成多个音乐平台&#xff0c;让用户可以方便地搜索、播放和管理音乐。它是一个用 Python 语言开发的免费开源综合音乐搜索工具项目&#xff0c;最大的亮点在于可以搜索和播放来自网易云音乐&am…

实用的vueuseHooks,提高编码效率

文章目录 写在前面vueuse 官网安装HooksuseStorage [地址](https://vueuse.org/core/useStorage/)传统方法数据持久化 举例子传统持久化的弊端useStorage 数据持久化 举例子使用useStorage 更改存储数据使用useStorage 删除存储数据 useScriptTag [地址](https://vueuse.org/co…

matlab中simulink仿真软件的基础操作

&#xff08;本内容源自《详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真》 刘学勇编著的第二章内容&#xff0c;有兴趣的可以阅读该书&#xff09; 例&#xff1a;简单系统输入为两个不同频率的正弦、余弦信号&#xff0c;输出为两信号之和&#xff0c;建立模型。 在…

论文阅读_OpenAI嵌入+Lucene

英文名称: Vector Search with OpenAI Embeddings: Lucene Is All You Need 中文名称: 使用OpenAI嵌入进行向量搜索&#xff1a;只需Lucene 链接: http://arxiv.org/abs/2308.14963v1 作者: Jimmy Lin, Ronak Pradeep, Tommaso Teofili, Jasper Xian 机构: 滑铁卢大学戴维切里顿…

锁机制 -- 概述篇

锁机制 1、概述 ​  加锁是为了解决并发场景下&#xff0c;多个线程对同一资源同时进行操作&#xff0c;而导致同一线程多次操作出现结果不唯一的情况&#xff08;一次操作包含多条指令&#xff09;。结果不唯一发生的原因在于指令的错乱&#xff0c;前提条件是多线程环境及…

k8s_如何查看container拉取的镜像

当 Kubernetes (k8s) 使用 containerd 作为容器运行时时,可以通过以下方法查看 Kubernetes 集群中拉取的镜像。可以直接在每个节点上使用 containerd 的命令行工具 ctr 来查看已经拉取的镜像。 方法一:使用 ctr 查看节点上的镜像 确保 containerd 已安装并运行: 在 Kuberne…

全面解析:微软Edge浏览器支持的PDF文件操作功能

微软Edge浏览器&#xff0c;作为Windows 10及更高版本操作系统的默认浏览器&#xff0c;不仅提供了快速、安全的网页浏览体验&#xff0c;还内置了对PDF文件的多种操作功能。本文将详细探讨Edge浏览器支持的PDF文件操作&#xff0c;帮助用户更有效地利用这一功能强大的浏览器。…

双指针算法第一弹(移动零 复写零 快乐数)

目录 前言 1. 移动零 &#xff08;1&#xff09;题目及示例 &#xff08;2&#xff09;一般思路 &#xff08;3&#xff09;双指针解法 2. 复写零 &#xff08;1&#xff09;题目及示例 &#xff08;2&#xff09;一般解法 &#xff08;3&#xff09;双指针解法 3. 快…

61.ThreadLocal认识和使用

ThreadLocal介绍 ThreadLocal类用来提供给线程内部的局部变量。 这种变量在多线程环境下访问(通过get和set方法访问)时能保证各个线程的变量相对独立于其他线程内的变量。 ThreadLocal实例通常来说都是private static类型的,用于关联线程和线程上下文。 ThreadLocal的作用…

MySQL之索引创建原则

索引创建原则有哪些&#xff1f; 1.针对数据量较大&#xff0c;且查询比较频繁的表建立索引。&#xff08;单表超过10w数据&#xff09; 2.针对常作为查询条件&#xff08;where&#xff09;、排序&#xff08;order by&#xff09;、分组&#xff08;group by&#xff09;操…

Hadoop 安装与伪分布的搭建

目录 1 SSH免密登录 1.1 修改主机名称 1.2 修改hosts文件 1.3 创建hadoop用户 1.4 生成密钥对免密登录 2 搭建hadoop环境与jdk环境 2.1 将下载好的压缩包进行解压 2.2 编写hadoop环境变量脚本文件 2.3 修改hadoop配置文件&#xff0c;指定jdk路径 2.4 查看环境是否搭建完成 3 …

Clickhouse 常见操作

数据查询 从json array string中解析字段 json array string 为json.dumps(array(dict)) select JSONExtractString(row,"Date") as Date from( select arrayJoin(JSONExtractArrayRaw(Remarks)) as row from table x )JSONExtractArrayRaw&#xff1a; 将JsonS…

python中的相对路径

在Python中&#xff0c;相对路径是相对于当前工作目录&#xff08;由os.getcwd()返回&#xff09;的路径。当你想要引用当前目录、父目录或子目录中的文件或目录时&#xff0c;你会使用相对路径。 以下是一些常见的相对路径写法&#xff1a; 引用当前目录下的文件或目录&#…

C# Modbus设备信息加载的实现方式(2)

GlobalProperties是一个全局的数据&#xff0c;类似CoreData&#xff1a; public class GlobalProperties{public static Device Device { set; get; }public static Action<int, string> AddLog;public static SysAdmin CurrentAdmin;public static ModbusTCP Modbus { …

基于Spring Boot的药房信息管理系统

1 项目介绍 1.1 研究的背景及意义 随着社会的飞速进步和药房行业竞争的白热化&#xff0c;传统的手工管理模式已难以适应药房信息管理的现代化需求。在计算机科学技术日臻完善的背景下&#xff0c;药房信息管理者们日益认识到运用计算机技术进行信息管理的迫切性和重要性。计…

【Git】LFS

什么是lfs Git 是分布式 版本控制系统&#xff0c;这意味着在克隆过程中会将仓库的整个历史记录传输到客户端。对于包涵大文件&#xff08;尤其是经常被修改的大文件&#xff09;的项目&#xff0c;初始克隆需要大量时间&#xff0c;因为客户端会下载每个文件的每个版本**。Gi…

快手正式推出Vision Pro版本,引领虚拟现实社交新潮流

6月28日&#xff0c;快手正式推出其专为Apple Vision Pro打造的版本——快手vp版app&#xff0c;成为国内首批登陆Apple Vision Pro的短视频平台。 借助先进的虚拟现实技术&#xff0c;用户可以在快手上体验更真实生动的视频内容&#xff0c;无论是观看趣味短视频内容&#xf…

产品是应该有生命力的

产品是应该有生命力的 在日新月异的商业环境中&#xff0c;产品被寄予厚望&#xff0c;不仅仅满足基本功能需求&#xff0c;而是要能够自我革新&#xff0c;适应市场和技术的快速变化&#xff0c;以及持续吸引并留住用户。 这种生命力体现在产品的迭代升级能力、对用户需求的精…

[鹏城杯 2022]babybit

发现一个压缩包提取出来提取出来两个压缩包里面是注册表使用MiTeC Windows Registry Recovery 恢复注册表 flag在ROOT\ControlSet001\Control\FVEStats里的OsvEncryptInit和OsvEncryptComplete中 NSSCTF{2022/6/13_15:17:39_2022/6/13_15:23:46}