主要讲解了vue的下载、配置环境、项目创建、导航栏、页面整体框架！！！
文章目录
前言
配置环境
终端
安装Nodejs
安装@vue/cli
启动vue自带的图形化项目管理界面
基本概念
script部分
template部分
style部分
第三方组件
创建导航栏
总结
前言
主要讲解了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值。
总结
主要讲解了vue的下载、配置环境、项目创建、导航栏、页面整体框架！！！
