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

【前端】搭建Vue3框架

news 2025/12/21 14:13:42

目录

  • 一、搭建准备
  • 二、node.js安装
    • 1、下载并安装
    • 2、配置默认安装目录和缓存日志目录
      • ①、创建默认安装目录和缓存日志目录（我的node.js目录在D盘，所以直接在node.js文件夹下创建）
      • ②、执行命令，配置默认安装目录和缓存日志目录到刚才创建的文件夹
    • 3、配置环境变量
      • ①、按win键并输入“编辑系统环境变量”，打开点击下方的“环境变量”
      • ②、在系统变量下新建NODE_PATH变量，输入默认安装目录node_global下的node_modules的路径
      • ③、进入系统变量的Path，输入node.js安装路径
      • ④、进入用户变量的Path，输入node.js默认的模块调用路径
    • 4、配置淘宝镜像
      • ①、安装cnpm
      • ②、验证是否安装成功
  • 三、安装vue和脚手架
    • 1、安装vue.js
    • 2、验证安装是否成功
    • 3、安装webpack模块
    • 4、安装webpack-cli
    • 5、安装vue-cli 3.x
  • 四、创建vue3项目
    • 1、创建项目
    • 2、选择安装版本
    • 3、项目需求配置
    • 4、选择vue版本
    • 5、是否使用history router
    • 6、选择CSS预处理器
    • 7、选择ESLint
    • 8、选择额外的Lint功能
    • 9、Bable和ESLint配置位置
    • 10、是否保存为默认配置（如果选择yes，需要自己起个默认名）
    • 11、创建成功
  • 五、启动项目
  • 六、目录结构分析

一、搭建准备

  • VScode/HBuilder等任何一种前端开发工具
  • node.js&npm本地开发环境

二、node.js安装

1、下载并安装

Node.js官网：Node.js官网

在这里插入图片描述

安装成功后，在CMD控制台输入以下两个命令验证是否安装成功

#查看node版本
node -v#查看npm版本
npm -v

在这里插入图片描述

2、配置默认安装目录和缓存日志目录

①、创建默认安装目录和缓存日志目录（我的node.js目录在D盘，所以直接在node.js文件夹下创建）

由于在执行全局安装语句时，安装的模块会默认安装到C:\Users\用户名\AppData\Roaming\npm 目录下，久而久之C盘很容易被沾满（C盘足够大可以无视此步骤），所以将默认安装目录和缓存日志重新配置到其他盘符节约C盘空间

在这里插入图片描述

②、执行命令，配置默认安装目录和缓存日志目录到刚才创建的文件夹

npm config set prefix "D:\项目配件\Node\node_global"
npm config set cache "D:\项目配件\Node\node_cache"

在这里插入图片描述

3、配置环境变量

①、按win键并输入“编辑系统环境变量”，打开点击下方的“环境变量”

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

②、在系统变量下新建NODE_PATH变量，输入默认安装目录node_global下的node_modules的路径

D:\项目配件\Node\node_global\node_modules

在这里插入图片描述

③、进入系统变量的Path，输入node.js安装路径

D:\项目配件\Node\

在这里插入图片描述

④、进入用户变量的Path，输入node.js默认的模块调用路径

D:\项目配件\Node\node_global
D:\项目配件\Node\node_cache

在这里插入图片描述

4、配置淘宝镜像

使用NPM来安装用的是国外的服务器，经常会出现超时错误，可以通过修改为国内的淘宝镜像来加速安装。淘宝NPM镜像是一个完整npmjs.com镜像，同步频率目前为10分钟一次，以保证尽量与官方服务同步

①、安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述

②、验证是否安装成功

cnpm config get registry

在这里插入图片描述

三、安装vue和脚手架

1、安装vue.js

cnpm install vue -g

在这里插入图片描述

2、验证安装是否成功

cnpm info vue

在这里插入图片描述

3、安装webpack模块

cnpm install webpack -g

在这里插入图片描述

4、安装webpack-cli

cnpm install --global webpack-cli

在这里插入图片描述

5、安装vue-cli 3.x

cnpm install @vue/cli –g

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

四、创建vue3项目

以管理员身份打开cmd控制台，进入想要创建项目的目录，开始创建项目

1、创建项目

vue create [项目名称]

2、选择安装版本

默认安装vue2
默认安装vue3
自定义安装

这里我选择的是第三个自定义安装

在这里插入图片描述

3、项目需求配置

【*号代表选中，根据自己项目的需求，空格选中，选中完回车确认】
在这里插入图片描述

Babel（JavaScript 编译器，可将代码转换为向后兼容）
TypeScript（编程语言，大型项目建议使用）
Progressive Web App (PWA) Support-APP使用
Router（路由）
Vuex（Vuex）
CSS Pre-processors（css预处理）
Linter / Formatter（代码风格/格式化）
Unit Testing（单元测试）
E2E Testing（e2e测试）

4、选择vue版本

想要创建一个vue3的项目，所以这里我选择的是3.x
在这里插入图片描述

5、是否使用history router

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）
hash： 浏览器url址栏 中的 # 符号（如这个 URL：http://www.abc.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定浏览器支持）。单页客户端应用，history mode 需要后台配置支持

在这里插入图片描述

6、选择CSS预处理器

在这里插入图片描述

7、选择ESLint

在这里插入图片描述

8、选择额外的Lint功能

Lint on save 保存后检测
Lint and fix on commit commit时检测

在这里插入图片描述

9、Bable和ESLint配置位置

在这里插入图片描述

10、是否保存为默认配置（如果选择yes，需要自己起个默认名）

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

11、创建成功

在这里插入图片描述

五、启动项目

在这里插入图片描述

六、目录结构分析

在这里插入图片描述

相关文章：

【前端】搭建Vue3框架

目录 一、搭建准备二、node.js安装1、下载并安装2、配置默认安装目录和缓存日志目录①、创建默认安装目录和缓存日志目录（我的node.js目录在D盘，所以直接在node.js文件夹下创建）②、执行命令，配置默认安装目录和缓存日志目录到刚才…...

编程日记 2023/8/5 22:46:48

Opencv-C++笔记 (15) : 像素重映射 与 图像扭曲

文章目录 一、重映射简介二、图像扭曲 一、重映射简介 重映射，就是把一幅图像中某位置的像素放置到另一图像指定位置的过程。即： 在重映射过程中，图像的大小也可以同时发生改变。此时像素与像素之间的关系就不是一一对应关系，因…...

编程日记 2023/8/5 22:45:47

【Java】UWB高精度工业人员安全定位系统源码

基于VueSpring boot前后端分离架构开发的一套UWB技术高精度定位系统源码。 UWB高精度人员定位系统提供实时定位、电子围栏、轨迹回放等基础功能以及各种拓展功能,用户可根据实际需要任意选择搭配拓展功能。该系统简易部署，方便使用，实时响应。UWB高精度定…...

编程日记 2023/8/5 22:44:45

文本NLP噪音预处理（加拼写检查）

最近总结修改了下预处理方法，记录下 首先download需要的依赖 pip install pyenchantpip install nltk pyenchant 是用来检测拼写正确的，如果你的文本里面可能包含非正确拼写的单词，那就忽略它，nltk用来做分词的。 python -m nlt…...

编程日记 2023/8/5 22:43:42

[Docker实现测试部署CI/CD----自由风格的CI操作[最终架构]（5）]

目录 11、自由风格的CI操作（最终）Jenkins容器化实现方案修改 docker.sock 权限修改 Jenkins 启动命令后重启 Jenkins构建镜像推送到Harbor修改 daemon.json 文件Jenkins 删除构建后操作Jenkins 添加 shell 命令重新构建 Jenkins通知目标服务器拉取镜像目…...

编程日记 2023/8/5 22:42:40

纯JS+Vue实现一个仪表盘

在使用canvas的时候发现数值变化&#xff0c;每次都要重新渲染&#xff0c;值都从0开始&#xff0c;这和我的需求冲突。 1. 先绘制基本的圆环背景&#xff0c;利用border-color和border-radius将正方形变成基本的圆环。 <div class"circle"><div class&qu…...

编程日记 2023/8/5 22:41:39

标定（内参、外参）

在计算机视觉中&#xff0c;特别是在相机标定和立体视觉领域&#xff0c;内参&#xff08;intrinsic parameters&#xff09;和外参&#xff08;extrinsic parameters&#xff09;是非常重要的概念。它们与相机的几何属性和姿态有关。 内参&#xff08;Intrinsic Parameters&am…...

编程日记 2023/8/5 22:40:37

基于ffmpeg与SDL的视频播放库

由于工作需要&#xff0c;自己封装的基于ffmpeg的视频编解码库&#xff0c;显示采用了SDL库。可以播放本地文件或网络流&#xff0c;支持多端口播放&#xff0c;支持文字叠加&#xff0c;截图、视频录制等等。 头文件代码&#xff1a; #pragma once #ifdef __DLLEXPORT #defin…...

编程日记 2023/8/5 22:39:36

基于二进制草蝉优化算法选择特征并使用 KNN 进行训练（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 基于二进制草蝉优化算法选择特征并使用KNN&#xff08;K-Nearest Neighbors&#xff0c;K最近邻算法&#xff09;进行训练是一种…...

编程日记 2023/8/5 22:38:35

14-4_Qt 5.9 C++开发指南_QUdpSocket实现 UDP 通信_UDP组播

文章目录 1. UDP组播的特性2. UDP 组播实例程序的功能3. 组播功能的程序实现4. 源码4.1 可视化UI设计4.2 mainwindow.h4.3 mainwindow.cpp 1. UDP组播的特性 下图简单表示了组播的原理。UDP 组播是主机之间“一对一组”的通信模式&#xff0c;当多个客户端加入由一个组播地址定…...

编程日记 2023/8/5 22:37:34

ai图片合成软件帮你创造个性绚丽

嘿&#xff01;悄悄告诉你一个小秘密&#xff0c;现在有一款超酷的软件&#xff0c;它能让你的图片变得活灵活现&#xff0c;就像跳出了屏幕一样&#xff01;没错&#xff0c;这就是ai图片制作软件&#xff01;想象一下&#xff0c;你拍摄了一张美丽的风景照片&#xff0c;但总…...

编程日记 2023/8/5 22:36:33

git 版本回退

git 没有push之前&#xff0c;可以用git reset --mixed回退&#xff0c;就是把add 的内容和commit的内容都撤销 在push之后&#xff0c;你只有2种操作 1.git reset 退回到你想要的那个版本 有配置选项 如果是soft就是当前版本删掉&#xff0c;之前改的代码保留&#xff0c;ha…...

编程日记 2023/8/5 22:35:31

使用Jackson自定义序列化操作（Jackson – Custom Serializer）

目录 Standard Serialization of an Object GraphCustom Serializer on the ObjectMapperCustom Serializer on the Class Standard Serialization of an Object Graph Data NoArgsConstructor AllArgsConstructor public class Item {public int id;public String itemName;p…...

编程日记 2023/8/5 22:34:30

Python-元组

元组&#xff08;Tuples&#xff09;详解 在Python中&#xff0c;元组&#xff08;Tuples&#xff09;是一种有序的数据类型&#xff0c;它可以包含任意类型的元素&#xff0c;包括数字、字符串、列表等。与列表相似&#xff0c;元组也是用来存储一组数据&#xff0c;但与列表…...

编程日记 2023/8/5 22:33:28

快速转换PDF文件: Python和PyMuPDF教程

解决问题 有时候将文档上传Claude2做分析&#xff0c;有大小限制&#xff0c;所以需要切割pdf文档为几个小点的文档&#xff0c;故才有了本文章。 如何用Python和PyMuPDF制作你想要大小的PDF&#xff1f; PDF是一种广泛使用的文件格式&#xff0c;可以在任何设备上查看和打印…...

编程日记 2023/8/5 22:32:24

规划模型Matlab代码

文章目录 数学规划定义一般形式分类 1.线性规划(linear programming)2.非线性规划(nonlinear programming)3. 整数规划(integer programming)4. 0-1规划(0-1 programming)5. 最大最小化模型6. 多目标规划模型7.敏感性分析&#xff08;对权重&#xff09;[例题] 数学规划定义 数…...

编程日记 2023/8/5 22:31:21

用html+javascript打造公文一键排版系统11：改进单一附件说明排版

一、用htmljavascript打造公文一键排版系统10中的一个bug 在 用htmljavascript打造公文一键排版系统10&#xff1a;单一附件说明排版 中&#xff0c;我们对附件说明的排版函数是&#xff1a; function setAtttDescFmt(p) {var t p;var a ;if (-1 ! t.indexOf(:))//是半角冒…...

编程日记 2023/8/5 22:29:19

snap xxx has “install-snap“ change in progress

error description * 系重复安装&#xff0c;进程冲突 solution 展示snap的改变 然后sudo snap abort 22即可终止该进程 之后重新运行install command&#xff5e;&#xff5e; PS: ubuntu有时候加载不出来&#xff0c;执行resolvectl flush-caches&#xff0c;清除dns缓存…...

编程日记 2023/8/5 22:28:18

Elasticsearch 性能调优指南

目录 1、通用优化策略 1.1 通用最小化法则 1.2 职责单一原则 1.3 其他 2、写性能调优 2.1 基本原则 2.2 优化手段 2.2.1 增加 flush 时间间隔&#xff0c; 2.2.2 增加refresh_interval的参数值 2.2.3 增加Buffer大小&#xff0c; 2.2.4 关闭副本 2.2.5 禁用swap 2…...

编程日记 2023/8/5 22:27:16

学习Boost一：学习方法和学习目的

学习目的 Boost 的学习目的&#xff1a; 因为从知乎和CSND上根据了解内容来看&#xff0c;Boost作为一个历史悠久的开源库&#xff0c;已经脱离了一个单纯的库的概念了&#xff0c;他因庞大的涉及面应当被称之为库集。 并且&#xff0c;因为boost库优秀的试用反馈和开发人员的…...

编程日记 2023/8/5 22:26:14

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/12/12 3:26:16

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/12/14 7:46:59

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/12/17 23:21:43

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/12/19 22:49:25

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/12/19 4:06:55

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/12/12 21:35:24

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10