Vue开发入门安装

article/2025/7/5 4:01:48

Vue开发入门安装

  • 版本选择
  • 剪不断，理还乱
    • Node.js —— 类比为 Java JDK
    • npm —— 类比为 Maven 或 Gradle
    • nvm —— 类比为 JDK 版本管理工具
    • Vue.js —— 类比为 Spring Framework 或 JavaFX
  • 下载配置
    • 下载node-v16.20.2-win-x86.zip
    • 设置环境变量
    • 打开位置，输入`cmd`，执行命令
  • 创建项目，并运行
    • 创建项目
    • 什么是预处理器
    • 安装`axios`封装异步请求
    • 补充`code`命令
    • 运行服务器
  • Vue结构
    • `vscode`安装`Vue`扩展
    • `Vue`有三种组件
      • `Compoonent`三部分

版本选择

在这里插入图片描述
在这里插入图片描述
参考链接
经典的就是14，16，20的版本，可以选择 16 相关的版本。
过高版本的node.js比如22,对于使用Vue 2可能报错了，node从14升级到22，vue2项目调整内容

剪不断，理还乱

都叫做Node，其实"Node" 这个名字的背后，是想传达一种简洁、轻量且高效的节点概念。它象征着 Node.js 在网络编程中的角色，就像是网络中的一个节点（Network Node），并且每个任务或请求都可以看作是一个独立的节点，通过事件驱动模型协作与响应。因为 npm 和 nvm 都是与 Node.js 紧密相关的工具，所以它们的名字中也包含了 Node。

Node.js —— 类比为 Java JDK

  • Node.js 是一个 JavaScript 运行时环境，它基于 Chrome V8 引擎，可以让你在服务器端运行 JavaScript，类似于 Java 允许你在计算机上运行 Java 程序。

Java 类比：

  • 就像 Java JDK 提供了 Java 程序的运行环境、标准库和工具来执行 Java 程序，Node.js 提供了运行 JavaScript 的环境和工具，使得 JavaScript 能够不止局限于浏览器端，还能在服务器端执行

npm —— 类比为 Maven 或 Gradle

  • 类似于 Maven 或 Gradle，它们是用于管理 Java 项目依赖、构建和发布的工具。你可以通过它们来管理 Java 项目的第三方库（如 Apache Commons、Spring Framework）以及构建项目的过程。

nvm —— 类比为 JDK 版本管理工具

  • 在 Java 中，你可能会使用 JDK 管理工具（如 SDKMAN 或手动管理多个 JDK 版本）来安装和切换不同版本的 JDK，因为不同的项目可能依赖于不同版本的 Java。

Vue.js —— 类比为 Spring Framework 或 JavaFX

  • Vue.js 就像是 Spring Framework，它帮助你在前端构建 Web 应用，类似于 Spring 在后端的作用 —— 提供了一个结构化、简洁且高效的开发框架。

所以说：：：

工具/框架在 Java 中的类比描述
Node.jsJava JDKJavaScript 运行时环境，用于执行 JavaScript 代码
npmMaven/GradleJava 的包管理工具，负责管理依赖库和构建
nvmJDK 版本管理工具用于管理多个 Node.js 版本的工具
Vue.jsSpring Framework / JavaFX用于构建前端用户界面的框架

下载配置

下载node-v16.20.2-win-x86.zip

下载地址

设置环境变量

在这里插入图片描述

打开位置，输入cmd，执行命令

  1. 查看node.js版本
node -v
  1. 安装 Node.js 后，npm 会自动与 Node.js 一起安装。也就是说，npm 是 Node.js 的一部分，它是由 Node.js 提供的包管理工具。只要你安装了 Node.js，npm 就会被默认安装在你的系统中。
    查看npm版本
npm -v
  1. 设置 npm 的淘宝镜像， 为了下载依赖可以更迅速。
npm config set registry https://registry.npm.taobao.org ！！！！不对不对不对

npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com
旧域名也将于 2022 年 5 月 31 日停止服务，怪不得我安装会出错了啊啊啊，所以是下面的：

npm config set registry https://registry.npmmirror.com

查看当前使用的镜像路径

npm config list

或者

npm config get registry

在这里插入图片描述
在这里插入图片描述

  1. 显示全局安装的 npm 包 所在的目录路径
npm root -g

会告诉你全局安装的 npm 包存放在哪个目录中，默认都是c盘，有时候window电脑存过多的东西在c盘，会影响电脑运行速度，所以要配置
修改点点我

但是但是：：：
在这里插入图片描述
我的竟然不是，哇，这个就是zip的好处了！！！
所以这样的话：：：

npm get prefix

查询 npm 全局安装包的路径。也就是通过 npm install -g 命令安装的所有全局 npm 包（包括命令行工具和库）会存放在这个目录中，所以结果应该是你刚才安装位置的前缀了

注意这个命令：

npm get cache

这个是写报错时候日志记录的，我觉得不用改把，其实也占不了多少c盘
比如下边那个报错日志，就放到那里了
在这里插入图片描述

但是我看见：npm 会将你下载的包和一些临时文件缓存到本地，避免每次都从网络上下载。这是为了提高安装速度和减少带宽消耗
如果你想要修改的话，点击我里面的 三

  1. 安装 Vue CLI 工具
    Vue CLI 是 Vue.js 官方提供的一款命令行工具，它可以帮助开发者快速构建和管理 Vue.js 项目。比如安装完后，你可以使用 vue create <project-name> 命令来创建一个新的 Vue 项目。
npm install @vue/cli  -g

“-g”等同于“–global”，“-g” 是全局安装，不加“-g”就是默认下载到当前目录。
使用 -g 参数是将 Vue CLI 安装为全局工具，之后你可以在任何地方使用 vue 命令来创建 Vue 项目。
注意如果安装命令报错了，参考这里的 三.4 进行解决

在这里插入图片描述

  1. 打开root位置验证安装是否正确啦
    在这里插入图片描述

哦耶！！！

创建项目，并运行

创建项目

找到位置，然后地址栏上 执行cmd

vue create <project-name>

大部分Vue构建的前端都是XXX-ui
比如大名鼎鼎的RuoYi
在这里插入图片描述
运行之后选择Manually select features
按空格选择或者取消：
在这里插入图片描述
之后的选择：
在这里插入图片描述
最后就是创建完毕啦
在这里插入图片描述

在这里插入图片描述
有的兄弟，有的。

什么是预处理器

增强语言的功能和开发体验。这些工具通过一些额外的语法或功能，简化代码编写、提高代码的可维护性、增加可读性

类型工具/语言特点编译结果
JS 预处理器TypeScript静态类型检查，编译为标准 JavaScript。编译为 JavaScript
CoffeeScript简洁的语法，去除了 JavaScript 的冗余，编译为 JavaScript。编译为 JavaScript
Dart支持类、类型系统、异步编程等，编译为 JavaScript 或本地代码。编译为 JavaScript 或本地代码
CSS 预处理器Sass提供变量、嵌套、继承、函数等特性，增强 CSS 功能。编译为标准 CSS
Less功能类似 Sass，提供变量、嵌套、混合等特性，简化 CSS 编写。编译为标准 CSS
Stylus支持更加灵活的语法，可以省略分号、括号等，功能与 Sass 相似。编译为标准 CSS
C/C++ 预处理器宏定义（Macros）用于常量替换、条件编译等，减少代码重复，增加灵活性。编译前的代码转换
条件编译根据不同条件选择性编译代码片段，常用于平台差异的处理。编译前的代码转换
文件包含（#include）引入头文件或其他源文件的内容，便于代码复用。编译时合并文件内容

SCSS 和 SASS 都是 Sass 预处理器的两种不同语法格式，它们的目标都是为了增强传统 CSS 的功能，但语法上有所不同。

特点Sass 语法SCSS 语法
语法结构使用缩进和空格来定义块级结构使用大括号 {} 来定义块级结构
结束符号不需要分号 ;需要分号 ;
可读性对于复杂的嵌套，语法简洁，但可能不直观与标准 CSS 完全一致，易于理解和维护
兼容性不兼容 CSS，不能直接放入浏览器中完全兼容 CSS，可以直接在浏览器中使用

SCSS 比 Sass 更常用，原因是 SCSS 保留了 CSS 的完整语法，兼容性更好，开发者也更容易接受
SCSS 语法和传统的 CSS 非常相似，适合刚接触 Sass 的开发者，因此更常用。

安装axios封装异步请求

前端后端交互通过ajax交互：
在现代的前端开发中，尤其是使用 Vue.js 作为前端框架时，Axios 是首选的库，而 jQuery 的使用已经相对较少
当前端通过 Axios 或 jQuery 发送请求时，后端可以使用 Java 来接收并处理这些请求，通常是通过 Spring Boot 等框架来实现。
但不是前后端分离的时候，(也就不使用Vue)一般直接在模板引擎比如Tymeleaf直接通过jQuery发送和接受ajax请求
还有注意措辞哦，Vue、React 和 Angular 等现代前端框架都是基于 JavaScript 的，jQuery是javascript的库
安装这个必须先切换到刚才创建的应用中哦
因为是在项目中了，不是node.js中

npm install axios

在这里插入图片描述

补充code命令

哇，我头一回知道，太牛啦，哇哇哇，桌面又可以省下空间啦啦啦~
在这里插入图片描述
cmd(进入WIndows),bash(进入Linux) + code进入Vscode太牛啦！！！

运行服务器

npm run serve

npm run serve通常用于 Vue.js 项目，尤其是在使用 Vue CLI 时，npm run serve 是默认的启动开发服务器的命令。
会启动一个本地开发服务器，通常运行在 localhost:8080（或者其他你配置的端口），并且在你修改代码时会自动重新加载（热重载）。

Vue结构

记住Vue构建 单页面应用程序（SPA），只有唯一一个html页面，在public下边，src是放各种组件的
在这里插入图片描述

vscode安装Vue扩展

会注意到 VS Code 没有显示任何语法突出显示，并且将文件视为纯文本，如右下方状态栏中所示。您还将看到一条通知，为文件类型推荐Vetur扩展名.vue。
在这里插入图片描述
安装了就可以啦
注意：：：
Vscode插件默认安装路径在C:\Users{UserName}.vscode目录下,下载太多会炸了c盘
所以可以更改，点击我了解更多
我也不常用这个vscode,所以我就不改啦
更多c盘的一些小知识，点击我

Vue有三种组件

App.vue是根组件，所有的组件都要放到这里去 呈现
component是 可重用的组件
views是 页面， 是不可重用的组件

Compoonent三部分


template是html代码
script是写javascript代码
style是写 css代码
输入v直接回车第一个，就可以快速构建结构
在这里插入图片描述
修改后不用重新启动


http://www.hkcw.cn/article/KqBUDTxSRi.shtml

相关文章

leetcode刷题日记——二叉树的最近公共祖先

leetcode刷题日记——二叉树的最近公共祖先

[ 题目描述 ]&#xff1a; [ 思路 ]&#xff1a; 两个节点的最近公共祖先具有以下特点如果祖先节点不是自身&#xff0c;那么两个节点一定在祖先节点的两边所以可以递归搜索树的左右子树&#xff0c;如果节点分布在两边&#xff0c;那么这个就是最近公共祖先&#xff0c;如果…
阅读更多...
北京业之峰法式奶油风改造：92㎡两居打造温柔治愈之家

北京业之峰法式奶油风改造：92㎡两居打造温柔治愈之家

在当前居住空间设计日益注重实用性与美学融合的趋势下&#xff0c;北京业之峰近日完成一套法式奶油风住宅改造项目。整体设计在保留原始结构优势的基础上&#xff0c;以清新柔和的视觉风格和合理的空间动线布局&#xff0c;为业主提供了一个兼具温度与功能的理想居所。项目整体…
阅读更多...
五星级酒店技能比赛主持稿串词

五星级酒店技能比赛主持稿串词

男:尊敬的各位领导&#xff5e; 女:紫澜门国际酒店的兄弟姐妹们&#xff5e; 合:大家——上午好&#xff5e; 男:欢迎大家来到紫澜门国际酒店20XX年度——酒店竞技比赛的现场。 女:我是质检招聘部副主任XXX 男:我是工程部XXX 女:非常兴奋能兴奋能担负今天竞技比赛的主持人&…
阅读更多...
DistilQwen-ThoughtX：变长思维链推理模型，超越DeepSeek蒸馏模型

DistilQwen-ThoughtX：变长思维链推理模型，超越DeepSeek蒸馏模型

作者&#xff1a;蔡文睿&#xff08;清素&#xff09;、汪诚愚&#xff08;熊兮&#xff09;、严俊冰&#xff08;玖烛&#xff09;、黄俊&#xff08;临在&#xff09; 前言 近年来&#xff0c;自然语言处理&#xff08;NLP&#xff09;领域以大语言模型&#xff08;LLM&…
阅读更多...
困在办公室二手烟中的职场人 防毒面具下的无奈抗争

困在办公室二手烟中的职场人 防毒面具下的无奈抗争

早上8点，王海推开办公室的门，熟练地从衣柜里取出那套“工服”——这是他的“二手烟专用装备”。衣服早已浸透了焦油味，他迅速换上，等待同事们的到来。在这个四人办公室里，王海是唯一不抽烟的人。而他的三位同事，从清晨到傍晚，随时可能点燃一支烟，让狭小的空间瞬间烟雾弥…
阅读更多...
《歌手》白举纲进步 遗憾止步舞台

《歌手》白举纲进步 遗憾止步舞台

《歌手2025》第三期竞演在湖南卫视和芒果TV落下帷幕。查理普斯作为“袭榜歌手”登场，终于实现了他推迟一年的中国行，并且成功袭榜，战胜了单依纯，而白举纲则被淘汰。节目开场时，查理普斯弹唱了《See you again》，网友纷纷感叹他的表现非常稳定。作为首位袭榜歌手，查理普斯…
阅读更多...
武汉不扫兴的妈妈陪娃后备箱过夜 13元创造快乐回忆

武汉不扫兴的妈妈陪娃后备箱过夜 13元创造快乐回忆

一段能伴随孩子一生的快乐记忆，对极氪车主王大发来说，只需要13元。近日，她在社交媒体上分享了这段经历，讲述了一个“不扫兴的决定”如何为孩子创造了一段愉快的回忆，并让她更加思考成为有趣父母的意义。由于武汉暴雨导致小区停电，王大发一家三口决定驾车回外婆家过夜。途…
阅读更多...
武汉不扫兴的妈妈陪娃后备箱过 13元创造快乐回忆

武汉不扫兴的妈妈陪娃后备箱过 13元创造快乐回忆

一段能伴随孩子一生的快乐记忆，对极氪车主王大发来说，价值13元。近日，她在社交媒体上分享了一个特别的经历，因为她的一个决定，给孩子创造了一段愉快的回忆，并让她重新思考如何成为有意思的父母。由于武汉暴雨导致小区停电，王大发一家三口决定驾车回外婆家过夜。途中，爸…
阅读更多...
第29次CCF计算机软件能力认证-2-垦田计划

第29次CCF计算机软件能力认证-2-垦田计划

垦田计划 刷新 时间限制&#xff1a; 1.0 秒 空间限制&#xff1a; 512 MiB 下载题目目录&#xff08;样例文件&#xff09; 题目描述 顿顿总共选中了 nn 块区域准备开垦田地&#xff0c;由于各块区域大小不一&#xff0c;开垦所需时间也不尽相同。据估算&#xff0c;其…
阅读更多...
权限分配不合理如何影响企业运营？

权限分配不合理如何影响企业运营？

“我们明明只给了她CRM的查看权限&#xff0c;怎么客户数据被删了&#xff1f;” “新员工入职三天了&#xff0c;HR系统权限还没开通&#xff0c;流程完全卡住&#xff01;” “上个月刚给项目经理配了财务权限&#xff0c;怎么又出乱子了&#xff1f;” 这些对话是否在你的…
阅读更多...
2025.05.30【转录组】|Ribo-seq数据流程详解（一 质量控制）

2025.05.30【转录组】|Ribo-seq数据流程详解（一 质量控制）

Ribo-seq数据流程详解（一 质量控制） 作者：穆易青 文章目录 Ribo-seq数据流程详解（一 质量控制）1. 前言2. 原始数据质控3. 参数详解4. 总结1. 前言 Ribo-seq（核糖体测序）主要研究转录后调控和翻译动态。高质量的Ribo-seq数据是可靠生物学结论的基础。本文介绍了Ribo-se…
阅读更多...
指纹识别+精准化POC攻击

指纹识别+精准化POC攻击

开发目的 解决漏洞扫描器的痛点 第一就是扫描量太大&#xff0c;对一个站点扫描了大量的无用 POC&#xff0c;浪费时间 指纹识别后还需要根据对应的指纹去进行 payload 扫描&#xff0c;非常的麻烦 开发思路 我们的思路分为大体分为指纹POC扫描 所以思路大概从这几个方面…
阅读更多...
pikachu通关教程-目录遍历漏洞（../../）

pikachu通关教程-目录遍历漏洞（../../）

目录遍历漏洞也可以叫做信息泄露漏洞、非授权文件包含漏洞等. 原理:目录遍历漏洞的原理比较简单&#xff0c;就是程序在实现上没有充分过滤用户输入的../之类的目录跳转符&#xff0c;导致恶意用户可以通过提交目录跳转来遍历服务器上的任意文件。 这里的目录跳转符可以是../…
阅读更多...
医生进校义诊卖仪器？医院回应 假冒医生行骗

医生进校义诊卖仪器？医院回应 假冒医生行骗

近日，市民李先生带父亲参加了一次所谓的义诊活动。该活动由两位自称来自南方医科大学南方医院的医生举办。李先生花费五千多元购买了康复理疗仪器，但发现“货不对板”。经核实，南方医院并未组织过相关义诊，两位医生也查无此人。李先生的父亲是退休教授，在学校退休人员微信…
阅读更多...
八N皇后问题

八N皇后问题

1 问题的提出 在8X8格的国际象棋上摆放八个皇后&#xff0c;使其不能互相攻击&#xff0c;即任意两个皇后都不能处于同一行、同一列或同一斜线上&#xff0c;问有多少种摆法 我们的任务就是用MATLAB进行求解 2 数学模型的构建 首先我们分析题目就是 任意两个皇后都不能处于…
阅读更多...
CRM 系统核心优势解析：数字化客户管理如何驱动企业增长

CRM 系统核心优势解析：数字化客户管理如何驱动企业增长

企业在客户管理中常面临数据分散、互动低效、决策滞后等挑战&#xff0c;传统管理方式难以满足数字化时代的客户运营需求。CRM&#xff08;客户关系管理&#xff09;系统作为整合客户数据、优化互动流程的核心工具&#xff0c;通过数字化手段重构企业与客户的连接模式。本文系统…
阅读更多...
Windows SSDT Hook（一）

Windows SSDT Hook（一）

前言 虽然在 Windows Vista 以后的 64 位操作系统中&#xff0c;PatchGuard&#xff08;内核补丁保护机制&#xff09;对 SSDT&#xff08;System Service Dispatch Table&#xff0c;系统服务分派表&#xff09;实施了强力保护&#xff0c;直接 Hook SSDT 的方式几乎不可行&a…
阅读更多...
centos7.6阿里云镜像各个版本介绍

centos7.6阿里云镜像各个版本介绍

&#xff08;水一期&#xff09; Index of /centos-vault/centos/7.6.1810/isos/x86_64/ File NameFile SizeDateParent directory/--0_README.txt2.4 KB2018-12-01 21:21CentOS-7-x86_64-DVD-1810.iso4.3 GB2018-11-26 07:55CentOS-7-x86_64-DVD-1810.torrent86.0 KB2018-12-…
阅读更多...
在大型 GIS 数据库中按属性高效溶解相邻多边形

在大型 GIS 数据库中按属性高效溶解相邻多边形

您是否拥有一个大型 GIS 数据集&#xff0c;并希望高效地融合所有具有相同属性的相邻多边形&#xff1f;在本文中&#xff0c;我将分享如何使用 PostGIS 处理包含超过 75 万行数据的土地利用数据集来实现这一目标。 我将以维多利亚州土地利用数据集为例。该数据可从Data VIC免…
阅读更多...
Spring Web高保真Axure动态交互元件库

Spring Web高保真Axure动态交互元件库

在当今快速发展的Web设计与开发领域&#xff0c;设计师和开发者们一直在寻找高效、高质量的工具来加速原型设计过程。今天&#xff0c;我要向大家介绍一款专为Web设计与开发领域量身打造的Axure交互元件集合——Spring UI Web端高保真动态交互元件库。这款元件库不仅全面且易于…
阅读更多...
推荐文章

Copyright @ 2022~2023