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

【前端】搭建Vue3框架

news 2025/12/21 12:42:58

目录

  • 一、搭建准备
  • 二、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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/12/20 13:10:15

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/11/16 14:05:01

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/12/12 11:33:47

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/10/4 3:01:43

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/12/20 2:21:14

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2025/12/21 2:19:01

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2025/12/20 22:09:35