vue安装与配置

node

node.js的下载:https://nodejs.org/dist
在项目中可能会有版本冲突,这里可以选择自己想要的版本下载,而且一台电脑可以同时安装多个版本的node。当你需要切换版本时直接去更改环境变量即可。下面我安装选择的是压缩包,压缩包直接解压配置就可以用,如果下载安装包,一直下一步,选择好自己的路劲也是没什么问题的,二者皆可。
在这里插入图片描述
下载之后解压至路径
在这里插入图片描述
因为我node -v查不到node的版本,所以我这里先配置一下环境变量,如果你能查到也可以先不配置环境变量。因为我电脑是日语版的,所以是日文,但是不影响操作。
配置环境变量快捷方式:
win+r输入sysdm.cpl
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

这样往下点击ok就完事,然后cmd查一下node版本npm版本
在这里插入图片描述

创建全局安装目录和缓存日志目录

在node的安装目录下去创建node_cache和node_global两个文件夹
在这里插入图片描述
再cmd:npm配置全局模块目录和缓存目录

npm config set prefix "你的安装目录\node_global"
npm config set cache "你的安装目录\node_cache"

为了加载包快速,修改源为淘宝镜像

npm config set registry https://registry.npm.taobao.org

在这里插入图片描述
查看操作
npm config list在这里插入图片描述
将node_globa和node_cache这两个文件路径也在环境变量中添加
在这里插入图片描述

安装vue

全局安装:npm install vue -g 

win+s以管理员身份打开cmd,要不有可能没有权限安装。
在这里插入图片描述
在这里插入图片描述
安装webpack模板,注意看控制台输出,但是一般不会报错:

npm install webpack -g
npm install webpack-cli -g
查看:webpack -v

在这里插入图片描述.
安装脚手架vue-cli:
有版本输出就说明安装成功

npm install vue-cli -g
vue -version

在这里插入图片描述
安装vue-router:

npm install vue-router -g

在这里插入图片描述
下载的包在这里
在这里插入图片描述

怎么运行网上找的vue项目?

这里我在我的git上下载一个项目:点我下载项目
此项目2023/12/12目前开源,但是后期可能不开源,其他前端项目造操作也可成功,道理都一样

在这里插入图片描述
在这里插入图片描述
所有环境都装好啦,但是如果荡下来的项目我们直接运行就会报这个错误。这里前端项目还比较干净
在这里插入图片描述
先清理一下缓存,再重新安装npm

npm cache clean -force
npm install

在这里插入图片描述.
执行完之后项目会多一个这个文件夹,如果我们在荡项目时有这个我就先删掉,要不会产生冲突错误,删掉之后在项目路径下执行:

npm cache clean -force
npm install

在这里插入图片描述
解决了’vue-cli-service’ is not recognized as an internal or external command,
operable program or batch file.
这个错误之后,再重新启动项目就ok啦
在这里插入图片描述在这里插入图片描述
看到端口好就证明你已经成功启动了项目,启动项目指令一般是:

npm run serve 
或者 npm run dev

启动之后就可以在浏览器地址栏访问端口啦
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/238340.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SDXL使用animateDiff和hotshot-xl进行文生视频

截至2023.12.8号,目前市面上有两款适用于SDXL的文生视频开源工具,分别是AnimateDiff和hotshot-xl。 一、工具下载链接 (1)AnimateDiff的webui版本的git链接: GitHub - continue-revolution/sd-webui-animatediff: A…

vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能

实现效果&#xff1a; 功能实现&#xff1a; 要实现图片的拖拽功能首先需要安装vuedraggable库 npm install vuedraggable --save在组件中引入并注册 vuedraggable <script>import draggable from "vuedraggable";export default {// 注册组件components: {…

【神行百里】pandas查询加速之行索引篇

最近进行大数据处理的时候&#xff0c;发现我以前常用的pandas查询方法太慢了&#xff0c;太慢了&#xff0c;真是太慢了&#xff0c;查阅资料&#xff0c;遂发现了一种新的加速方法&#xff0c;能助力我飞上天&#xff0c;和太阳肩并肩&#xff0c;所以记录下来。 1. 场景说明…

ThingWorx/Vuforia—工业物联网和AR平台

产品概述 ThingWorx是美国PTC公司旗下的一款物联网和AR平台&#xff0c;它提供了适用于IoT的开发工具和能力&#xff0c;使开发者可以为工业物联网快速构建和部署变革性的智能互联解决方案&#xff0c;使创新者能够快速为当今的智能互联世界提供优异的应用程序、解决方案和用户…

mmyolo的bbox_loss和检测bbox都是空

最近用mmyolo训练自己的数据集的时候发现训练的时候loss_bbox0&#xff0c;测试和eval的时候结果也全是空的&#xff0c;排除了数据集读取的问题&#xff0c;最后发现是config中自定义了自己的类别但是没有传给dataset。。。 简而言之&#xff0c;在自定义了数据集里的metainf…

常见表单元素的使用

目录 **表单是什么**一, from&#x1f367; Action 属性&#x1f367; Method 属性 二,input&#x1f367; 常见的type属性&#x1f367;text属性 三,select,option下拉框&#x1f367;selected属性 四,textarea五, button 表单是什么 HTML 表单用于收集用户的输入信息。 表示文…

2,PyCharm的下载与安装

1&#xff0c;PyCharm的下载 a&#xff1a;打开PyCharm官网&#xff0c;并选择Developer Tools → PyCharm Pycharm官网地址 b&#xff1a;点击Download c&#xff1a;下载完成后&#xff0c;会在下载文件夹中&#xff0c;出现“pycharm-professional-2023.3.exe”文件 2&a…

C++类与对象(一)

目录 一&#xff0c;面向过程和面向对象初步认识 二&#xff0c;类的引入 三&#xff0c;类的定义 四&#xff0c;类的访问限定符及封装 五&#xff0c;类的实例化 六&#xff0c;类对象模型 七&#xff0c;this指针 一&#xff0c;面向过程和面向对象初步认识 c语言是面…

菜鸟学习日记(python)——循环语句

python中的循环语句包括for循环语句和while循环语句&#xff0c;但是python中是没有do...while循环语句的。 while循环语句 while循环语句的一般格式为; while condition:loop body condition是循环判断条件&#xff0c;loop body是循环体。 当循环条件成立时&#xff0c;…

APP广告变现有哪些独特的优势?

作为互联网广告的载体&#xff0c;APP天生就比线下传统广告位更具优势&#xff0c;不受地域限制可以辐射到地球上的每一个角落&#xff0c;可以让广告获得更广的覆盖面。通过丰富的广告形式&#xff0c;精准的目标用户画像&#xff0c;也可以更好地实现品牌广告或效果广告的投放…

day45-46-Vue+ElementUI实现学生管理

VueElementUI实现学生管理 代码&#xff1a; qiushiju/java2313_vue_elementui_crud (gitee.com) 一、思考 考虑需求&#xff08;登录&#xff0c;查询全部&#xff0c;基本增删改查&#xff0c;分页&#xff0c;搜索&#xff0c;批量&#xff09; 设计数据库搭建项目 后端…

数据结构期末考前复习

时间复杂度分析 常数时间复杂度 O(1) 的示例&#xff1a; def print_first_element(arr):print(arr[0])# 无论 arr 的大小如何&#xff0c;执行时间都是恒定的&#xff0c;因此具有常数时间复杂度。线性时间复杂度 O(n) 的示例&#xff1a; def print_all_elements(arr):for …

【并发编程篇】Callable实现多线程计算

文章目录 &#x1f354;简述Callable&#x1f33a;代码测试⭐如果改为了两个线程&#xff0c;效果如何 &#x1f354;简述Callable Callable是Java中一个函数式接口&#xff0c;用于表示可以返回结果并且可能会抛出异常的计算任务。该接口定义了一个call()方法&#xff0c;该方…

Flink Window中典型的增量聚合(ReduceFunction / AggregateFunction)

一、什么是增量聚合函数 在Flink Window中定义了窗口分配器&#xff0c;我们只是知道了数据属于哪个窗口&#xff0c;可以将数据收集起来了&#xff1b;至于收集起来到底要做什么&#xff0c;其实还完全没有头绪&#xff0c;这也就是窗口函数所需要做的事情。所以在窗口分配器…

VR转接线方案/VR Link串流数据线方案/VR眼镜PD快充方案

虚拟现实技术(英文名称&#xff1a;Virtual Reality&#xff0c;缩写为VR)&#xff0c;又称虚拟实境或灵境技术&#xff0c;是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术&#xff0c;其基本实现方式是以计算机技术为主&#xff0c;利用并…

数据库系列之简要对比下GaussDB和OpenGauss数据库

GaussDB作为一款企业级的数据库产品&#xff0c;和开源数据库OpenGauss之间又是什么样的关系&#xff0c;刚开始接触的时候是一头雾水&#xff0c;因此本文简要对比下二者的区别&#xff0c;以加深了解。 1、GaussDB和OpenGauss数据库简要对比 GaussDB是华为基于PostgreSQL数据…

表格中上传文件的表单验证

<template><!-- 新增记录 --><div class"newRecord"><div class"danger-detail"><div class"detail-right"><el-form :model"ruleForm" :rules"rules" ref"ruleForm" label-wid…

数据库系统原理与实践 笔记 #12

文章目录 数据库系统原理与实践 笔记 #12事务管理和并发控制与恢复(续)并发控制SQL-92中的并发级别基于锁的协议基于锁的协议的隐患锁的授予封锁协议两阶段封锁协议多粒度粒度层次的例子意向锁类型相容性矩阵多粒度封锁模式基于时间戳的协议基于时间戳协议的正确性基于有效性检…

解决:TypeError: write() argument must be str, not Tag

解决&#xff1a;TypeError: write() argument must be str, not Tag 文章目录 解决&#xff1a;TypeError: write() argument must be str, not Tag背景报错问题报错翻译报错位置代码报错原因解决方法今天的分享就到此结束了 背景 在使用之前的代码时&#xff0c;报错&#xf…

如何轻松解决企业报修系统问题?有什么比较实用的工单管理系统?

许多企业报修方面的问题就是兼职师傅多&#xff0c;难以管理&#xff0c;导致整个报修流程都比较滞后。关于这个问题&#xff0c;我个人的建议是引入工单管理系统&#xff0c;依靠线上平台进行统一的管理。 引入工单管理系统的好处主要有&#xff1a;   1、沟通报修更加高效 …