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

news2024/9/20 20:44:16
  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 registry

npm 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.coloradmin.cn/o/2135621.html

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

相关文章

C语言算法

大纲 算法复杂度 排序算法 经典算法

如何使用ssm实现物流配送人员车辆调度管理系统的设计与实现+vue

TOC ssm618物流配送人员车辆调度管理系统的设计与实现vue 第1章 绪论 1.1 课题背景 二十一世纪互联网的出现,改变了几千年以来人们的生活,不仅仅是生活物资的丰富,还有精神层次的丰富。在互联网诞生之前,地域位置往往是人们思…

react和vue区别以及为什么会说react适合大型项目

都说react适合做大型项目,但是什么是大型项目呢。 什么是大型项目 这个所谓的大项目应该是指 多部门,多项目协作。而并不是页面量和工作日,对于大公司,协作所带来的成本,效率问题才是问题 为什么会说react要更适合大型…

开源waf牛了个b之长亭雷池

雷池官网: https://waf-ce.chaitin.cn/

IVF 视频文件格式

IVF IVF有两种定义,一种是 Intel创建,用于封装其Indeo编解码器。Indeo是一系列视频编解码器,由英特尔在1990年代开发,主要用于视频游戏和早期的互联网视频流;Indeo编解码器以其高压缩率和良好的视频质量而闻名&#x…

三好夫人 | 茶香月饼甜  浓情赏月圆

在这个金风送爽、丹桂飘香的中秋佳节,家家户户都沉浸在团圆与温馨的氛围之中。月饼,作为中秋的传统美食,承载着无数人对家的思念与美好祝愿。而今,当传统遇见创新,“三好夫人”——一个以男士滋补茶闻名遐迩的品牌&…

AI做梦,探索并还原你的梦

本文由 ChatMoney团队出品 作为一个爱幻想爱做白日梦的 i人,我常常就在想,什么时候能利用Al来帮助我找回一些被遗忘的、或者模糊不清的记忆? 有没有可能进入别人的梦境里瞧一瞧? 为什么世界上还有这么多的冲突和摩擦? 是不是因为人与人之间能够达到的…

OpenCV GUI常用函数详解

在OpenCV的High_level GUI模组中有很多GUI函数,下面介绍几个常用的函数。 图像显示窗口相关函数 生成图像显示窗口函数nameWindow() nameWindow()函数的原型如下: 函数用以创建一个给定名的图像显示窗口(后面简单叫做图像窗口)…

qt使用对数坐标的例子,qchart用QLogValueAxis坐标不出图解决

硬件:ThinkPad T15 系统:win10 专业版 qt版本:Qt 5.14.1 , QtCreator 4.11.1 软件界面放了一个QPushButton,一个QVBoxLayout,如下: 主要代码如下,我添加了两条曲线,…

Spring扩展点系列-SmartInstantiationAwareBeanPostProcessor

文章目录 简介源码分析示例 简介 spring容器中Bean的生命周期内所有可扩展的点的调用顺序 扩展接口 实现接口ApplicationContextlnitializer initialize AbstractApplicationContext refreshe BeanDefinitionRegistryPostProcessor postProcessBeanDefinitionRegistry B…

Python基础学习(1)

目录 一,表达式和变量 1,表达式 2,变量 二,类型 1,前言 2,动态性特征 一个技巧让python变量类型更加明确 3,变量的类型 1,整型 2,float 3,布尔型 4&…

border制作渐变色边框

border也可以做出渐变色效果 .themeConfig {width: 250px;height: 117px;border: 1.5px solid transparent !important;border-radius: 8px !important;background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradi…

linux第一课(操作系统核心)

一.关于linux (1)linux是一款开源的操作系统(是多用户,多任务,多线程)。 (2)一般所说的linux指的是linux核心,即对计算机硬件资源负责调度管理,主要职责是进程管理,内存管理文件系统,设备驱动&#xff0c…

轧钢测径仪对热轧产线实现温度系数自动修正!

钢材在轧制过程中,需要检测外径时,很多都处于高温状态,甚至是1000℃以上,这对轧钢测径仪是个巨大的考验,但测径仪在解决高温、水雾、氧化铁皮、震动等对测量影响的同时,还要考虑钢材热态下的膨胀造成的测量…

揭秘同态加密 (HE):你需要知道什么?

鉴于苹果公司发布了重要的 Swift 同态加密公告,Zama 高级软件工程师 Agns Leroy 详细解释了 HE 是什么、不同的方案及其功能,以及它在未来可能的用途。 7 月底,苹果隐私保护技术团队宣布了一项令人兴奋的新成果:‘swift-homomorp…

什么是WSL?

WSL(Windows Subsystem for Linux)是一个为在 Windows 10 和 Windows 11 上能够原生运行 Linux 二进制可执行文件的兼容层。 主要特点和功能包括: 一、运行 Linux 环境 允许用户在 Windows 系统上直接运行 Linux 命令行工具、脚本和应用程…

springboot系列--自动配置原理

一、容器功能 一、组件添加功能 一、Configuration Configuration有两种模式,Full模式与Lite模式。 1、配置 类组件之间无依赖关系用Lite模式加速容器启动过程,减少判断 2、配置类组件之间有依赖关系,方法会被调用得到之前单实例组件&#…

linux 操作系统下cupsdisable命令介绍和使用案例

linux 操作系统下cupsdisable命令介绍和使用案例 cupsdisable 命令是 Linux 操作系统中用于禁用 CUPS(通用打印服务)打印机的命令。它允许用户将指定的打印机设置为不可用状态,从而阻止任何新的打印作业被发送到该打印机 cupsdisable 命令概…

句子成分——每日一划(七)

目录 一、原句 二、第一部分 三、第二部分 一、原句 Such a state of affairs can only produce antagonism between the laboring class and the owning, i.e., do-nothing, class. The fight breaks out and hatred delivers its blows. 来源:Why I Was a Bur…

C++11第四弹:包装器

🌈个人主页: 南桥几晴秋 🌈C专栏: 南桥谈C 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据…