使用Vite工具创建项目,并使用Vue Router步骤

步骤 1: 安装 Vite

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

bash 复制代码
npm install -g create-vite

步骤 2: 创建新的Vue项目

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

bash 复制代码
create-vite vue-router-demo --template vue

这将创建一个名为vue-router-demo的新目录,并使用Vite的Vue模板初始化项目结构。

步骤 3: 安装和配置 Vue Router

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

bash 复制代码
cd vue-router-demo
npm install vue-router@next

步骤 4: 创建和配置路由

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

javascript 复制代码
// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

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

export default router;

步骤 5: 创建视图组件

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

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>
vue 复制代码
<!-- 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应用程序中:

javascript 复制代码
// src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

步骤 7: 创建入口组件

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

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: 运行和测试

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

bash 复制代码
npm run dev

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

相关推荐
脑袋大大的21 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0130 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui