当前位置：首页 > news >正文

厦门企业制作网站方案建设网站企业公司

news 2025/11/3 22:24:11

厦门企业制作网站方案,建设网站企业公司,用静态网站更新,网页设计导航栏代码怎么写笔记内容转载自 AcWing 的 Web 应用课讲义，课程链接：AcWing Web 应用课。 CONTENTS 1. 环境配置2. 基本概念3. 导航栏4. 页面创建5. 用户动态页面实现 Vue 官网：Vue.js。 Vue.js 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML…

笔记内容转载自 AcWing 的 Web 应用课讲义，课程链接：AcWing Web 应用课。

1. 环境配置
2. 基本概念
3. 导航栏
4. 页面创建
5. 用户动态页面实现

Vue 官网：Vue.js。

Vue.js 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用Vue。

Vue 与 React 的区别主要在于：

React 的思路是 HTML in JavaScript，也可以说是 All in JavaScript，通过 JavaScript 来生成 HTML，所以设计了 JSX 语法，还有通过 JS 来操作 CSS。
Vue 是把 HTML、CSS、JS 组合到一起，用各自的处理方式，Vue 有单文件组件，可以把 HTML、CSS、JS 写到一个文件中，HTML 提供了模板引擎来处理。
React 整体是函数式的思想，在 React 中是单向数据流，推崇结合 immutable 来实现数据不可变。
Vue 的思想是响应式的，也就是基于数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式地更新对应的虚拟 DOM。

总的来说，React 的性能优化需要手动去做，而 Vue 的性能优化是自动的，但是 Vue 的响应式机制也有问题，就是当 state 特别多的时候，Watcher 会很多，会导致卡顿。所以大型应用（状态特别多的）一般用 React，更加可控。而考虑易用性方面，Vue 是更容易上手的，对于项目来说新人更容易接手。

1. 环境配置

首先需要安装 Node.js：NodeJS 的安装及配置（2023.10.14 V18.18.2）。

打开 PowerShell，安装 @vue/cli：

npm i -g @vue/cli

Vue 相比于 React 的其中一个好处是默认提供了一个图形化的项目管理界面，在想要创建项目的文件夹下以管理员身份打开终端输入以下命令：

vue ui

然后我们创建一个名为 my_space 的项目，包管理器选择 npm，然后选上无新手指引的脚手架项目（Scaffold project without beginner instructions），预设选择 Vue3，然后创建项目。

项目创建好后在左侧能够看到导航栏，进入插件页面（Plugins）安装以下插件，其中 @vue/cli-plugin-router 用于多页面路由，@vue/cli-plugin-vuex 类似于 React 中的 Redux，可以让我们在多个组件之间维护同一个数据：

@vue/cli-plugin-router
@vue/cli-plugin-vuex

然后我们在依赖页面（Dependencies）安装 Bootstrap。

最后在任务页面（Tasks）的 serve 选项卡中可以运行项目，运行后在输出（Output）中可以看到网站链接：http://localhost:8080/，访问该链接即可看到 Vue 的初始化页面。

我们用 VS Code 打开项目的根目录，源代码位于 src 目录下，其中的 views 目录类似于 Django 中的 Views，每一个页面是一个 View；router 目录是路由，打开可以看到默认有两个路由分别是 / 和 /about；components 目录用于存放各种组件（views 也能存放组件，根据个人习惯决定）；App.vue 为根组件，整个项目的入口在 main.js 文件中。

仔细看一下页面的链接会发现其中有一个 #，如果想去掉可以将 router 目录下 index.js 文件中的 createWebHashHistory 修改为 createWebHistory（有两处需要修改）。

在 main.js 文件中可以看到以下代码：

createApp(App).use(router).use(store).mount('#app')

其中创建了我们的根组件 App，router 就表示路由，store 即 vuex，然后将其挂载到 #app 标签上，该标签可以在 public/index.html 中看到。

2. 基本概念

每一个 .vue 文件都会由三个部分组成：HTML、CSS、JS。其中 CSS 的标签可以加一个属性 scoped，这样不同组件之间的 CSS 选择器就不会相互影响到了：

<style scoped>...
</style>

我们的每个页面中都可能由多个组件组成，每个组件是一个 .vue 文件，可以用以下的方式引入 HelloWorld 组件，并传递 msg 属性给该组件：

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>

HelloWorld 组件需要 export 出去：

<script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script>

其中 props 中的属性可以在创建该组件的父组件中传递进来。

现在我们来具体了解一下 <script> 中的 export default 的参数：

name：组件的名称。
components：存储 <template> 中用到的所有组件。
props：存储父组件传递给子组件的数据。
watch()：当某个数据发生变化时触发。
computed：动态计算某个数据。
setup(props, context)：初始化变量、函数。
- ref：定义变量，可以用 .value 属性重新赋值。
- reactive：定义对象，不可重新赋值。
- props：存储父组件传递过来的数据。
- context.emit()：触发父组件绑定的函数。

然后是 <template> 中的内容：

<slot></slot>：存放父组件传过来的 children。
v-on:click 或 @click 属性：绑定事件。
v-if、v-else、v-else-if 属性：判断。
v-for 属性：循环，:key 循环的每个元素需要有唯一的 key。
v-bind: 或 :：绑定属性。

<style> 部分需要注意的就是添加 scope 属性后，不同组件间的 CSS 不会相互影响。

最后是第三方组件：

view-router：实现路由功能。
vuex：存储全局状态，全局唯一。
- state：存储所有数据，可以用 modules 属性划分成若干模块。
- getters：根据 state 中的值计算新的值。
- mutations：所有对 state 的修改操作都需要定义在这里，不支持异步，可以通过 $store.commit() 触发。
- actions：定义对 state 的复杂修改操作，支持异步，可以通过 $store.dispatch() 触发。注意不能直接修改 state，只能通过 mutations 修改 state。
- modules：定义 state 的子模块。

这些概念先不用背，之后用到时再回来理解什么意思即可。

3. 导航栏

我们将整个页面分为导航栏（NavBar）和内容部分（Content），导航栏在每个页面都是固定不变的，变化的只有内容部分。我们将要实现首页、好友列表、用户动态、登录、注册以及404页面，每个页面我们都可以实现为一个组件。

在根 JS 文件 main.js 中引入 Bootstrap：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'createApp(App).use(router).use(store).mount('#app')

这时候会报错，提示我们没有找到模块 @popperjs/core，这时我们需要去项目管理页面的依赖页面中安装 @popperjs/core 依赖。

现在先把 HelloWorld.vue 删掉，然后把 HomeView.vue 中关于 HelloWorld 组件的内容删去，在 components 目录下创建 NavBar.vue，我们现在先不实现路由功能，直接去 Bootstrap 官网找一个导航栏复制过来：

<template><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container"><a class="navbar-brand" href="#">My Space</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">好友列表</a></li><li class="nav-item"><a class="nav-link" href="#">用户动态</a></li><li class="nav-item"><a class="nav-link" href="#">关于</a></li></ul><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li></ul></div></div></nav>
</template><script>
export default {name: "NavBar",
};
</script><style></style>

然后我们在 App.vue 中把导航栏组件添加进来，并删去原本的内容：

<template><NavBar /><router-view />
</template><script>
import NavBar from "@/components/NavBar.vue";export default {name: "App",components: {NavBar: NavBar,},
};
</script><style></style>

4. 页面创建

首先我们用 Bootstrap 的 Card 先实现一个卡片组件 Card.vue：

<template><div class="container"><div class="card"><div class="card-header"><h3>{{ title }}</h3></div><div class="card-body"><slot></slot></div></div></div>
</template><script>
export default {name: "Card",props: {title: String,},
};
</script><style scoped>
.card {margin-top: 20px;
}
</style>

注意，如果发现报错：Component name "Card" should always be multi-word vue/multi-word-component-names，说明文件名没有驼峰命名，可以在 package.json 文件的 rules 中添加一行代码，然后停止项目重新启动即可：

"vue/multi-word-component-names": "off"

然后我们在 HomeView 中即可使用这个组件：

<template><Card title="首页">这是首页内容</Card>
</template><script>
// @ is an alias to /src
import Card from "@/components/Card.vue"export default {name: "HomeView",components: {Card: Card,},
};
</script>

可以看到 Card 中使用 {{ msg }} 在 HTML 标签中获取 prop 中 title 的值，该值由父组件 HomeView 传入。<slot></slot> 类似 React 中的 this.props.children。

现在我们可以根据 HomeView 创建其他页面：FriendListView、UserNewsView、LoginView、RegisterView、NotFoundView。

创建好页面后我们需要实现路由，即根据地址来显示对应的组件。在 src/router/index.js 文件中修改：

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView";
import FriendListView from "../views/FriendListView";
import UserNewsView from "../views/UserNewsView";
import LoginView from "../views/LoginView";
import RegisterView from "../views/RegisterView";
import NotFoundView from "../views/NotFoundView";const routes = [{path: "/",name: "home",component: HomeView,},{path: "/friendlist",name: "friendlist",component: FriendListView,},{path: "/usernews",name: "usernews",component: UserNewsView,},{path: "/login",name: "login",component: LoginView,},{path: "/register",name: "register",component: RegisterView,},{path: "/404",name: "404",component: NotFoundView,},{path: "/about",name: "about",component: () => import("../views/AboutView.vue"),},
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

最后我们在导航栏 NavBar 中实现地址的跳转，如果直接在 <a> 标签上写地址那么为后端渲染，即每次切换页面都需要访问一遍后端请求数据，我们可以用 <router-link> 实现前端渲染：

<template><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container"><router-link class="navbar-brand" :to="{name: 'home'}">My Space</router-link><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><router-link class="nav-link" :to="{name: 'home'}">首页</router-link></li><li class="nav-item"><router-link class="nav-link" :to="{name: 'friendlist'}">好友列表</router-link></li><li class="nav-item"><router-link class="nav-link" :to="{name: 'usernews'}">用户动态</router-link></li><li class="nav-item"><router-link class="nav-link" :to="{name: 'about'}">关于</router-link></li></ul><ul class="navbar-nav"><li class="nav-item"><router-link class="nav-link" :to="{name: 'login'}">登录</router-link></li><li class="nav-item"><router-link class="nav-link" :to="{name: 'register'}">注册</router-link></li></ul></div></div></nav>
</template><script>
export default {name: "NavBar",
};
</script><style></style>

其中 :to 表示绑定 to 属性，参数是一个对象，其中的 name 属性表示名称，即之前在 router 中定义的 name。

5. 用户动态页面实现

该页面可以划分为三个模块：用户信息部分、发动态部分（如果是自己才有发动态功能）、历史动态展示部分，因此我们可以用三个组件来实现（在 components 目录下创建 UserNewsInfo.vue、UserNewsSend.vue 以及 UserNewsPosts.vue 三个组件）。

其中 UserNewsInfo 内容如下：

<template><div class="card"><div class="card-body"><div class="row"><div class="col-md-4"><imgclass="img-fluid"src="https://cdn.acwing.com/media/user/profile/photo/82581_lg_e9bdbcb8aa.jpg"/></div><div class="col-md-8"><div class="username">AsanoSaki</div><div class="fans">粉丝：123</div><button type="button" class="btn btn-secondary btn-sm">+关注</button></div></div></div></div>
</template><script>
export default {name: "UserNewsInfo",
};
</script><style scoped>
img {border-radius: 50%;
}button {padding: 2px 4px;font-size: 14px;
}.username {font-size: 20px;font-weight: bold;
}.fans {font-size: 14px;color: gray;
}
</style>