Vue2后台管理学习笔记

news/2025/3/10 3:58:12/文章来源:https://www.cnblogs.com/mdyyyds/p/18760075

1 、调试环境

1.1 NVM与NPM区别

NVM 是一个轻量级的工具，通过修改环境变量 PATH 来实现版本切换。它与 npm（Node.js 包管理工具）不同，npm 主要用于管理 Node.js 的包，而 NVM 专注于管理 Node.js 的版本。

1.2 NVM管理多个 Node.js 版本

NVM（Node Version Manager） 是一个用于管理 Node.js 版本的工具，主要用于在同一台机器上安装、切换和管理多个 Node.js 版本。它特别适合开发者在不同项目中需要使用不同版本的 Node.js 的场景。

安装

地址：https://github.com/coreybutler/nvm-windows/releases

NVM 的主要功能

  1. 多版本管理：在一台机器上安装多个 Node.js 版本，并根据需要切换。

  2. 版本切换：通过简单的命令快速切换不同版本的 Node.js。

  3. 项目兼容性：确保不同项目使用的 Node.js 版本与项目需求一致。

  4. 便捷管理：轻松安装、卸载和查看已安装的 Node.js 版本。

使用场景

  • 开发环境：不同项目可能依赖不同版本的 Node.js，NVM 可以帮助开发者快速切换。

  • 测试与部署：确保开发、测试和部署环境的一致性。

安装与使用

  1. 安装：可以从 NVM 官方 GitHub 页面 下载安装脚本。

  2. 常用命令：

    • nvm install <version>：安装指定版本的 Node.js。

    • nvm use <version>：切换到指定版本。

    • nvm list：查看已安装的 Node.js 版本。

    • nvm uninstall <version>：卸载指定版本。

1.3 NPM管理 Node.js 的包

NPM（Node Package Manager） 是一个用于管理 JavaScript 包的工具，主要用于 Node.js 环境。它由 Isaac Schlueter 在 2009 年创建，并且是 Node.js 生态系统中不可或缺的一部分。以下是 NPM 的主要功能和特点：

1. 包管理

  • 安装包：NPM 允许开发者轻松安装和管理 JavaScript 包。例如，你可以通过命令 npm install <package-name> 来安装一个包。

  • 更新包：可以使用 npm update <package-name> 来更新已安装的包。

  • 卸载包：使用 npm uninstall <package-name> 可以卸载不再需要的包。

  • 管理依赖：NPM 会自动解析包的依赖关系，并安装所有必要的依赖项，确保项目能够正常运行。

2. 包仓库

  • NPM 维护了一个庞大的公共包仓库（npmjs.com），其中包含了超过 200 万个开源包。这些包涵盖了各种功能，从工具库、框架到插件等。

  • 开发者可以将自己的包发布到 NPM 仓库，供其他开发者使用。

3. 版本管理

  • NPM 使用语义化版本控制（Semantic Versioning，SemVer）来管理包的版本。这使得开发者可以精确控制包的版本，避免因版本冲突导致的问题。

  • 例如，npm install <package-name>@^1.0.0 会安装最新兼容的 1.x 版本。

4. 项目初始化与配置

  • NPM 提供了 npm init 命令，用于初始化一个新的 Node.js 项目。它会生成一个 package.json 文件，该文件用于记录项目的依赖、版本信息、脚本等配置。

  • package.json 是 NPM 的核心配置文件，它定义了项目的依赖关系、入口文件、脚本命令等。

5. 脚本管理

  • NPM 允许在 package.json 中定义脚本命令，例如：

    "scripts": {
      "start": "node app.js",
      "test": "mocha"
    }

  • 这些脚本可以通过 npm run <script-name> 来运行，例如 npm run start 或 npm run test。

6. 本地开发与全局安装

  • 本地安装：默认情况下，包会被安装到项目的 node_modules 文件夹中，仅供当前项目使用。

  • 全局安装：使用 npm install -g <package-name> 可以将包安装到全局环境中，例如安装命令行工具。

7. 社区与生态系统

  • NPM 的强大之处在于其庞大的社区和丰富的生态系统。几乎所有的 JavaScript 开发者都会使用 NPM 来管理项目依赖。

  • 它不仅支持开源包，还允许企业使用私有包仓库，以满足内部开发的需求。

8.总结

NPM 是 JavaScript 开发中不可或缺的工具，它极大地简化了包的管理、版本控制和项目依赖管理。通过 NPM，开发者可以快速构建项目，并利用丰富的社区资源来提升开发效率。

1.4 Node.js运行环境

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 基于 Chrome V8 引擎构建，以其高性能、非阻塞 I/O 和事件驱动的特性而闻名。它极大地扩展了 JavaScript 的应用场景，使其不再局限于浏览器端，而是能够用于构建高性能的服务器端应用程序、网络工具、命令行工具等。

以下是 Node.js 的主要特点和用途：

1. 核心特点

  • 基于 Chrome V8 引擎：Node.js 使用 Google Chrome 的 V8 JavaScript 引擎，提供了极高的性能和优化。

  • 非阻塞 I/O 和事件驱动：Node.js 采用单线程模型，通过非阻塞 I/O 和事件循环来处理并发任务。这种设计使得 Node.js 在处理大量并发连接时表现出色，特别适合构建高性能的网络应用。

  • 跨平台：Node.js 支持多种操作系统，包括 Windows、Linux 和 macOS。

  • 模块化：Node.js 提供了丰富的内置模块（如 http、fs、path 等），并且通过 npm（Node Package Manager）可以轻松扩展功能。

2. 用途

  • 服务器端开发：Node.js 是构建高性能服务器端应用程序的理想选择。它常用于开发 RESTful API、Web 服务器、实时通信应用（如聊天室）等。

  • 网络工具：Node.js 提供了强大的网络编程能力，可以用来开发各种网络工具，如代理服务器、负载均衡器等。

  • 命令行工具：Node.js 适合开发命令行工具，例如构建工具、代码生成器等。

  • 物联网（IoT）：由于其轻量级和高性能特性，Node.js 也常用于物联网设备的开发。

  • 全栈开发：Node.js 与前端框架（如 React、Vue.js）结合，可以实现全栈开发，提升开发效率。

3. Node.js 的工作原理

  • 事件循环：Node.js 使用事件循环来处理异步任务。当一个任务完成时，它会触发一个事件，事件循环会调用相应的回调函数来处理结果。

  • 非阻塞 I/O：Node.js 的 I/O 操作（如文件读写、网络请求）是非阻塞的。这意味着在等待 I/O 操作完成时，程序不会被阻塞，而是可以继续处理其他任务。

  • 单线程模型：Node.js 采用单线程模型，但通过事件循环和非阻塞 I/O，它可以高效地处理并发任务，而无需多线程。

4. Node.js 的生态系统

  • npm：Node.js 的包管理工具，提供了超过 200 万个开源包，涵盖了各种功能，从工具库到框架。

  • 框架和库：Node.js 社区提供了丰富的框架和库，如 Express.js（Web 框架）、Koa.js、Socket.io（实时通信）、Mongoose（MongoDB ORM）等。

  • 社区支持：Node.js 拥有庞大的开发者社区，提供了丰富的学习资源、文档和开源项目。

5. Node.js 的优势

  • 高性能：非阻塞 I/O 和事件驱动的设计使得 Node.js 在处理高并发时表现出色。

  • 易于学习：对于熟悉 JavaScript 的开发者来说，Node.js 的学习曲线较低。

  • 全栈开发：Node.js 使得开发者可以使用同一种语言（JavaScript）进行前端和后端开发。

  • 社区支持：Node.js 拥有庞大的社区和丰富的生态系统，提供了强大的支持。

6. Node.js 的应用场景

  • Web 应用：构建高性能的 Web 服务器和 RESTful API。

  • 实时应用：如聊天室、在线游戏等，Node.js 的事件驱动特性使其非常适合实时通信。

  • 微服务架构：Node.js 的轻量级特性使其适合构建微服务架构。

  • 数据流应用：Node.js 在处理数据流（如文件上传、下载、流媒体）时表现出色。

总结

Node.js 是一个强大的 JavaScript 运行时环境，以其高性能、非阻塞 I/O 和事件驱动的特性而闻名。它不仅适用于服务器端开发，还广泛应用于网络工具、命令行工具、物联网等领域。Node.js 的生态系统丰富，社区支持强大，是现代 Web 开发和全栈开发中不可或缺的工具。

2、Vue CLI安装及项目配置

地址：https://blog.csdn.net/ZHOUPUYU/article/details/144107049

  • 安装慢使用淘宝镜像来进行安装操作

修改安装镜像地址信息：npm config set registry https://registry.npmmirror.com/ 查看地址是否改变：

npm config get registry

 

  • 安装vue cli

 

npm install -g @vue/cli

 

  • 查看Vue版本信息：

vue -V

 

  • 在文件夹的根目录输入cmd打开终端使用命令创建Vue2项目（不要使用vscode，使用vscode会默认vue3版本）

vue create my-app

 

新建vscode窗口，打开my-app文件夹，终端->命令：npm run serve，就会生成一个链接，使用浏览器可以看到一个Vue页面。

3、Element-ui框架

安装

命令：

npm i element-ui -S

 

完整引入 Element

地址：https://element.eleme.cn/#/zh-CN/component/quickstart 官方文档中的快速上手一栏

在 main.js 中写入以下内容：
​
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
​
Vue.use(ElementUI);
​
new Vue({el: '#app',render: h => h(App)
});

 

 

引入element-ui后就可以使用它的组件了

4、Vue项目启动命令

npm run serve

5、Vue-Router路由

安装配置

官方文档：v3.x对应Vue2，v4.x对应Vue3

官方地址：https://v3.router.vuejs.org/zh/installation.html

下载指定版本的Vue-router版本命令：

npm i vue-router@3.6.5     ( @3默认最新版本 )

下面这个命令会默认下载最新的router命令

npm install vue-router

index.js文件，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//1.创建路由组件如Home.vue等后,下面开始引入
import Home from '../views/Home.vue'
import User from '../views/User.vue'
//2.将路由与组件进行映射
const routes = [{ path: '/home', component: Home },{ path: '/user', component: User }]
//3.创建router实例
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
  })
export default router
// 4. 创建和挂载根实例。 在main.js中

 

js文件路径引用

在 JavaScript 中，路径的使用是一个常见的问题，尤其是相对路径的理解。路径可以分为相对路径和绝对路径，它们在不同的场景下有不同的用法。

相对路径

相对路径是相对于当前文件的位置。例如：

./ 表示当前目录。../ 表示上一级目录。

绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如：

 

eslint校验错误

 

在vue.config.js文件中关闭eslint校验

lintOnSave:false//关闭eslint校验

在终端或命令行界面中，终止正在运行的批处理操作快捷键

Ctrl + C

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件

//2.将路由与组件进行映射
const routes = [//主路由
    {path:'/',component:Main,children:[//子路由{path:'home',component:Home},{path:'user',component:User}]}]

 

组件化

 

 

 

999、vscode快捷键

快速格式化：Shift + Alt + F

复制上一行：Shift + Alt +上箭头

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/895694.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu系统安装Minikube教程

Ubuntu系统安装Minikube教程

说明 最近在看《Quick Start Kubernetes》，书上使用的是 Docker Desktop 和 Linode Kubernetes Engine(LKE) 进行演示，但是实际开发中都不可能用到这两个工具，所以本人使用 minikube 进行操作。 系统：WSL Ubuntu 22.0。 安装 curl -LO https://github.com/kubernetes/minik…
阅读更多...
Transformer 笔记 (CS224N-7)

Transformer 笔记 (CS224N-7)

模型回顾 问题：RNN需要经过k步才能对远距离的单词进行交互，例如这里的was是chef的谓语，二者的关系十分紧密，但是使用线性顺序分析句子会导致如果was和chef的距离较远，它们会难以交互（因为梯度问题） Self Attention 键值对注意力 (1)我们可以将注意力视为在键值存储中执行…
阅读更多...
Easyexcel（7-自定义样式）

Easyexcel（7-自定义样式）

EasyExcel 提供简便的自定义样式功能，用户可以轻松定制Excel表格样式。通过Style类，可以设置字体、边框、背景颜色等属性，同时支持单元格合并和格式化操作。通过配置WriteHandler，可以实现更多样式定制，满足不同业务需求，让数据展示更直观。注解 @ContentStyle 用于设置内…
阅读更多...
预训练笔记 (CS224N-8)

预训练笔记 (CS224N-8)

子词模型 前置知识 (1)词法知识介绍语音学是音流无争议的物理学 语音体系假定了一组或多组独特的、分类的单元（音素）传统上，词素是最小的语义单位（例如\(ate,ly,able\)这种），但如今我们需要讨论比单词粒度更细的模型以处理大量的开放词汇（巨大的、无限的单词空间） 例如…
阅读更多...
团队项目：新建文件夹(1)团队成员介绍

团队项目：新建文件夹(1)团队成员介绍

项目 内容这个作业属于哪个课程 2025年春季软件工程（罗杰、任健）这个作业的要求在哪里 [T.1] 团队项目：团队成员介绍我在这个课程的目标是 培养团队合作精神，开发功能完善的软件这个作业在哪个具体方面帮助我实现目标 团队协作，软件开发理论基础团队介绍 新建文件夹(1)队由…
阅读更多...
LSTM 和机器翻译 (CS224N-5)

LSTM 和机器翻译 (CS224N-5)

LSTM (1)LSTM（Long Short-Term Memory RNNs）是Hochreiter和Schmidhuber在1997年提出的一种RNN，用于解决消失梯度问题 (2)在步骤t中，这里有一个隐藏单元\(h^{(t)}\)和一个记忆单元\(c^{(t)}\)它们均为长度为n的向量记忆单元用来存储长期信息LSTM可以从记忆单元中读取、消除和…
阅读更多...
解码和 Attention 机制笔记 (CS224N-6)

解码和 Attention 机制笔记 (CS224N-6)

语言模型的解码△：在讲义中这部分内容是神经机器翻译NMT中，我认为这个适用于所有语言模型所以就单列出来了(1)贪心解码：每一步都取最可能的单词，用前一步的输出作为下一步的输入（存在问题：有一个预测偏差，会导致后面的生成不可挽回，最终结果不尽人意） (2)穷举解码：顾…
阅读更多...
语言模型和 RNN 笔记 (CS224N-4)

语言模型和 RNN 笔记 (CS224N-4)

语言模型定义 (1)语言模型任务是根据给定的单词序列计算下一个单词的概率分布，完成这样的任务的系统就被称作语言模型 (2)也可以认为语言模型是一个为文本分配概率的系统，例如文本 \(x^{(1)},\cdots,x^{(T)}\) 的概率是n-gram语言模型 (1)一个n-gram是由n个连续单词组成的一块…
阅读更多...
Java 线程池 ThreadPoolExecutor 的状态控制变量 ctrl

Java 线程池 ThreadPoolExecutor 的状态控制变量 ctrl

如下是源代码。线程池的主要控制状态 ctl 是一个原子整数，它打包了两个概念字段：workerCount：表示当前有效运行的线程数。 runState：表示线程池的状态（如是否正在运行、关闭等）。为了将这两个字段打包成一个 int，我们将 workerCount 限制为 (2^{29} - 1)（约5亿），而不…
阅读更多...
go 方法和函数的区别

go 方法和函数的区别

图片中的内容总结了Go语言中方法和函数的区别，主要分为三个方面：调用方式不同：函数的调用方式：函数名(实参列表) 方法的调用方式：变量.方法名(实参列表)普通函数的接收者类型限制：对于普通函数，如果接收者是值类型，则不能将指针类型的数据直接传递给它；反之亦然。方法…
阅读更多...
德里克昆什肯《量子战争》目录

德里克昆什肯《量子战争》目录

机翻未校对是机翻的，而且没有经过校对，只能作为SFW编辑部的懒狗开工前的替代品 第一章 第二章 第三章 Chap 4 Chap 5~6 Chap 7~8 Chap 9~10 Chap 11~14 Chap 15~18 Chap 19~22 Chap 23~26 Chap 27~30 Chap 31~34 Chap 35~38 Chap 39~42 Chap 43~46 Chap 47~50 Chap 51~61本文…
阅读更多...
ios调试（safari）

ios调试（safari）

一、打开ios safari开发者模式在手机设备的“设置”中找到“safari浏览器”，点击进入 在safari设置中，找到“高级”选项，点击进入 在高级设置页面中，找到“网页(web)检查器”选项，打开开关 二、使用mac的safari开发者模式进行调试将ios设备通过usb连接到电脑上 打开mac中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023