【Web开发手礼】探索Web开发的魅力（十一）-Vue（1）配置环境、创建导航栏、各页面整体框架

程序猿零零漆

于 2024-07-28 06:30:00 发布

阅读量967

点赞数 31

分类专栏： Web应用文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_63267251/article/details/140725306

版权

Web应用专栏收录该内容

18 篇文章 0 订阅

订阅专栏

主要讲解了vue的下载、配置环境、项目创建、导航栏、页面整体框架！！！

前言

主要讲解了vue的下载、配置环境、项目创建、导航栏、页面整体框架！！！

配置环境

终端

Linux和Mac上可以用自带的终端。
Windows上推荐用powershell或者cmd。Git Bash有些指令不兼容。

安装Nodejs

安装地址

安装@vue/cli

打开Git Bash，执行：

npm i -g @vue/cli

如果执行后面的操作有bug，可能是最新版有问题，可以尝试安装早期版本，比如：npm i -g @vue/cli@4

启动vue自带的图形化项目管理界面

vue ui

常见问题1：Windows上运行vue，提示无法加载文件，表示用户权限不足。
解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned，然后输入y

安装vue-router插件和vuex插件

安装bootstrap依赖

项目启动

当我们发现浏览器中的路径中带有#号

去除#号只需要在项目的router文件夹中的index.js文件中

删除这两个Hash即可。

基本概念

一个.vue文件主要由template、script、style三部分组成。

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部分

<style>标签添加scope属性后，不同组件间的css不会相互影响。

第三方组件

view-router包：实现路由功能。

vuex：存储全局状态，全局唯一。

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

创建导航栏

引入bootstrap框架，在main.js中


import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap'

当报以上错误时。我们去装一下@popperjs/core依赖即可

不同页面如果有公共的一部分，我们就可以把公共的部分抽象成一个组件来加以复用。

<template>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Myspace</a>
    <button class="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 active"  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 scoped>

</style>

当我们需要在别的页面用该组件时，就需要在别的页面的script中声明该组件并在components中说明该组件

<script>
import NavBar from './components/NavBar.vue';
export default{
  name: "App",
  components: {
    NavBar
  }

}
</script>

在App.vue中如下代码：

<template>
  <NavBar></NavBar>
  <router-view/>
</template>

<script>
import NavBar from './components/NavBar.vue';
export default{
  name: "App",
  components: {
    NavBar
  }

}
</script>

<style>
</style>

当我们将公共部分抽象成组件之后，并且在页面引入后，需要在里面写子类元素，那么组件内部需要加上slot标签。

以上错误是我们文件的命名至少需要两个大写的字母。

引入卡片，让我们页面展示的内容放在card中，便于展示。

<template>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name: "ContentBase",
}
</script>

<style scoped>
.container{
    margin-top: 20px;
}
</style>

分别创建对应的好友列表、用户动态、首页、注册、404界面

在router文件夹下面的index.js里面写路由来设置，对应的路径访问对应的那个页面

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NotFoundView from '@/views/NotFoundView.vue';
import RegisterView from '@/views/RegisterView.vue';
import UserListView from '@/views/UserListView.vue';
import UserProfileView from '@/views/UserProfileView.vue';
import LoginView from '@/views/LoginView.vue';
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/userlist',
    name: 'userlist',
    component: UserListView
  },
  {
    path: '/userprofile',
    name: 'userprofile',
    component: UserProfileView
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/:catchAll(.*)',
    name: '404',
    component: NotFoundView
  }
]

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

export default router

引入模块和视图组件：

createRouter 和 createWebHistory 是 Vue Router 提供的函数，用于创建路由实例和指定路由模式。
HomeView、NotFoundView、RegisterView、UserListView、UserProfileView 和 LoginView 是从文件路径引入的 Vue 组件，用于在不同的路由路径下显示不同的页面内容。

定义路由配置 (routes 数组)：

routes 数组包含了每个路由的配置对象。

每个配置对象包括：

path: 路径，指定了该路由对应的 URL 路径。
name: 路由的名称，用于在程序中标识和调用该路由。
component: 路由对应的 Vue 组件，即访问该路径时要渲染的内容。

创建和配置路由实例 (router)：

使用 createRouter 函数创建一个 Vue Router 实例。
history: createWebHistory() 指定使用 HTML5 history 模式，这种模式允许在不重新加载页面的情况下使用标准的 URL。
routes 是之前定义的路由配置数组。

导出路由实例 (router)：

通过 export default 将创建的路由实例 router 导出，以便在 Vue 应用中使用。

当我们对链接进行点击希望页面跳转，但是并不想让页面进行刷新（即前端渲染）。那么此时就需要使用<router-link>标签。

<router-link  class="navbar-brand" :to="{name: 'home'}">Myspace</router-link>
<router-link class="nav-link active" :to="{name: 'home'}">首页</router-link>
<router-link class="nav-link" :to="{name: 'userprofile'}">用户动态</router-link>
<router-link class="nav-link " :to="{name: 'login'}">登录</router-link>
<router-link  class="nav-link" :to="{name: 'register'}">注册</router-link>

通过设置 :to 属性来指定每个链接的目标路由，可以轻松实现页面间的跳转。其中:to中的name的值是router文件夹中的index.js中每个对应对应设置的name值。