Vue安装及环境配置【图解版】

  1. 欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。

Facts speak louder than words!


目录

一.node.js的安装和配置

1. 下载安装node.js

2. 配置默认安装目录和缓存日志目录

3.node.js环境配置

4. 配置淘宝镜像源

二.安装vue以及脚手架

1.安装vue.js

2.安装webpack模板

3.安装脚手架vue-cli 2.x

4.vue-cli2创建vue项目

三、安装vue-cli 3.x

1、卸载旧版本

2、安装新版本

3、新建项目


一.node.js的安装和配置

1. 下载安装node.js


官网下载最新版本:https://nodejs.org/en/download/
安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html
或者下载zip文件找个目录保存,解压下载的文件,然后配置环境变量,将解压文件所在的路径配置到环境变量中。

2. 配置默认安装目录和缓存日志目录

1、创建默认安装目录和缓存日志目录

2、执行命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录:

npm config set prefix "E:\node.js\node_global"
npm config set cache "E:\node.js\node_cache"
npm config get prefix 查看npm全局安装包保存路径
npm config get cache 查看npm装包缓存路径
npm list -global  查看全局安装目录:

npm config list 查看所有npm 配置

3.node.js环境配置

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框

1、【系统变量】下新建【NODE_PATH】,此处设置第三方依赖包安装目录如果跟着第2步修改了全局安装目录,则输入【D:\nodejs\node_global 】

2、【系统变量】下的【Path】添加上node的路径【D:\nodejs\】

3、如果设置了全局安装目录,【用户变量】下的【Path】将默认的 C 盘APPData/Roaming\npm 修改为【D:\nodejs\node_global】,【D:\nodejs\node_cache】,这是nodejs默认的模块调用路径

4. 配置淘宝镜像源

npm config get registry  查看npm下载源

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源,原来的 https://registry.npm.taobao.org 已替https://registry.npmmirror.com 使用淘宝镜像源的两种配置选择,一是直接修改npm命令的仓库地址为淘宝镜像源,另一种是安装cnpm命令。

第一种:直接修改npm的默认配置

npm config set registry https://registry.npmmirror.com

验证:配置后可以根据

npm config get registrynpm config list 

这两个命令查看npm下载源是否配置成功,如图所示配置前为"https://registry.npmjs.org/"

第二种:安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

验证方式变成了

cnpm config get registry 

 cnpm config list


二.安装vue以及脚手架

1.安装vue.js

npm install vue -g

或者

cnpm install vue -g

根据自己的淘宝镜像源设置选择命令,其中-g是全局安装,指安装到global全局目录去

查看安装的vue信息:

npm info vue 

或者

cnpm info vue

查看安装的vue版本

npm list vue

2.安装webpack模板


在命令行中运行命令

npm install webpack -g

然后等待安装完成。

webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,所以还需要安装webpack-cli:

npm install --global webpack-cli

安装成功后可使用webpack -v查看版本号。

3.安装脚手架vue-cli 2.x

npm install vue-cli -g

用这个命令来检查其版本是否正确:

vue --version

vue -V

安装上vue-router

npm install -g vue-router

4.vue-cli2创建vue项目

1、创建项目(最好在cd到D盘的某个位置,即项目的路径,否则项目会新建在C:\Users\Administrator\,也可以直接在想要的项目路径下输入cmd)

 vue init webpack 项目名

项目名不要取中文和大写字母。

最后结果如下,项目初始化成功,按提示代码进入到项目目录下并运行

npm run dev

按提示打开地址http://localhost:8080

结束项目运行:ctrl+c,选择Y即可停止项目的运行。


三、安装vue-cli 3.x


1、卸载旧版本


卸载2.x版本

npm uninstall vue-cli -g


卸载3.x版本 n

npm uninstall @vue/cli -g

2、安装新版本

npm install @vue/cli –g


指定版本号 npm install -g @vue/cli@3.12.1 不指定版本号会默认安装最新的版本

3、新建项目

vue create 项目名

配置成功,cd 到我们的项目目录, 然后使用npm run serve可以运行我们的项目
http://localhost:8080/ 打开就可以看到我们的运行的结果了


这里面通常涉及到权限问题!!!所以要确定你们相关文件夹有权限,要不然拉不到VSCode上。

觉得有用的话点个赞 👍🏻 呗。
❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍

🔥🔥🔥The road is long and the line is coming,让我们一起加油吧!🌙🌙🌙

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

平替WordPress/Zendesk,3分钟零代码用HelpLook建立一个企业网站

您是否正寻找一个能同时接入网站、小程序、App的内容管理系统?是否希望无需后端技能也能轻松接入,且无需搭建服务器?尤其是有出海需求的企业,希望搭建一个国内外访问速度都快而稳定的在线帮助中心? 企业对于在线内容管…

YOLOv9改进策略【卷积层】| HWD,引入`Haar小波变换`到下采样模块中,减少信息丢失

一、本文介绍 本文记录的是利用Haar小波下采样对YOLOv9网络进行改进的方法研究。传统的卷积神经网络中常用的最大池化、平均池化和步长为2的卷积等操作进行下采样可能会导致信息丢失,为了解决信息丢失问题,HWD作者受无损信息变换方法的启发,…

算法知识点———并查集

并查集是一种用于管理元素所属集合的数据结构,实现为一个森林,其中每棵树表示一个集合,树中的节点表示对应集合中的元素。并查集支持两种操作: 合并(Union):合并两个元素所属集合(合…

nonlocal本质讲解(前篇)——从滤波到Nonlocal均值滤波

线性滤波 → \rightarrow →高斯滤波 → \rightarrow →高斯滤波 → \rightarrow →双边滤波 → \rightarrow →Nonlocal均值滤波 平均 高斯 双边 Nonlocal 目录 线性滤波高斯滤波双边滤波Nonlocal均值滤波 滤波最初是频域的概念,由于频域乘积对应空域卷积&am…

PDF里怎么直接编辑文字?简单操作指南

PDF作为一种广泛使用的文档格式,因其稳定性和跨平台兼容性而受到欢迎。然而,PDF原生的编辑功能相对有限,尤其是直接编辑其中的文字。但幸运的是,随着技术的发展,我们现在有几种方法可以在PDF中直接编辑文字。在本文中&…

二百六十四、Java——Java采集Kafka主题A的JSON数据,解析成一条条数据,然后写入Kafka主题B中

一、目的 由于Hive是单机环境&#xff0c;因此庞大的原始JSON数据在Hive中解析的话就太慢了&#xff0c;必须放在Hive之前解析成一个个字段、一条条CSV数据 二、IDEA创建SpringBoot项目 三、项目中各个文件 3.1 pom.xml <?xml version"1.0" encoding"UTF…

Java设计模式—面向对象设计原则(三) -----> 依赖倒转原则DIP(完整详解,附有代码+案例)

文章目录 3.3 依赖倒转原则(DIP)3.3.1概述3.3.2 案例 3.3 依赖倒转原则(DIP) 依赖倒转原则&#xff1a;Dependency Inversion Principle&#xff0c;DIP 3.3.1概述 高层模块不应该依赖低层模块&#xff0c;两者都应该依赖其抽象&#xff1b;抽象不应该依赖细节&#xff0c;细…

PXE服务

一.PXE服务的功能介绍 1.无盘启动&#xff1a;PXE允许计算机在没有本地存储设备的情况下启动操作系统。这对于构建无盘工作站非常有用&#xff0c;因为计算机可以直接从网络加载操作系统和其他应用程序1。 2.远程安装操作系统&#xff1a;PXE技术可以用于远程安装操作系统&…

HTML讲解(二)head部分

目录 1. 2.的使用 2.1 charset 2.2 name 2.2.1 describe关键字 2.2.2 keywords关键字 2.2.3 author关键字 2.2.4 http-equiv 小心&#xff01;VS2022不可直接接触&#xff0c;否则&#xff01;没这个必要&#xff0c;方源面色淡然一把抓住&#xff01;顷刻炼化&#x…

VSCode C++(Code Runner)+ OpenSSL开发环境搭建

本章教程,主要介绍在VSCode中配置OpenSSL环境。 操作系统:wsl+ubuntu22.04 一、安装必备组件 1、安装g++ sudo apt install g++ 2、安装 OpenSSL sudo apt-get install libssl-dev 3、安装Code Runner插件 这个在vscode的插件市场可以找到,极力推荐使用,安装插件,可以…

nodejs 007:错误npm error Error: EPERM: operation not permitted, symlink

完整错误信息 npm error Error: EPERM: operation not permitted, symlink npm warn cleanup Failed to remove some directories [ npm warn cleanup [ npm warn cleanup C:\\Users\\kingchuxing\\Documents\\IPFS\\orbit-db-set-master\\node_modules\\ipfs-cli, npm…

如何在 Ubuntu 系统上部署 Laravel 项目 ?

到目前为止&#xff0c;Laravel 是 PHP 开发人员构建 api 和 web 应用程序的首选。如果你是新手的话&#xff0c;将 Laravel 应用程序部署到线上服务器上可能有点棘手。 在本指南中&#xff0c;我们将向您展示在 Ubuntu 系统中部署 Laravel 应用程序的全过程。 Step 1: Updat…

c++中的二叉搜索树

目录 ​编辑 一概念&#xff1a; 二性能分析&#xff1a; 三实现步骤&#xff1a; 31插入&#xff1a; 32删除&#xff1a; 33查找&#xff1a; 四应用&#xff08;key与key_value): 41key模型&#xff1a; 42key_value模型&#xff1a; 一概念&#xff1a; 静图展示…

Linux(6)--CentOS目录

文章目录 1. 根目录2. cd目录切换命令3. CentOS目录介绍4. pwd命令介绍5. ls命令介绍5.1 ls5.2 ls -a5.3 ls -l 1. 根目录 Windows电脑的根目录是计算机(我的电脑)&#xff0c;然后C盘、D盘。 Linux系统的根目录是/&#xff0c;我们可以使用cd /进入根目录&#xff0c;然后使…

20240919 - 【PYTHON】辞职信

import tkinter as tk # 导入 tkinter 模块&#xff0c;并简写为 tk from tkinter import messagebox # 从 tkinter 导入 messagebox 子模块&#xff0c;用于显示消息框 from random import random # 从 random 模块导入 random 函数&#xff0c;用于生成随机数# 创建窗口对…

一本还没发布的书,能在Github上拿25.6k⭐️,熬夜也要读完的书

重磅&#xff01;从零构建大语言模型教程开源&#xff01; 自从ChatGPT发布以来&#xff0c;大型语言模型&#xff08;LLM&#xff09;大放异彩。 如今市面上关于大模型的书籍和教程可谓琳琅满目&#xff0c;但基本上都只是从原理和参数调优上讲解的&#xff0c;没有一本系统性…

借老系统重构我准备写个OpenAPI3.1版的API管理工具(附录屏演示)

前段时间一直在忙公司老系统重构的方案设计&#xff0c;其中最大的重构点就是前后端分离。为了加快前后端协同开发和对接的工作效率&#xff0c;我决定写一个公司内部使用的OpenAPI3.1版的API管理工具。 文章目录 有现成的工具为啥不用现有成熟方案初步成果展示录屏演示下一步计…

手语识别系统源码分享

手语识别检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

计算机专业的就业方向

计算机专业的就业方向 亲爱的新生们&#xff0c;欢迎你们踏上计算机科学的旅程&#xff01;作为一名计算机专业的学生&#xff0c;你们即将进入一个充满无限可能的领域。今天&#xff0c;我将为大家介绍计算机专业的一些主要就业方向&#xff0c;帮助你们了解未来的职业选择。…

Java面试篇基础部分-Java内部类介绍

首先需要了解什么是内部类,内部类就是定义在类的内部的类称为内部类,内部类可以根据不同的定义方式分为静态内部类、成员内部类、局部内部类和匿名内部类。 静态内部类 定义在类体内部的通过static关键字修饰的类,被称为静态内部类。静态内部类可以访问外部类的静态变量和…