引言：
Vue.js是一个流行的前端框架，它提供了一套完整的生态系统，包括Vue CLI、Vite、Vue Router、网页布局和状态管理库Pinia等。通过学习这些工具和库，你可以更高效地开发Vue应用程序。本文将带你了解Vue.js的相关知识点，并提供实践指导，帮助你掌握Vue.js开发的技巧。
一、Vue CLI（服务、插件、安装）
Vue CLI是一个基于Vue.js进行快速开发的完整系统，它提供了一套强大的插件和工具，可以帮助你快速搭建Vue项目。
- 安装Vue CLI：运行
npm install -g @vue/cli。 - 创建Vue项目：运行
vue create my-project。 - 启动开发服务器：在项目目录下运行
npm run serve。
二、Vite（搭建、模板使用）
Vite是一个由Vue作者尤雨溪开发的下一代前端工具，它利用原生ES模块提供快速的开发体验。
- 创建Vite项目：运行
npm init vite@latest。 - 选择Vue模板：在命令行中选择Vue模板。
- 进入项目目录并安装依赖：运行
cd my-vite-project和npm install。 - 启动开发服务器：运行
npm run dev。
三、Vue Router
Vue Router是Vue.js官方的路由管理器，它负责将不同的页面组件映射到不同的路由路径。
- 安装Vue Router：运行
npm install vue-router。 - 配置路由：在
src/router/index.js中创建路由实例并定义路由规则。 - 在应用程序中注册路由：在
src/main.js中导入路由实例并使用Vue.use()注册。
四、网页布局（layout创建、组件使用）
网页布局是指将页面划分为不同的区域，并在这些区域中放置不同的组件。
- 创建布局组件：在
src/components目录下创建布局组件，如Navbar.vue和Footer.vue。 - 在页面组件中使用布局组件：通过
<template>标签将布局组件引入到页面组件中。
五、Pinia
Pinia是一个轻量级、易用的Vue.js状态管理库，它提供了类似于Vuex的状态管理功能。
- 安装Pinia：运行
npm install pinia。 - 创建Pinia store：在
src/stores目录下创建store文件，如user.js。 - 在应用程序中注册Pinia store：在
src/main.js中导入Pinia store并使用Vue.use()注册。
实践：
- 删除HelloWorld.vue，创建Login.vue并在App.vue中引入。
- 在Login.vue中创建userName和passWord变量，并使用v-model进行双向绑定。
- 创建message变量，并使用v-text将其绑定到class为alert的div上。
- 创建msgShow变量，并使用v-show控制class为alert的div的显示。
- 创建checkLogin方法，绑定到登录按钮上，并进行输入校验，将信息输出给message。
- 实现登录逻辑，只有当用户名和密码正确时才能登录。
- 创建Main.vue文件。
- 在router/index.js中配置Main.vue的路由，设置path为'/'。
- 修改checkLogin方法，登录成功后跳转到'/'路径。
- 设置username变量并替换文本。
- 在登出按钮上绑定登出方法（loginOut）。
- 实现登出方法，回到登录页面。
- 完善Login.vue中checkLogin方法的逻辑。
- 模拟user.js中的login，修改logout方法并返回一个简单的对象。
- 在Navbar.vue中调用user.js中的logout方法，并完善登出逻辑。
- 设置路由拦截器，判断没有登录token的用户不能访问私有路由。
总结：
通过学习Vue CLI、Vite、Vue Router、网页布局和Pinia，你可以更高效地开发Vue应用程序。本文提供了Vue.js的相关知识点和实践指导，帮助你掌握Vue.js开发的技巧。希望这篇自学文档能够对你有所帮助。
