当前位置：首页 > news >正文

Vue 环境配置与项目创建指南

news 来源：原创 2025/5/9 6:37:00

1. 前置要求

在开始配置 Vue 开发环境之前，需要确保以下工具已安装：

Node.js：Vue 的构建工具依赖 Node.js。

npm 或 yarn：Node.js 自带 npm 包管理工具，也可以选择安装 yarn。

安装 Node.js

前往 Node.js 官网下载并安装 LTS 版本。

安装完成后，通过以下命令验证安装：

node -v
npm -v

2. 配置 npm 的国内镜像（加速下载）

国内访问 npm 的速度较慢，推荐将 npm 的下载源设置为淘宝镜像。

设置 npm 镜像

执行以下命令：

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

验证配置是否成功：

npm config get registry

输出应为：

https://registry.npmmirror.com/

使用 nrm 工具快速切换镜像（可选）

nrm 是一个 npm 源管理工具，可以快速切换源。

安装 nrm

npm install -g nrm

查看可用源

nrm ls

示例输出：

  npm ---------- https://registry.npmjs.org/yarn --------- https://registry.yarnpkg.com/npmmirror ---- https://registry.npmmirror.com/ (淘宝镜像)

切换到淘宝镜像

nrm use npmmirror

恢复默认源

nrm use npm

3. 全局安装 Vue CLI

Vue CLI 是 Vue.js 的官方脚手架工具，用于快速创建项目。

安装 Vue CLI

npm install -g @vue/cli

验证安装

vue --version

若安装成功，将输出版本号。

4. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。

创建项目

vue create my-vue-app

执行命令后：

如果选择默认配置，直接按回车。

如果需要自定义配置（如 TypeScript 支持、路由、状态管理等），可以手动选择。

进入项目目录

cd my-vue-app

启动开发服务器

npm run serve

启动成功后，在浏览器中打开 http://localhost:8080，即可看到默认的 Vue 应用页面。

5. 常用插件与工具

根据项目需求，可以安装以下工具：

Vue Router（路由管理）

npm install vue-router@next

Vuex 或 Pinia（状态管理）

安装 Vuex：

npm install vuex@next

安装 Pinia：

npm install pinia

Axios（HTTP 请求库）

npm install axios

ESLint（代码规范工具）

在创建项目时可以选择集成 ESLint，或者后续手动安装：

npm install eslint --save-dev

6. 配置 Vue 项目中的下载源（可选）

若使用 Vue CLI 创建项目时速度较慢，可设置 Vue CLI 使用的 npm 镜像。

设置 Vue CLI 的下载源

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

验证：

vue config get registry

7. 总结

至此，你已经完成了 Vue 环境的安装和配置，并成功创建了一个新的 Vue 项目。接下来，你可以根据项目需求进行功能开发。如果遇到任何问题，随时可以参考官方文档或寻求社区支持。

官方文档链接：https://cn.vuejs.org

Vue 环境配置与项目创建指南

1. 前置要求在开始配置 Vue 开发环境之前，需要确保以下工具已安装： Node.js：Vue 的构建工具依赖 Node.js。 npm 或 yarn：Node.js 自带 npm 包管理工具，也可以选择安装 yarn。安装 Node.js 前往 Node.js 官网下…...

编程日记 2025/5/9 6:37:00

关于物联网的基础知识（三）——物联网技术架构：连接万物的智慧之道！连接未来的万物之网！

成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】今日分享关于物联网的基础知识（三&a…...

编程日记 2025/5/1 13:52:31

1. 基本结构 // Tagged Pointer 的内存布局 union TaggedPointer {uintptr_t bits; // 完整的指针值struct {uintptr_t data : 60; // 数据部分uintptr_t tag : 4; // 类型标记};// 扩展类型struct {uintptr_t extData : 52; // 扩展数据uintptr_t extTag : …...

编程日记 2025/5/5 0:09:19

基于SpringBoot的音乐网站与分享平台

基于SpringBoot的音乐网站与分享平台摘要1. 研究背景2.研究内容3.系统功能 3.1前台首页功能模块3.2在线听歌功能模块3.3后台登录功能模块3.4在线听歌管理模块 4.部分功能代码实现5.源码分享(免费获取) 需要源码联系我即可(免费获取)~ ??大家点赞、收藏、关注、评论啦、查…...

编程日记 2025/5/7 18:09:48

【机器学习篇】科技异次元的超强 “魔杖”，开启奇幻新程

一起开启这场旅行吧，关注博主，点赞支持不迷路，下面一同欣赏本篇的美妙吧！！ ！ 博主主页： 羑悻的小杀马特.-CSDN博客在当今科技飞速发展的时代，机器学习宛如一把来自科技异次元的超强…...

编程日记 2025/5/8 9:57:13

opencv CV_TM_SQDIFF未定义标识符

opencv CV_TM_SQDIFF未定义标识符 opencv4部分命名发生变换，将CV_WINDOW_AUTOSIZE改为WINDOW_AUTOSIZE；CV_TM_SQDIFF_NORMED改为TM_SQDIFF_NORMED。...

编程日记 2025/4/18 3:06:09

OneFlow的简单介绍

OneFlow 是北京一流科技有限公司旗下的采用全新架构设计的开源工业级通用深度学习框架。以下是关于 OneFlow 的详细介绍： 本篇文章的目录特点功能应用场景发展历程特点简洁易用的接口：为深度学习相关的算法工程师提供一套简洁易用的用户接口…...

编程日记 2025/5/8 14:57:09

如何配置【Docker镜像】加速器+【Docker镜像】的使用

一、配置Docker镜像加速器 1. 安装/升级容器引擎客户端推荐安装1.11.2以上版本的容器引擎客户端 2. 配置镜像加速器针对容器引擎客户端版本大于1.11.2的用户以root用户登录容器引擎所在的虚拟机修改 "/etc/docker/daemon.json" 文件（如果没有…...

编程日记 2025/5/8 15:14:58

《OpenCV》——模版匹配

文章目录什么是模版匹配？函数介绍实例什么是模版匹配？ 模板匹配是在一幅图像中寻找与另一幅模板图像最匹配部分的技术。OpenCV 提供了多种模板匹配的方法，它在目标检测、物体识别等众多计算机视觉任务中有广泛的应用。例如，你有…...

编程日记 2025/5/5 21:49:31

【网络安全技术与应用】（选修）实验3 网络侦察

一、实验目的培养学生综合运用搜索引擎、Whois数据库等手段对目标站点进行侦查的能力，了解站点查询常用的信息源及搜索工具，熟练掌握常见搜索工具的功能及使用技巧。培养学生使用搜索引擎在互联网查找特定设备的能力，熟悉联网设备搜索引擎的功能，熟练掌握设备搜索引擎的使…...

编程日记 2025/5/4 15:45:39

基于XGBoost的集成学习算法

目录一、XGBoost原理1.1 提升方法（Boosting）1.2 提升决策树 （BDT）1.3 梯度提升决策树 （GBDT）1.4 极限梯度提升（XGBoost）1.4.1 XGBoost改进1.4.2 XGBoostcsklearn实现1.4.3 XGBoost回…...

编程日记 2025/5/7 2:27:09

【84键矮轴无线键盘】个人使用经历

推荐： 前行者MK84键（理由：价格实惠，键位布局好，其他都是可接受程度）K3 max（理由：除了短命的续航、脚垫容易脱落，已无明显短板） 我需要一把在小巧、舒适的主力…...

编程日记 2025/5/8 13:40:37

基于Arduino的FPV头部追踪相机系统

构建FPV头部追踪相机：让你置身于遥控车辆之中！ 在遥控车辆和模型飞行器的世界中，第一人称视角（FPV）体验一直是爱好者们追求的目标。通过FPV头部追踪相机，你可以像坐在车辆或飞行器内部一样，自由…...

编程日记 2025/5/3 9:35:43

Flutter：邀请海报，Widget转图片，保存相册

记录下，把页面红色区域内的内容，转成图片后保存到相册的功能依赖 # 生成二维码 qr_flutter: ^4.1.0 # 保存图片 image_gallery_saver_plus: ^3.0.5view import package:demo/common/index.dart; import package:ducafe_ui_core/ducafe_ui_core.dart; i…...

编程日记 2025/5/6 2:56:32

CSS——16. nth—child序列选择器1

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>nth-child选择器</title><style type"text/css">/* 选择的是li的父元素（ul）中的第9个li子元素 */li:nth-child(9){color: red…...

编程日记 2025/5/8 11:47:58

【HarmonyOS 5.0】从0到1开发购物应用App(二)：登录页对接口

【HarmonyOS Arkts笔记】http网络请求封装【HarmonyOS Arkts笔记】ohos.data.preferences用户首选项实现存储信息登录页点击登录按钮调用login()方法 import { promptAction, router } from kit.ArkUI; import loginApi from "../../api/login" import Prefere…...

编程日记 2025/5/9 2:31:47

asp.net core webapi中的数据注解与数据验证

在这一课中，主要讲解了如何在 Web API 中使用数据注解（Data Annotations）和进行数据验证，以确保请求数据的有效性和完整性。在 Web API 中，数据验证是确保客户端传递的数据符合业务规则和格式要求的关键步骤。数据注…...

编程日记 2025/5/8 2:07:59

VulnHub—potato-suncs

使用命令扫描靶机ip arp-scan -l 尝试访问一下ip 发现一个大土豆没什么用尝试扫描一下子域名没有发现什么有用的信息尝试扫描端口 namp -A 192.168.19.137 -p- 尝试访问一下端口,发现都访问不进去查看源代码发现了网页的标题 potato，就想着爆破一下密码 hydr…...

编程日记 2025/5/5 4:34:58

uniapp 微信小程序自定义日历组件

效果图功能：可以记录当天是否有某些任务或者某些记录具体使用： 子组件代码 <template><view class"Accumulate"><view class"bx"><view class"bxx"><view class"plank"><…...

编程日记 2025/5/3 20:07:39

云架构Web端的工业MES系统设计之区分工业过程

云架构Web端的工业MES系统设计之区分工业过程在当今数字化浪潮席卷全球的背景下,制造业作为国家经济发展的重要支柱产业,正面临着前所未有的机遇与挑战。市场需求的快速变化、客户个性化定制要求的日益提高以及全球竞争的愈发激烈,都促使制造企业必须寻求更加高效、智能的生产…...

编程日记 2025/5/8 2:25:49

Harbor 仓库部署（docker-compose 部署方式）

一、安装的前提条件硬件资源最低推荐 cpu2C4C内存4G8G硬盘40G160G 软件软件版本描述 dockerv17.0.6-ce 安装参考官方文档 Install Docker Engine | Docker Documentation docker-composev1.18.0 安装参考官方文档 Overview | Docker Documentation Openssllatest…...

编程日记 2025/5/1 2:16:14

机器学习基础-支持向量机SVM

目录基本概念和定义 1. 超平面（Hyperplane） 2. 支持向量（Support Vectors） 3. 线性可分 4. 边界 SVM算法基本思想和分类基本思想间隔最大化间隔（Margin） 软边距 SVM 核函数的概念基本概念…...

编程日记 2025/5/1 10:40:47

卸载wps后word图标没有变成白纸恢复

这几天下载了个wps教育版，后头用完了删了用习惯的2019图标给兄弟我干没了？？？ 其他老哥说什么卸载关联重新下 ，而且还要什么撤销保存原来的备份什么，兄弟也是不得不怂了后头就发现了这个半宝藏博主&…...

编程日记 2025/5/6 13:00:19

mongodb==安装prisma连接

官网下载mongodb,解压安装 Download MongoDB Community Server | MongoDB 修改bin/mongod.cfg # mongod.conf# for documentation of all options, see: # http://docs.mongodb.org/manual/reference/configuration-options/# Where and how to store data. storage:dbPat…...

编程日记 2025/5/8 12:03:55

python代码实现了一个金融数据处理和分析的功能，主要围绕国债期货及相关指数数据展开

# 忽略某些模块的提示信息 import warnings warnings.filterwarnings("ignore") # 在全局配置中添加RQData账号信息 import rqdatac as rq from typing import List import pandas as pd import numpy as np import re from datetime import datetime, timedelta,tim…...

编程日记 2025/5/4 22:17:55

声音是如何产生的

一、音频概述 RTMP中一般音频采用aac编码，采样率为44100HZ, 每帧1024采样，帧率43，23.2ms一帧 RTC中一般音频采用opus编码，采样率为48000HZ，每帧480采样，帧率100，10ms一帧通道数（c…...

编程日记 2025/5/8 5:15:08

Matlab回归预测大合集(不定期更新)-188

截至2025-1-2更新 1.BP神经网络多元回归预测（多输入单输出） 2.RBF神经网络多元回归预测（多输入单输出） 3.RF随机森林多元回归预测（多输入单输出） 4.CNN卷积神经网络多元回归预测（多输入单输…...

编程日记 2025/5/4 18:00:38

CUDA编程【7】线程束

文章目录线程束和线程块线程束线程块线程束的分化问题线程束分化（Warp Divergence）线程束分化的执行机制如何避免线程束的分化线程束和线程块线程束线程束是SM中基本的执行单元当一个网格被启动（即一个核函数被启动）&#…...

编程日记 2025/5/5 9:14:46

nodejs：nodejs的技巧有哪些（2）

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者构建高性能的网络应用。 1. 使用异步编程，利用 async/await 来处理异步操作，使代码更清晰、易读。 const fetchData async () > { const data await getDataFrom…...

编程日记 2025/4/28 23:20:55

构建数字化校园：定义与意义

随着信息技术的快速发展，"数字化校园"这一概念逐渐成为教育领域内热议的话题。数字化校园是指利用先进的信息技术手段，如互联网、大数据、云计算等，对学校的教学、科研、管理和服务等方面进行全面升级和优化的过程。它不仅改变了传…...

编程日记 2025/5/3 3:26:41

LabVIEW语言学习过程是什么？

学习LabVIEW语言的过程可以分为几个阶段，每个阶段的重点内容逐步加深，帮助你从入门到精通。以下是一个简洁的学习过程： 1. 基础入门阶段理解图形化编程：LabVIEW是一种图形化编程语言，与传统的文本编程语言不同&am…...

编程日记 2025/4/28 22:22:43

阿里云人工智能与机器学习

阿里云的人工智能（AI）与机器学习（ML） 服务为企业提供了全面的AI解决方案，帮助用户在多个行业实现数据智能化，提升决策效率，推动业务创新。阿里云通过先进的技术和丰富的工具，支持用…...

编程日记 2025/5/6 20:28:18

NUTTX移植到STM32

STM32移植NUTTX 1. Ubuntu下搭建开发环境1.1 先决条件1.2 下载 NuttX1.3 使用Make 进行编译1.4 烧录运行 2.通过NUTTX点亮LED2.1 部署操作系统2.2 修改配置文件2.3 编译运行程序开发板：DshanMCUF407 官方开发文档：安装 — NuttX latest 文档参考文档&…...

编程日记 2025/5/7 21:26:39

.NET 9.0 WebApi 发布到 IIS 详细步骤

微软表示，.NET 9 是迄今为止性能最高的 .NET 版本，对运行时、工作负载和语言方面进行了 1,000 多项与性能相关的改进，并采用了更高效的算法来生成更好的代码。 .NET 9 是 .NET 8 的继任者，特别侧重于云原生应用和性能。作为标准期…...

编程日记 2025/5/7 17:13:38

麒麟 kylin v10 server 升级openssh 9.9p1

准备升级工作 yum install gcc make perl zlib zlib-devel pam pam-devel备份原有的ssh目录，以备后用 cp -r /etc/ssh /etc/ssh.bak cp /etc/pam.d/sshd /etc/pam.d/sshd.before cp /etc/ssh/sshd_config /etc/ssh/sshd_config.before解压源码压缩包 tar -zxf o…...

编程日记 2025/5/7 9:52:17

ollama+FastAPI部署后端大模型调用接口

ollamaFastAPI部署后端大模型调用接口记录一下开源大模型的后端调用接口过程一、ollama下载及运行 1. ollama安装 ollama是一个本地部署开源大模型的软件，可以运行llama、gemma、qwen等国内外开源大模型，也可以部署自己训练的大模型 ollama国内地…...

编程日记 2025/5/6 4:58:05

设计模式行为型策略模式（Strategy Pattern）与常见技术框架应用解析

策略模式（Strategy Pattern）核心思想是将算法的实现从使用该算法的类中分离出来，作为独立的对象，通过接口来定义算法家族，这样就可以很容易地改变或扩展算法。通过这种方式，可以避免在客户端代码中使用大量…...

编程日记 2025/5/7 15:55:37

2025资源从哪里来！

方案规划告诉你资源最好的答案？ 方案一、如果你不知道啥资源可以到这里面找到初步的答案？ 哔哩哔哩 (゜-゜)つロ干杯~-bilibili 在这个网站你可以找到你对应的专业-对应的路线-对应的资源-对应的百度网盘里面全是免费的资源------------------惊喜不&…...

编程日记 2025/5/5 7:20:50

Alist-Sync-Web 网盘自动同步,网盘备份相互备份

Alist-Sync-Web 一个基于 Web 界面的 Alist 存储同步工具，支持多任务管理、定时同步、差异处理等功能。如果好用，请Star！非常感谢！ GitHub Gitee DockerHub 功能特点 📱 美观的 Web 管理界面🔄 支持多任…...

编程日记 2025/5/8 14:58:27

【FlutterDart】 listView.builder例子二（14 /100）

上效果图上代码： import package:flutter/material.dart;class ListRoles extends StatelessWidget {ListRoles({super.key});final List<String> entries <String>[, -, *, /];final List<int> colorCodes <int>[600, 500, 100, 50];o…...

编程日记 2025/4/30 1:05:50

《shared_ptr源码剖析》

【shared_ptr导读】上一节，我们为大家介绍了unique_ptr的底层原理和实现。相对于unique_ptr，shared_ptr也是被大家广泛使用的智能指针，shared_ptr内部的原理是怎样的？shared_ptr是多线程安全的吗？ 本文将以Centos标准库…...

编程日记 2025/5/6 3:27:30

关于markdown实现页面跳转（调查测试：csdn（博客编写效果、发布效果）、typroa中md转pdf的使用情况）

一-方法介绍 [点击跳转到标题0](#1) <a href"#2">正文2</a>### <span id"2">标题0</span>二、跳转测试区点击跳转到标题0 正文2 三、测试结果场景MDspan-可标题写博客时候，右侧显示区效果可以发布博客的效果可以…...

编程日记 2025/5/5 15:34:28

入门级容器技术解析：Docker和K8s的区别与关系

目录 🎯学习小目标： 关于容器传统物理机🖥️ 虚拟机💻 为什么使用容器技术呢？🤔 容器技术🥃 Docker—容器化平台 K8s(Kubernetes)—容器编排系统 Docker和K8s有什么关系和区别&#…...

编程日记 2025/4/30 19:21:13

《Rust权威指南》学习笔记（五）

高级特性 1.在Rust中，unsafe是一种允许绕过Rust的安全性保证的机制，用于执行一些Rust默认情况下不允许的操作。unsafe存在的原因是：unsafe 允许执行某些可能被 Rust 的安全性检查阻止的操作，从而可以进行性能优化，如手…...

编程日记 2025/5/4 1:10:31

数据库软考历年上午真题与答案解析(2018-2024)

本题考查计算机总线相关知识。总线（Bus）是计算机各种功能部件之间传送信息的公共通信干线，它是由导线组成的传输线束。根据总线连接设备范围的不同， 分为：1.片内总线：芯片内部的总线； 2.系统…...

编程日记 2025/5/6 6:38:26

HTML5 文件上传（File Upload）详解

HTML5 文件上传（File Upload）详解 HTML5 提供了强大的文件上传功能，允许用户通过网页选择文件并上传到服务器。以下是关于文件上传控件的详细说明。 1. 基本的文件上传控件使用 <input> 标签的 type"file" 属性可以创建一…...

编程日记 2025/5/6 5:13:43

构建属于你的七牛云文件上传工具：Qiniu Uploader 详解（从 0 到 1 实现）

GitHub 仓库地址：https://github.com/hahala2333/qiniu-upload 📚 简介在现代 Web 开发中，静态资源的上传和管理是不可避免的需求。为了简化将本地资源上传到七牛云存储的过程，我们构建了 Qiniu Uploader 工具。它具备灵活的配置…...

编程日记 2025/5/6 20:56:29

Spring Boot 项目中集成 Kafka-03

在 Spring Boot 项目中集成 Kafka 有多种方式，适应不同的应用场景和需求。以下将详细介绍几种常用的集成方法，包括： 使用 Spring Kafka (KafkaTemplate 和 KafkaListener)使用 Spring Cloud Stream 与 Kafka Binder使用 Spring for Apache K…...

编程日记 2025/5/5 6:37:41

如何在2025年创建一个网站：使用US Domain Center和WordPress的终极指南

在本指南中，我们将向你展示如何正确地使用US Domain Center和WordPress创建一个网站。无论你是要启动一个个人博客，还是一个在线商店，我们都会提供简单易懂的步骤指导。无需技术技能 — — 只需按照我们的简单步骤操作，你就能在今…...

编程日记 2025/5/5 8:38:30

LLM 训练中存储哪些矩阵：权重矩阵，梯度矩阵，优化器状态

LLM 训练中存储哪些矩阵目录 LLM 训练中存储哪些矩阵深度学习中梯度和优化器是什么在 LLM 训练中通常会存储以下矩阵：权重矩阵：这是模型的核心组成部分。例如在基于 Transformer 架构的 LLM 中，每一层的多头注意力机制和前馈神经网络都会有相应的权重矩阵。以 BERT 模型为…...

编程日记 2025/5/5 3:01:13