目录
前言：
记录一下我的项目跟练过程
我参考的学习视频：【VUE3后台管理系统】
我的node和vue版本：
如果报错 nodesass错误，大概率是node版本过高
搭建第一个Vite项目
Vite 是一个现代化的构建工具，用于构建 Vue.js、React、Preact 等前端项目。它的一个特性是快速的开发服务器，可以实现热模块重载（HMR）和快速的构建速度。
补充：
Vue.js、React 和 Preact 都是现代化的 JavaScript 前端框架，用于构建用户界面和单页面应用程序（SPA）。
1. Vue.js：Vue.js 是一款由尤雨溪开发的渐进式 JavaScript 框架，它被设计为易于上手且灵活的框架。Vue.js 提供了数据驱动的视图层和可组合的组件系统，使开发者能够轻松构建交互式的用户界面。Vue.js 也被广泛应用于构建单页面应用程序（SPA）和动态网页。
2. React：React 是由 Facebook 开发的一款用于构建用户界面的 JavaScript 库。它将应用程序抽象为组件的层次结构，并采用虚拟 DOM 技术来提高性能。React 的一大特点是声明式编程模型，通过组件化和单向数据流的设计，使得构建大型应用程序更加简单和可维护。
3. Preact：Preact 是一个轻量级的 React 替代方案，它具有与 React 相似的 API 和功能，但体积更小且性能更高。Preact 的目标是保持尽可能小的文件大小，并提供与 React 兼容的开发体验。由于其轻量级和快速的特性，Preact 被广泛应用于对性能要求较高的项目中。
总的来说，这些框架和库都专注于简化前端开发，并提供了丰富的功能和工具来构建现代化的用户界面。开发者可以根据自己的需求和偏好选择适合的框架来开发应用程序。
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
1. vite快速构建一个vue3项目
01. 创建一个vite项目文件my-vue-app
npm create vite@latest my-vue-app -- --template vue
【含义：使用最新版本的 Vite 脚手架工具创建一个名为 my-vue-app 的 Vue.js 项目。】
--template vue 是 Vite 脚手架工具的选项，用于指定要创建的项目模板。这里的 --template vue 意味着要创建一个 Vue.js 项目。
【npm（Node Package Manager）是 Node.js 的软件包管理器，用于安装、分享和管理 Node.js 模块。如果你电脑上没有npm，是要提前安装的，安装 Node.js 时，npm 也会一并安装。Node.js官网: https://nodejs.org/】
02. 创建过程
终端提示接下来要先进入文件夹，安装依赖，然后启动项目的指令。
cd my-vue-app // 进入my-vue-app文件夹
npm install // 安装所需依赖
npm run dev // 启动项目
那初始的界面就是如下所示了：
用VSCode打开my-vue-app项目，可以发现该项目文件夹最开始有如下文件：
设置一个小细节：
2. vue3引入 elementPlus
01. 安装elementPlus
在vsCode里面打开终端(Terminal)，输入指令：
npm install element-plus --save
完整引入：
main.js vite.config
在全局配置文件main.js中引入并使用：
import ElementPlus from 'element-plus'
const app = createApp(App) //原来就有createApp(App)，把它赋给app后续写更方便
app.use(ElementPlus)3. vue3引入路由
01. 安装路由
npm install vue-router -S
使用 npm 安装 Vue.js 的路由管理器 vue-router，并将其添加到当前项目的依赖项中。解释一下各个部分的含义：
1. npm install：这是 npm 包管理器的命令之一，用于安装 Node.js 包或模块。
2. vue-router：这是要安装的包的名称，即 Vue.js 的官方路由管理器。
3. -S 或 --save：这是 npm 安装时的一个选项，它表示将安装的包添加到项目的 package.json 文件的 dependencies 中。这样做的好处是，当其他开发者或持续集成系统（如 CI/CD）在新环境中部署项目时，可以轻松地安装所有依赖项。
02. 写路由配置文件
在源文件src下创建router/index.js
- 在全局配置文件main.js中引入(import)和使用(use)router
import router from './router/index'
app.use(router)
app.mount('#app')- 在父组件中调用<router-view/>可以显示子组件的内容
eg:在src/App.vue下：
<template>
<router-view></router-view>
</template>这样会显示子组件的内容，当然前提是你在第2步写路由配置文件时写好了自己想要的效果
eg: src/router/index.js文件
// 路由的配置文件
import { createRouter, createWebHashHistory } from "vue-router"
// 1. 创建路由
const routes = [
{
path: '/',
name: 'home1',
component: () => import('../views/Main.vue'),
redirect: '/home',
// children:[
// {
// path: '/home',
// name: 'home',
// component: () => import('../views/home/Home.vue')
// },
// {
// path: '/user',
// name: 'user',
// component: () => import('../views/user/User.vue')
// },
// {
// path: '/page1',
// name: 'page1',
// component: () => import('../views/Page1.vue')
// },
// {
// path: '/page2',
// name: 'page2',
// component: () => import('../views/Page2.vue')
// }
// ]
children:[]
},
// 登录页面
{
path: '/login',
name: 'login',
component: ()=> import('../views/Login.vue')
}
]
// 2. 创建路由器
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 3. 暴露路由
export default routerroutes是一个数组对象，数组里面存放着多个对象，每个对象{ }括起来是一个路由的详细信息。路由一般有path, name, component, 其中component写你自己定义的组件，name是自己给该路由起的名字，path是路径(显示到浏览器url上的那个路径)。 看下第3步的代码：
import router from './router/index'
app.use(router)
app.mount('#app')最后一个语句是把app挂载了，项目启动之后先去找App组件，App里面的<router-view></router-view>，有对应路由的显示。因为我们在入口文件main.js中既引入了路由又使用了路由，app.use(router)就会自动去找匹配的路由文件'./router/index'，这样就显示对应的界面。
报path错误的原因是：
细节：
组件加载问题：应该是 component，因为定义的组件是单个组件，而不是多个组件。
但是缺少Home组件的显示
将home的path写成 / 或者空就正常显示
/ 代表应用程序的根路径，不代表任何具体的父路由
03. layout整体布局的实现
比如我们要实现如下图所示效果：
分析一下：
这个界面有三部分组件组成，左边1. el-aside，右边有两个，分别是头部2. el-header
和3. el-main。
在src/views下创建Main.vue，为了做一个layout整体布局。在src/components下面创建两个vue组件：
CommonAside.vue(写实现1框里面的代码：左侧菜单的展示，布局是el-aside)，
CommonHeader(实现2框里面的代码：右边上侧部分的显示，布局是el-header)
CommonAside.vue实现左侧菜单的展示，布局是el-aside，该布局下是用菜单(el-menu标签)显示。每个菜单子项目都是由icon和label组成，icon可以用component组件component :is来实现动态引入
当组件A有所操作，组件B要对应变化，这种动态实现，我们借助vuex(是一种组件间通信的方式)
安装
npm install vuex@next --save
在2022年以后 vue3成为默认版本
注意： vue2用vuex3
Vue3用vuex4
下载完成后，在src下新建文件夹 store 建文件index.js， 写入内容
在main.js中配置【引入(import)，使用(use)】
补充：
<style lang="less">代表什么?
<style lang="less"> 标签代表使用 Less（Leaner Style Sheets）预处理器编写的样式表。Less 是一种 CSS 预处理器，它扩展了 CSS 语言，提供了许多增强和额外的功能，如变量、嵌套规则、混合、运算、函数等，以便更有效地编写和管理样式。
使用 <style lang="less"> 标签时，其中的样式代码将会被 Less 编译器处理，最终输出为普通的 CSS 样式表，然后被浏览器解析和渲染。
通过使用 Less，开发人员可以更轻松地组织和维护样式代码，并且可以利用 Less 提供的强大功能来减少样式表的重复性，增加代码的可重用性和可维护性。
Less 是一种 CSS 预处理器，它扩展了 CSS 语言，使得 CSS 样式表的编写更加高效和灵活。Less 提供了许多有用的功能，例如变量、嵌套、混合、运算等，这些功能让前端开发人员可以更轻松地管理和组织 CSS 代码，同时提高了代码的可维护性和可重用性。
如果你在前端项目中创建了一个名为 index.less 的文件，并且希望在项目中使用 Less 来编译这个 Less 文件生成对应的 CSS 文件，那么你需要确保你的项目中安装了 Less 的相关依赖。通常情况下，你可以使用 npm 或者 yarn 等包管理工具来安装 Less：
npm install less --save-dev
display: flex; 会使得弹性盒子容器的子元素在主轴（main axis）上排列
主轴（main axis）的方向取决于弹性盒子容器的 flex-direction 属性。flex-direction 属性决定了弹性项目的排列方向，因此也就决定了主轴的方向。flex-direction 的默认值是 row，在这种情况下，主轴是水平的，从左到右。
交叉轴是一个相对概念，它相对于主轴而言。align-items: flex-start; 是用于 Flexbox 布局的 CSS 属性之一，它用于指定弹性盒子容器（flex container）中的所有弹性项目（flex items）在交叉轴（cross axis）上的对齐方式。
具体来说，align-items 属性控制了弹性项目在交叉轴上的对齐方式，当设置为 flex-start 时，弹性项目将会在交叉轴的起始位置（顶部或者左侧，取决于交叉轴的方向）上对齐。
flex-direction 属性默认为 row（主轴是：水平方向），那么交叉轴就是垂直方向，
align-items: flex-start; 将使得弹性项目在垂直方向上顶部对齐；
& > .el-container中 & 是什么意思 ？
在 Sass（Syntactically Awesome Stylesheets）中，& 是一个特殊的占位符，代表上一级父选择器。它在嵌套规则中用于引用父选择器，以便在 CSS 规则中生成特定的选择器。
在给定的代码中，& > .el-container 表示引用上级选择器 .common-layout 并选择其子元素中具有类名为 .el-container 的元素。它的含义是限定了选择器仅在包含 .common-layout 类的元素下的 .el-container 类元素上生效。
通过使用 &，我们可以在嵌套规则中构建出更具层次结构和特定性的选择器。这样可以更方便地组织样式代码，并且保持选择器的可读性和一致性。
4. store部分
- 先下载vuex依赖
- src下建立store/index.js Index.js是store的配置文件，import { createStore } from “vuex”
- 在main.js中全局引入store
- 在需要改变状态的组件中 引用 import { useStore } from ‘vuew’ 和使用 let store = useStore()
5. Mock部分
Mock （adj模拟的,虚假的）
Q： 什么是mock？
在软件测试过程中，对于一些不容易构造、获取的对象，用一个虚拟的对象来替代它，以达到相同的效 果，这个虚拟的对象就是Mock。
在前后端分离项目中，当后端工程师还没有完成接口开发的时候，前端开发工程师利用Mock技术，自己用mock技术先调用一个虚拟的接口，模拟接口返回的数据，来完成前端页面的开发。
本地mock的模拟
- 安装mockjs npm install mockjs -S
- src下创建文件夹和文件 api/mockData/home.js ，写getHomeData，返回一个数据
- api下创建mock.js 【设定拦截请求的地址并返回相关数据】 引入Mock, 并且引入homeApi
import Mock from ‘mockjs’
import homeApi from ‘./mockData/home.js’
Mock.mock('/home/getData', homeApi.getHomeData)- 将mock引入全局配置文件main.js中 import './api/mock.js' 就可以运用mock了
- 在Home.vue就可以运用mock的拦截
6. 异步调用请求 ajax，常用axios
- 安装axios npm install axios -S
- 线上mock的模拟
在axios请求时，写好get请求的接口路径就好(接口老师给好了)
7. 二次封装axios
- 在src/api下新建request.js用来配置二次封装axios
- src下新建config/index.js:环境配置文件
【一般在企业级项目里面有3个环境：1.开发环境 2.测试环境 3.线上环境】
- 在src/api下新建api.js，用于整个项目api的管理
- 在main.js中全局挂载api：
import api from './api/api.js'
app.config.globalProperties.$api = api我在fastmock上用的时候发现了他要停服了，关闭了接口服务，难怪not found。 这是官网底下提醒的：
重要通知
fastmock从上线至今已有五年时间，经过了无数个迭代，fastmock已经能稳定运行，但是， 公安机关反映 fastmock 存在一定的安全风险，随着用户量增长，这种风险也会越来越大， 所以，怀着沉痛的心情通知大家，fastmock 将在近期停服，目前已经关闭接口服务，所有mock接口请求都会返回404。 web服务暂时保持正常，以供用户导出备份接口文本内容 给大家带来的影响，深感抱歉。 有需要离线部署包的，可以联系我进行私有化部署，近期我会完善部署包部署文档，配置文档等
async await 是成对出现的
8. 安装echarts
npm install echarts -S
9. 面包屑的实现
跨组件通信 用vuex实现
在store/index.js中写
用户新增数据的实现：
- 先写一个增加接口 在api.js中写：
addUser(params){
return request({
url: '/user/add',
method: 'post',
mock: false,
data: params
})
}- mock.js
Mock.mock(/user\/add/, 'post', userApi.createUser)- User.vue
10. 登录页静态页面实现
#权限管理
根据用户登录的角色不同，返回的左侧的操作菜单也不一样：
- 登录页面
- 登录以后，返回左侧的菜单列表
- 存储到vuex当中，在Aside显示出来
- 解决持久化的数据问题（vuex的弊端）
经典问题：在做权限管理时，登录了刷新页面之后没有menu了，显示不出来，丢失了
持久化： 这个数据能一直在界面显示，就算刷新了也有
解决：
Index.js文件 addMenu(state){...}
App.vue文件
11. 动态路由
#路由守卫
根据token做路由守卫，用vuex来管理(写在store.index里)
注意： 有时候前端没有显示不一定是取数据没取到的原因，有可能是样式设置的不合适
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
