vite NavBar实例
时间: 2023-10-05 08:06:56 浏览: 48
以下是使用 Vite 和 Vue.js 创建一个 Navbar 组件的示例:
1. 创建一个新的 Vue.js 项目并安装 Vite:
```
npm init @vitejs/app my-project
cd my-project
npm install
```
2. 创建一个名为 `Navbar.vue` 的新组件:
```html
<template>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: "Navbar",
};
</script>
<style>
/* Optional CSS styling */
</style>
```
3. 在 `App.vue` 文件中导入 `Navbar.vue` 组件并使用它:
```html
<template>
<div>
<Navbar />
<p>Main content goes here.</p>
</div>
</template>
<script>
import Navbar from "./components/Navbar.vue";
export default {
name: "App",
components: {
Navbar,
},
};
</script>
<style>
/* Optional CSS styling */
</style>
```
4. 运行项目:
```
npm run dev
```
打开浏览器并访问 `http://localhost:3000`,即可看到 Navbar 组件已经成功显示在页面上。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)