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

vue从0开始的项目搭建(含环境配置)

一、环境准备

     下载node.js + 检查node.js版本 + 替换npm下载源

1.下载node.js:  Node.js — 在任何地方运行 JavaScript (nodejs.org)

2.查看版本:   windows+r输入cmd进入输入node -v命令查看版本号是否出现确认是否安装

2.替换npm下载源:   npm config set registry https://registry.npmmirror.com

3.查看是否安装成功  npm -v

二、搭建项目

1.在电脑上新建一个文件夹作为vue项目的文件夹, 在此文件夹中空白处按shift键同时点击鼠标右键,选择在此处打开Powershell窗口 

2.在命令行中输入以下命令: npm create vue@latest    回车,出现下图这种一直回车

一直回车到新的需要输入为止,如下图

3.进入目录 cd vue-project ,执行 npm install 安装依赖

4.然后执行 npm run dev 运行项目

5.下图网址即是进入项目链接

6.当然还有一种打开方式,是我们最常用的

右键文件夹,选择vscode打开(如果没有vscode可以查看这个链接  点我  查看解决方案 )

然后ctrl+j 打开终端,输入npm run dev即可运行 

注意:如果报错如下图

那么先右键最顶部文件夹+打开终端输入npm run dev即可

下次给大家讲解进去之后的基础配置与作用,我是小辉,请多多关照!! 

相关文章:

vue从0开始的项目搭建(含环境配置)

一、环境准备 下载node.js 检查node.js版本 替换npm下载源 1.下载node.js: Node.js — 在任何地方运行 JavaScript (nodejs.org) 2.查看版本: windowsr输入cmd进入输入node -v命令查看版本号是否出现确认是否安装 2.替换npm下载源: npm config set registry https://reg…...

力扣61~65题

题61(中等): 分析: python代码: # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def rot…...

API接口开发流程与指南

API(应用程序编程接口)是现代软件开发中不可或缺的一部分,它允许不同的软件应用之间进行交互和数据交换。无论是调用第三方服务、集成内部系统还是开发微服务架构,API都扮演着关键角色。本文将为你提供一个API接口入门的详解&…...

如何在Android中进行日志打印和调试?

在Android开发中,日志打印和调试是开发者定位问题、优化性能和提升应用质量的重要手段。以下将详细阐述如何在Android中进行日志打印和调试,包括日志工具的使用、调试技巧以及实践中的最佳实践。 一、日志工具的使用 1. Log类 Android中的日志工具类是…...

Linux基本使用和程序部署

文章目录 一. Linux背景Linux发行版 二. Linux环境搭建Linux常见命令lspwdcdtouchcatmkdirrmcpmvtailvimgreppsnetstat管道 三. 搭建java部署环境安装jdk安装mysql部署Web项目到Linux 一. Linux背景 1969−1970年,⻉尔实验室的DennisRitchie和KenTompson开发了Unix操作系统. 他…...

照片编辑成动态视频用什么软件好

在数字时代,让照片动起来确实已成为一种流行的潮流和趋势。如今,市面上涌现出众多软件,它们不仅配备了丰富多样的动态效果和特效,还支持用户进行个性化的编辑和创作。无论你是希望将家庭合影转化为充满温情的动画,还是…...

JavaWeb合集-SpringBoot项目配套知识

四、SpringBoot项目配套知识 1、Springboot项目的创建 2、HTTP 概念: Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则。 2.1 request 请求协议 浏览器向服务器发送请求的规则(get、post等)。 2.1.1 请…...

Electron入门笔记

Electron入门笔记 ElectronElectron 是什么Electron流程模型创建第一个Electron项目配置自动重启主进程和渲染进程通信打包应用 Electron Electron 是什么 跨平台的桌面应用开发框架使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium和 Node.js Electro…...

python 不相交集简介(并查集算法)【Introduction to Disjoint Set (Union-Find Algorithm)】

什么是不相交集数据结构? 如果两个集合没有任何共同元素,则它们被称为不相交集,集合的交集为空集。 存储不重叠或不相交元素子集的数据结构称为不相交集合数据结构。不相交集合数据结构支持以下操作: 1、将新集合添加到不相交集合…...

23种设计模式之工厂方法模式

文章目录 1. 简介2. 代码2.1 抽象类:Course.java2.2 产品A:JavaCourse.java2.3 产品B:PythonCourse.java2.4 工厂抽象类:CourseFactory.java2.5 产品A的工厂A:JavaCourseFactory.java2.6 产品B的工厂B:PyCo…...

Redis——事务

文章目录 Redis 事务Redis 的事务和 MySQL 事务的区别:事务操作MULTIEXECDISCARDWATCHUNWATCHwatch的实现原理 总结 Redis 事务 什么是事务 Redis 的事务和 MySQL 的事务 概念上是类似的. 都是把⼀系列操作绑定成⼀组. 让这⼀组能够批量执行 Redis 的事务和 MySQL 事务的区别:…...

Redis非关系型数据库操作命令大全

以下是 Redis 的常用操作命令大全,涵盖了键值操作、字符串、哈希、列表、集合、有序集合、发布/订阅、事务等多个方面的操作。 1. 通用键命令 命令说明SET key value设置指定 key 的值GET key获取指定 key 的值DEL key删除指定的 keyEXISTS key检查 key 是否存在E…...

基于SpringBoot+Vue+uniapp微信小程序的澡堂预订的微信小程序的详细设计和实现

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念,提供了一套默认的配置,让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…...

Linux mips架构链接库函数调用plt表汇编代码分析

linux调用共享库中的函数时通过plt表和got表实现位置无关代码,过程中涉及到lazy binding,即在第一调用外部函数时解析被调用的函数地址并将地址写入到got表,后续调用则不需要解析函数地址。这一部分和硬件架构有关,具体的是和cpu指…...

python 作业1

任务1: python为主的工作是很少的 学习的python的优势在于制作工具,制作合适的工具可以提高我们在工作中的工作效率的工具 提高我们的竞争优势。 任务2: 不换行 换行 任务3: 安装pycharm 进入相应网站Download PyCharm: The Python IDE for data science and we…...

Apache 出现 “403 forbidden“ 排查方法

1、检查运行 Apache 进程的用户没有对目录具备读取权限 如果该用户没有对 Directory 指定的目录具备适当的读取权限,就会导致 403 错误。 ​​例如:使用用户apache启动Apache进程,但是apache用户对 Directory 指定的目录没有读取权限 2、检查…...

vue video播放m3u8监控视频

很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错 直接添加如下代码即可 html5: {vhs: {overrideNative: true},nativeVideoTracks: false,nativeAudioTracks: false,nativeTextTracks: false} 下面是完整组件示例 <template><div>…...

uniapp 获取签名证书 SHA1 自有证书签名打包

1.登录你的Dcloud 账户 2.找到我的应用菜单 3.点开某个应用 4.查看证书详情&#xff0c;里面有SHA1 和别名&#xff0c;密码&#xff0c;下载证书用于云打包&#xff0c;可以选择自有证书&#xff0c;输入别名&#xff0c;密码打包...

Open3d开发点云标注工具问题总结(二)

前面我们介绍了使用AABB方式来框选点云&#xff0c;但这种方式还是不够直观&#xff0c;我们的构想是设计一个和o3d.visualization.VisualizerWithEditing的点云框选方法一样的软件&#xff0c;因此&#xff0c;博主想到利用投影的形式进行解决&#xff1a; 具体的&#xff0c;…...

【FreeRTOS】

报错&#xff1a; 使用STM32cubemx自动生成freertos选项V2报错&#xff0c;V1不报错 …/Middlewares/Third_Party/FreeRTOS/Source/CMSIS_RTOS_V2/freertos_os2.h(31): 解决 修改cubemx配置&#xff0c;将V1.8.6改选为V1.8.5后编译不再报错...

洛谷 P4995:跳跳! ← 贪心算法

【题目来源】https://www.luogu.com.cn/problem/P4995【题目描述】你是一只小跳蛙&#xff0c;你特别擅长在各种地方跳来跳去。 这一天&#xff0c;你和朋友小 F 一起出去玩耍的时候&#xff0c;遇到了一堆高矮不同的石头&#xff0c;其中第 i 块的石头高度为 hi&#xff0c;地…...

代理 IP 在 AI 爬虫中的关键应用

现如今&#xff0c;人工智能&#xff08;AI&#xff09;的发展日新月异&#xff0c;而数据作为驱动 AI 发展的关键要素&#xff0c;其重要性不言而喻。AI 爬虫作为获取大量数据的重要工具&#xff0c;在数据收集过程中发挥着至关重要的作用。而代理 IP 在 AI 爬虫中有着广泛而重…...

【Vercel】Vercel静态部署踩坑

背景 在现代的软件开发中&#xff0c;自动化部署是一个不可或缺的环节。Vercel作为一个流行的前端部署平台&#xff0c;提供了与GitHub的无缝集成&#xff0c;使得开发者能够在每次提交代码后自动触发部署流程。然而&#xff0c;自动化部署过程中可能会遇到一些挑战&#xff0…...

【Spring】关于Spring中aware相关接口的作用

Aware 接口的回调方法是在 Bean 实例化之后调用的。具体来说&#xff0c;这些回调方法是在依赖注入完成后&#xff0c;但在 Bean 完全初始化之前调用的。这是 Spring 容器管理 Bean 生命周期的一部分 完成了属性赋值之后&#xff0c;Spring会执行一些回调&#xff0c;包括&…...

动态内存管理及RAII的简单应用

目录 一.程序启动所关联的内存分区 二.动态内存的申请和释放 三.将RAII思想融入代码 四.RAII思想的简单应用 一.程序启动所关联的内存分区 .dll文件是Dynamic Link Library&#xff08;动态链接库&#xff09;文件的缩写&#xff0c;它是一种共享库文件&#xff0c;包含…...

7、Vue2(一)

1.认识Vue 官网地址&#xff1a;https://v2.cn.vuejs.org/v2/guide/ Vue.js 是一套构建用户界面的渐进式框架。 Vue 2 是在2016年发布使用&#xff0c;2020是 vue3 才刚发布&#xff0c;时隔一年左右就已经将 vue3 作为了默认版本 尤雨溪&#xff0c;Vue.js和Vite的作者&…...

Chapter11

11.3 #include <stdio.h> #include <string.h> #define NUM_STUDENTS 40 #define NUM_SUBJECTS 3 // 学生结构体 typedef struct { int id; char name[50]; float scores[NUM_SUBJECTS]; float average; } Student; void inputData(Student studen…...

LLAMA2入门(一)-----预训练

Llama 2 是预训练和微调的LLM系列&#xff0c;Llama 2 和 Llama 2-Chat 模型的参数规模达到 70B。Llama 2-Chat 模型专门为对话场景进行了优化。 这是一个系列的文章&#xff0c;会分别从LLAMA2的预训练&#xff0c;微调&#xff0c;安全性等方面进行讲解。 1.数据来源 数据…...

使用poi-tl动态写入目录更新问题解决

在使用poi-tl动态写完word后&#xff0c;是无法更新目录的&#xff0c;使用poi-tl提供的插件也是不行的&#xff0c;而且很多使用poi手动写入的也是不行&#xff0c;最多就是让你在打开文件时提示你更新目录/更新域&#xff0c;用户体验很差&#xff0c;要点击好几次而且wps还不…...

OpenCV高级图形用户界面(9)更改指定窗口的位置函数moveWindow()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将窗口移动到指定的位置。 cv::moveWindow() 函数用于更改指定窗口的位置。你可以使用这个函数来移动窗口到屏幕上的任何位置。 函数原型 void …...