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

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

标定(内参、外参)

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

基于ffmpeg与SDL的视频播放库

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

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

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

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;当多个客户端加入由一个组播地址定…...

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

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

git 版本回退

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

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

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

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

规划模型Matlab代码

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

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

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

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缓存…...

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…...

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

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

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

从零开始了解数据采集(二十八)——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...