windows搭建vue开发环境

news2024/12/25 9:44:37

参考博客:最详细的vue安装教程_一只野生程序媛的博客-CSDN博客

Vue安装环境最全教程,傻瓜式安装_浪漫主义码农的博客-CSDN博客

1、安装nodejs,从下面官网下载版本,对应安装就行了:

Node.js 中文网

2、安装好后,配置环境变量

看看安装是否成功(这里是否需要配置node环境变量):

node -v

npm -v

把全局模块所在路径及缓存路径切换,在nodejs主路径下,新建node_global和node_cache文件夹:

然后 

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

执行完之后,再输入npm list -global

npm config list  显示所有配置信息

3、安装淘宝镜像(cnpm)  npm install cnpm -g --registry=https://registry.npm.taobao.org 

然后配置环境变量
配置NODE_PATH

 配置CNPM_PATH

 然后在Path里面增加,%CNPM_PATH%  和 %NODE_PATH% :

 4、为什么要配置环境变量?参考你的项目需要运行java一样,配置JAVA_HOME这些;

5、NPM安装vue.js

输入npm install vue -g

这里的-g是指安装到global全局目录去

6、安装 vue脚手架

命令:cnpm install @vue/cli -g(最新版本)

//cnpm install vue-cli -g(不是最新版本)

 7、查看安装情况

 8、输入 vue ui进入界面(vue3以上版本才有 vue ui命令):

然后创建项目(或者使用类似vue create my-project命令创建项目,

或者使用第三方开发工具 vscode或者idea这种,也可以创建):

 

9、使用 vue init 项目时候,报错:

vue init webpack hellovue

Command vue init requires a global addon to be installed. Please run npm i -g @vue/cli-init and try again

原因是因为 命令vue init需要安装一个全局加载项,

直接输入命令:npm install -g @vue/cli-init

10、dir查看项目创建:

 11、npm run dev

进入有 package.json的路径,

然后打开,http://localhost:8080/#/

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

合宙Air724UG Cat.1模块硬件设计指南--天线接口

天线接口 简介 天线是发射和接收电磁波的一个重要的无线电设备,没有天线也就没有无线电通信。天线品种繁多,以供不同频率、不同用途、不同场合、不同要求等不同情况下使用。 特性 LTE天线接口。50 欧姆特性阻抗,不推荐使用PCB板载天线&#…

脚本模式的特点和用法

一、什么是脚本? 脚本(script)是使用一种特定的描述性语言,依据一定的格式编写的可执行文件,又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。 简单解释:脚本类似于演戏时用到的剧本,脚本其实就是一系列指令——演员看了指令就…

算法--itemCF

概述: 电子商务网站是个性化 推荐系统重要地应用的领域之一。亚马逊就是个性化推荐系统的积极应用者和推广者,亚马逊的推荐系统深入到网站的各类商品,为亚马逊带来了至少30%的销售额。 不光是电商类,推荐系统无处不在。 QQ&…

【差旅-游记】记一次海南出差

哈喽,大家好!我是雷工! 这篇不是技术分享,是篇差旅记录。 最近出差去了一次海南,应该算得上我目前出差去过最远的地方了,也是我第一次去海南,还是蛮有新鲜感的,因此记录下此次差旅。…

【软件设计师暴击考点】数据库系统高频考点暴击系列

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:软件…

tensorflow2 模型建立与训练

模型的构建: tf.keras.Model 和 tf.keras.layers 模型的损失函数: tf.keras.losses 模型的优化器: tf.keras.optimizer 模型的评估: tf.keras.metrics 模型(Model)与层(Layer) …

Mysql 索引基础介绍

索引基础介绍 索引是什么 MySQL官方:索引(INDEX)是帮助MySQL高效获取数据的数据结构。 面试官问,回:索引是排好序的快速查找数据结构 索引的目的在于提高查询效率,可以类比字典的目录。如果要查mysql这个这…

13. python从入门到精通——Python操作数据库

数据库编程接口:python database API python database API概述 python database API 规范对于关系数据库的访问,Python社区已经制定出一个标准,称为Python Database API,通过这个接口使python跨不同数据库的操作代码可以更加具有…

动态内存管理(malloc,calloc,realloc)

文章目录 1.为什么存在动态内存分配 2.动态内存函数的介绍 3.常见的动态内存错误 4.几个经典的笔试题 5. C/C程序的内存开辟 文章内容 1.为什么存在动态内存分配 我们已经掌握的内存开辟方式有: int val 20;//在栈空间上开辟四个字节 char arr[10] {0};/…

【javascript】闭包

通过定时器从第一个元素开始往后&#xff0c;每隔一秒输出arr数组中的一个元素。 <script>var arr [one, two, three];for(var i 0; i < arr.length; i) {setTimeout(function () {console.log(arr[i]);}, i * 1000);} </script> 但是运行过后&#xff0c;我…

使用生成 AI 实现准确的新闻摘要

shadow 这篇文章介绍了作者 Alessandro Alviani 的实践经验&#xff0c;非常有参考价值。 指令冗余&#xff0c;多步引导&#xff0c;是目前提高LLM输出质量的方法之一。 Towards Accurate Quote-Aware Summarization of News using Generative AI Alessandro Alviani generati…

电容式电动汽车路径规划问题的双级蚁群优化算法

摘要&#xff1a; 电动汽车&#xff08;EV&#xff09;技术的发展导致了一个新的车辆路由问题&#xff08;VRP&#xff09;&#xff0c;称为有容量的电动汽车路由问题&#xff08;CEVRP&#xff09;。由于充电站的数量有限&#xff0c;电动汽车的巡航范围有限&#xff0c;不仅要…

【从零开始学习JAVA | 第十九篇】初识内部类

前言&#xff1a; 内部类是类的五大成员。一个类的其他的成员分别是属性&#xff0c;方法&#xff0c;构造方法&#xff0c;代码块。本文将详细介绍什么是内部类&#xff0c;以及内部类的意义。 内部类&#xff1a; 内部类&#xff08;Inner Class&#xff09;是 Java 中的一个…

MedViT:一种用于广义医学图像分类的鲁棒Vision Transformer

文章目录 MedViT: A Robust Vision Transformer for Generalized Medical Image Classification摘要本文方法Locally Feed-Forward Network 实验实验结果 MedViT: A Robust Vision Transformer for Generalized Medical Image Classification 摘要 卷积神经网络(cnn)在现有医…

实现一个 AI 驱动的马里奥(使用双重深度 Q 网络),它可以自己玩游戏

训练玩马里奥的 RL 智能体 本教程将向您介绍深度强化学习的基础知识。 最后&#xff0c;您将实现一个 AI 驱动的马里奥&#xff08;使用双重深度 Q 网络&#xff09;&#xff0c;它可以自己玩游戏。 # !pip install gym-super-mario-bros7.3.0import torch from torch import …

STM32实现延时

在STM32单片机中&#xff0c;实现延时一般都是使用定时器&#xff0c;既可以使用Systick定时器&#xff0c;也可以使用常规的定时器。 定时器在设置了定时并开启之后&#xff0c;就会进入自主运行模式&#xff0c;其中&#xff0c;初始化设置这一阶段是由CPU执行相应指令完成的…

Spring Cloud_Spring Cloud Alibaba_00000

contents 微服务介绍版本选择创建项目创建Maven工程 说明 微服务介绍 微服务架构是一种架构模式。它提倡将单一应用程序划分成一组小的服务。服务之间相互协调、相互配合&#xff0c;为用户提供最终价值。每个服务运行在其独立的进程中&#xff0c;服务与服务间采用轻量级的通…

html通过web3JS 获取当前连接的区块链信息和账号信息

前面 我们讲了 MetaMask和ganache的配置安装 并用 MetaMask管理ganache的启动的虚拟区块链 那么 我们现在也完全可以写一个网页来做这个东西的管理 您可以先查看文章web3.js获取导入做一个导入了 web3的html文件 首先我们可以来试着 获取 自己当前是在哪个区块的 getBlockNum…

【深度学习】【分布式训练】DeepSpeed:AllReduce与ZeRO-DP

AllReduce与ZeRO-DP ​ ZeRO-DP是分布式训练工具DeepSpeed的核心功能之一&#xff0c;许多其他的分布式训练工具也会集成该方法。本文从AllReduce开始&#xff0c;随后介绍大模型训练时的主要瓶颈----显存的占用情况。在介绍完成标准数据并行(DP)后&#xff0c;结合前三部分的内…

玩游戏提示d3dx9丢失-找不到d3dx9怎么修复

相信有些朋友遇到了d3dx9丢失的情况不知道怎么解决&#xff0c;而今日小编带来的这篇文章就是讲解关于d3dx9丢失进行修复的操作内容&#xff0c;d3dx9丢失怎么解决&#xff1f;&#xff08;修复方法&#xff09;d3dx9文件是DirectX中必备文件,许多游戏需要此文件运行。 d3dx9丢…