【前端】搭建Vue3框架
目录
- 一、搭建准备
- 二、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文件夹下创建)②、执行命令,配置默认安装目录和缓存日志目录到刚才…...
Opencv-C++笔记 (15) : 像素重映射 与 图像扭曲
文章目录 一、重映射简介二、图像扭曲 一、重映射简介 重映射,就是把一幅图像中某位置的像素放置到另一图像指定位置的过程。即: 在重映射过程中,图像的大小也可以同时发生改变。此时像素与像素之间的关系就不是一一对应关系,因…...
【Java】UWB高精度工业人员安全定位系统源码
基于VueSpring boot前后端分离架构开发的一套UWB技术高精度定位系统源码。 UWB高精度人员定位系统提供实时定位、电子围栏、轨迹回放等基础功能以及各种拓展功能,用户可根据实际需要任意选择搭配拓展功能。该系统简易部署,方便使用,实时响应。UWB高精度定…...
文本NLP噪音预处理(加拼写检查)
最近总结修改了下预处理方法,记录下 首先download需要的依赖 pip install pyenchantpip install nltk pyenchant 是用来检测拼写正确的,如果你的文本里面可能包含非正确拼写的单词,那就忽略它,nltk用来做分词的。 python -m nlt…...
[Docker实现测试部署CI/CD----自由风格的CI操作[最终架构](5)]
目录 11、自由风格的CI操作(最终)Jenkins容器化实现方案修改 docker.sock 权限修改 Jenkins 启动命令后重启 Jenkins构建镜像推送到Harbor修改 daemon.json 文件Jenkins 删除构建后操作Jenkins 添加 shell 命令重新构建 Jenkins通知目标服务器拉取镜像目…...
纯JS+Vue实现一个仪表盘
在使用canvas的时候发现数值变化,每次都要重新渲染,值都从0开始,这和我的需求冲突。 1. 先绘制基本的圆环背景,利用border-color和border-radius将正方形变成基本的圆环。 <div class"circle"><div class&qu…...
标定(内参、外参)
在计算机视觉中,特别是在相机标定和立体视觉领域,内参(intrinsic parameters)和外参(extrinsic parameters)是非常重要的概念。它们与相机的几何属性和姿态有关。 内参(Intrinsic Parameters&am…...
基于ffmpeg与SDL的视频播放库
由于工作需要,自己封装的基于ffmpeg的视频编解码库,显示采用了SDL库。可以播放本地文件或网络流,支持多端口播放,支持文字叠加,截图、视频录制等等。 头文件代码: #pragma once #ifdef __DLLEXPORT #defin…...
基于二进制草蝉优化算法选择特征并使用 KNN 进行训练(Matlab代码实现)
目录 💥1 概述 📚2 运行结果 🎉3 参考文献 👨💻4 Matlab代码 💥1 概述 基于二进制草蝉优化算法选择特征并使用KNN(K-Nearest Neighbors,K最近邻算法)进行训练是一种…...
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 组播是主机之间“一对一组”的通信模式,当多个客户端加入由一个组播地址定…...
ai图片合成软件帮你创造个性绚丽
嘿!悄悄告诉你一个小秘密,现在有一款超酷的软件,它能让你的图片变得活灵活现,就像跳出了屏幕一样!没错,这就是ai图片制作软件!想象一下,你拍摄了一张美丽的风景照片,但总…...
git 版本回退
git 没有push之前,可以用git reset --mixed回退,就是把add 的内容和commit的内容都撤销 在push之后,你只有2种操作 1.git reset 退回到你想要的那个版本 有配置选项 如果是soft就是当前版本删掉,之前改的代码保留,ha…...
使用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…...
Python-元组
元组(Tuples)详解 在Python中,元组(Tuples)是一种有序的数据类型,它可以包含任意类型的元素,包括数字、字符串、列表等。与列表相似,元组也是用来存储一组数据,但与列表…...
快速转换PDF文件: Python和PyMuPDF教程
解决问题 有时候将文档上传Claude2做分析,有大小限制,所以需要切割pdf文档为几个小点的文档,故才有了本文章。 如何用Python和PyMuPDF制作你想要大小的PDF? PDF是一种广泛使用的文件格式,可以在任何设备上查看和打印…...
规划模型Matlab代码
文章目录 数学规划定义一般形式分类 1.线性规划(linear programming)2.非线性规划(nonlinear programming)3. 整数规划(integer programming)4. 0-1规划(0-1 programming)5. 最大最小化模型6. 多目标规划模型7.敏感性分析(对权重)[例题] 数学规划定义 数…...
用html+javascript打造公文一键排版系统11:改进单一附件说明排版
一、用htmljavascript打造公文一键排版系统10中的一个bug 在 用htmljavascript打造公文一键排版系统10:单一附件说明排版 中,我们对附件说明的排版函数是: function setAtttDescFmt(p) {var t p;var a ;if (-1 ! t.indexOf(:))//是半角冒…...
snap xxx has “install-snap“ change in progress
error description * 系重复安装,进程冲突 solution 展示snap的改变 然后sudo snap abort 22即可终止该进程 之后重新运行install command~~ PS: ubuntu有时候加载不出来,执行resolvectl flush-caches,清除dns缓存…...
Elasticsearch 性能调优指南
目录 1、通用优化策略 1.1 通用最小化法则 1.2 职责单一原则 1.3 其他 2、写性能调优 2.1 基本原则 2.2 优化手段 2.2.1 增加 flush 时间间隔, 2.2.2 增加refresh_interval的参数值 2.2.3 增加Buffer大小, 2.2.4 关闭副本 2.2.5 禁用swap 2…...
学习Boost一:学习方法和学习目的
学习目的 Boost 的学习目的: 因为从知乎和CSND上根据了解内容来看,Boost作为一个历史悠久的开源库,已经脱离了一个单纯的库的概念了,他因庞大的涉及面应当被称之为库集。 并且,因为boost库优秀的试用反馈和开发人员的…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
