Vue框架学习记录之环境安装与第一个Vue项目

Node.js的安装与配置

首先是Node.js的安装,安装十分简单,只需要去官网下载安装包后,一路next即可。

Node.js是一个开源的、跨平台的 JavaScript 运行时环境

下载地址,有两个版本,一个是推荐的,一个是最新的,现在博主学习的话就直接安装最新的即可。

https://nodejs.org/en

在这里插入图片描述

验证是否安装成功,只需要在cmd窗口中输入node-vnpm-v即可,node默认是帮我们安装npm的。可以类别于python中的pip

npm,全名 node package manger。
npm 是Node的开放式模块登记和管理系统,是Node.js包的标准发布平台,用于Node.js包的发布、传播、依赖控制,网址:https://www.npmjs.com/
npm 提供了命令行工具,可以方便地下载、安装、升级、删除包,也可以让你作为开发者发布并维护包

在这里插入图片描述

查看npm下载源 npm config get registry

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org)

直接修改npm的默认配置

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

配置后可以根据 npm config get registrynpm config list 命令查看npm下载源是否配置成功,如图所示配置前为"https://registry.npmjs.org/"

在这里插入图片描述

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

注意:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

比如,我希望将全模块所在路径和缓存路径,放在我node.js安装的文件夹中,则在我安装的文件夹"D:\Program Files \nodejs下创建两个文件夹node_globalnode_cache分别作为默认安装目录和缓存日志目录。

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

npm config set prefix "D:\software\nodejs\node_global"
npm config set cache "D:\software\nodejs\node_cache"

在这里插入图片描述

npm config get prefix查看npm全局安装包保存路径
npm config get cache查看npm装包缓存路径

还可以输入npm list -global命令来查看全局安装目录:

在这里插入图片描述

安装vue.js

全局安装vue

npm install -g @vue/cli

在这里插入图片描述

输入vue -V看看是否安装成功,但提示vue不是内部命令,这个问题困扰了博主挺长时间,因为这个问题按照博主经验是由于环境变量设置出错,但改了多次依然不行,后来发现改错了地方:

在这里插入图片描述

改完之后再次安装vue,OK了

在这里插入图片描述

创建Vue项目

选择一个我们要创建vue项目的目录,博主选择的是E:/learn,随后执行创建vue项目命令:

vue create hello-world

需要做一些配置,按方向键选中该项,然后按回车键:

代表手动选择进行一些设置,否则可以直接选择Default Vue3

在这里插入图片描述

随后按方向键移动,按空格键选择或取消选择,依次分别是:
Babel 编译,Router 路由,Vuex 状态管理,Linter 如果是想要代码格式这个不要选择,Unit Test单元测试,E2E Test 端对端测试。

在这里插入图片描述

选择vue版本,默认选择3.x即可

在这里插入图片描述

输入Y

在这里插入图片描述

问你需要不要单独文件,还是说全部都放在package.json中,这里我们选择单独文件存放。

在这里插入图片描述

是否要保存为这个项目作为一个模板保存?博主选择N,根据大家需要。然后回车

在这里插入图片描述

出现这个就代表成功了

在这里插入图片描述

命令行启动Vue项目

运行上面的命令:

cd hello-world
nmp run serve

启动成功

在这里插入图片描述

返回命令行界面输入Ctrl+c,项目关闭。

在这里插入图片描述

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

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

相关文章

SpringMVC常用注解、参数传递、返回值

目录 前言 一、常用注解 二、参数传递 ​编辑 1. 基础类型String类型 2. 复杂类型 3. RequestParam 4. PathVariable 5.RequestBody 6. RequestHeader 三、方法返回值 一:void 二:String 三:Stringmodel 四:ModelAndVi…

软路由的负载均衡设置:优化网络性能和带宽利用率

在现代网络环境中,提升网络性能和最大化带宽利用率至关重要。通过合理配置软路由IP的负载均衡设置,可以有效地实现这一目标,并提高整体稳定性与效果。本文将详细介绍如何进行软路由IP的负载均衡设置,从而优化网络表现、增加带宽利…

免安装绿色版chrome制作教程

免安装绿色版Chrome制作教程 1.总体流程 绿色版chrome制作大致流程分为 下载chrome离线安装包 下载GoogleChromePortable.exe文件 解压chrome安装包 解压chrome.7z压缩包 提取Chrome-bin 复制GoogleChromePortable.exe文件 2.详细流程 2.1下载chrome离线安装包 下载链…

什么是回调函数?写出一个示例?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 回调函数⭐ 示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前…

分布式实时仿真系统-反射内存的应用

为了使分布式实时仿真系统(一个典型代表就行飞行模拟器)达到逼真的仿真效果,在系统内部,往往不仅需要对各种数据模型进行实时解算,而且需要一个延迟时间极低的确定性网络在系统之间传递数据,这样才能让各个子系统之间协调一致地工…

goLang笔记+beego框架

goLang笔记+ 初始安装之后 GOPATH: Go开发相关的环境变量如下: GOROOT:GOROOT就是Go的安装目录,(类似于java的JDK) GOPATH:GOPATH是我们的工作空间,保存go项目代码和第三方依赖包 GOPATH可以设置多个,其中,第一个将会是默认的包目录,使用 go get 下载的包都会在第一…

切分支解决切不走因为未合并的路径如何解决

改代码的时候改做分支了,本来是在另一个分支上面改代码,结果改到另一个放置上面,然后想着使用git stash进行保存,然后切到另外一个分支再pop,结果不行。 报这个错误,导致切不过去,因为我这边pop…

记录使用layui弹窗实现签名、签字

一、前言 本来项目使用的是OCX方式做签字的,因为项目需要转到国产化,不在支持OCX方式,需要使用前端进行签字操作 注:有啥问题看看文档,或者换着思路来,本文仅供参考! 二、使用组件 获取jSign…

【Arduino25】液晶模拟值实验

硬件准备 LCD1602显示屏&#xff1a;1 个 220欧的电阻&#xff1a;1 个 旋钮电位器&#xff1a;1 个 面包板&#xff1a;1个 杜邦线&#xff1a;若干 硬件连线 软件程序 #include <LiquidCrystal.h>LiquidCrystal lcd(12,11,5,4,3,2);void setup(){lcd.begin(16,2);…

【算法】快速排序 详解

快速排序 详解 快速排序1. 挖坑法2. 左右指针法 &#xff08;Hoare 法&#xff09;3. 前后指针法4. 快排非递归 代码优化 排序&#xff1a; 排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&…

【PHP代码审计】反序列化漏洞实战

文章目录 概述资源下载地址Typecho代码审计-漏洞原理call_user_func()_applyFilter()、get()与__get__toString()__construct()install.php POC利用漏洞利用复现利用链执行phpinfo()GET利用POST利用 getshell生成payload漏洞利用蚁剑连接 总结 概述 序列化&#xff0c;“将对象…

一文讲透【静态脱敏实操】

1&#xff1a;直接上工具类 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version> </dependency>2:Hutool 支持的脱敏数据类型 现阶段最新版本的 Hutool 支持的脱敏数据类…