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.mzph.cn/news/71550.shtml

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

相关文章

Python爬虫数据存哪里|数据存储到文件的几种方式

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 爬虫请求解析后的数据,需要保存下来,才能进行下一步的处理,一般保存数据的方式有如下几种: 文件:txt、csv、excel、json等,保存数据量小。 关系型数据库…

Python小知识 - Python装饰器

Python装饰器 在Python中,装饰器是一个特殊的函数,可以将其他函数包装在装饰器函数中,并且将被包装的函数作为参数传递给装饰器函数。 使用装饰器的好处是可以自动在被包装的函数前后执行一些额外的代码,比如在函数执行前后打印日…

嵌入式开发-11 Linux下GDB调试工具

目录 1 GDB简介 2 GDB基本命令 3 GDB调试程序 1 GDB简介 GDB是GNU开源组织发布的一个强大的Linux下的程序调试工具。 一般来说,GDB主要帮助你完成下面四个方面的功能: 1、启动你的程序,可以按照你的自定义的要求随心所欲的运行程序&#…

PaddleX:一站式、全流程、高效率的飞桨AI套件

随着ChatGPT引领的AI破圈,各行各业掀起了AI落地的潮流,从智能客服、智能写作、智能监控,到智能医疗、智能家居、智能金融、智能农业,谁能快速将AI与传统业务相结合,谁就将成为企业数字化和智能化变革的优胜者。然而&am…

Git 命令行查看仓库信息

目录 查看系统config ​编辑查看当前用户(global)配置 查看当前仓库配置信息 查看系统config git config --system --list 1 查看当前用户(global)配置 git config --global --list 1 查到的是email , name 等ssl签名信息&a…

知识大杂烩(uniapp)

首先声明:不敢保证都管用,这是我自己实践得来的。 box-shadow: 这段 CSS 样式代码用于创建一个阴影效果,它是通过 box-shadow 属性来实现的。让我解释一下这段代码的含义: - box-shadow: 这是 CSS 的属性,用于添加阴影…

算法笔记:平衡二叉树

1 介绍 平衡二叉树(AVL树)是一种特殊的二叉搜索树(BST),它自动确保树保持低高度,以便实现各种基本操作(如添加、删除和查找)的高效性能。 ——>时间都维持在了O(logN)它是一棵空…

百度百科词条怎么更新?怎么能顺利更新百科词条?

企业和个人百度百科词条的更新对于他们来说都具有重要的意义,具体如下: 对企业来说: 塑造品牌形象:百度百科是一个常被用户信任并参考的知识平台,通过更新企业词条可以提供准确、全面的企业信息,帮助企业塑…

算法专题:前缀和

文章目录 Acwing:前缀和示例2845.统计趣味子数组的数目思路容易理解的写法:前缀和两层循环存在问题:超时 优化写法:两数之和思路,转换为哈希表 前缀和,就是求数组中某一段的所有元素的和。 求子数组中某一…

Unity3D 连接 SQLite 作为数据库基础功能【详细图文教程】

一、简单介绍一下SQLite的优势(来自ChatGPT) 轻量级: SQLite是一个嵌入式数据库引擎,它的库文件非常小巧,没有独立的服务器进程,适用于嵌入到其他应用程序中,对于轻量级的项目或移动应用程序非常适用。零配…

Golang RabbitMQ实现的延时队列

文章目录 前言一、延时队列与应用场景二、RabbitMQ如何实现延时队列实现延时队列的基本要素整体的实现原理如下 三、Go语言实战生产者消费者 前言 之前做秒杀商城项目的时候使用到了延时队列来解决订单超时问题,本博客就总结一下Golang是如何利用RabbitMQ实现的延时…

结构体对齐原理及在STM32中的设计原则和实现

在嵌入式系统开发中,结构体作为一种常见的数据组织方式,在内存中的布局方式对于程序性能和内存占用具有重要影响。本文将深入探讨单片机C语言中的结构体对齐原理、重要性以及不同的对齐方式,并通过示例演示结构体对齐如何影响内存占用、访问性…

【代码随想录】Day 50 动态规划11 (买卖股票Ⅲ、Ⅳ)

买卖股票Ⅲ https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/ 无语了。。。 写的很好就是怎么都过不了。。。 还是就用代码随想录的写法吧。。。 class Solution { public:int maxProfit(vector<int>& prices) {int n prices.size();vector&…

权限提升-Windows本地提权-AT+SC+PS命令-进程迁移-令牌窃取-getsystem+UAC

权限提升基础信息 1、具体有哪些权限需要我们了解掌握的&#xff1f; 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 2、以上常见权限获取方法简要归类说明&#xff1f; 后台权限&#xff1a;SQL注入,数…

DCMM数据能力成熟度评估模型--学习笔记(1)

DCMM数据能力成熟度评估模型--学习笔记 1、DCMM简介、结构组成和成熟度评估等级划分1.1 DCMM简介1.2 DCMM结构组成1.3 DCMM关键过程域1.3.1、数据战略&#xff08;指导方针&#xff09;1.3.2、数据治理 &#xff08;机制保障&#xff09;1.3.3、数据架构 (施工图纸)1.3.4、数据…

【Java】线程都有哪几种状态

文章目录 前言传统线程模型&#xff08;操作系统&#xff09;中线程状态Java线程中的状态线程的运行流程 前言 首先我们要知道&#xff0c;在传统&#xff08;操作系统&#xff09;的线程模型中线程被分为五种状态&#xff0c;在java线程中&#xff0c;线程被分为六种状态。 …

iOS 16.4更新指南:问题解答与新功能一览

我应该更新到iOS 16.4吗&#xff1f;这是许多iPhone用户在新更新可用时问自己的一个常见问题。最新的iOS版本提供了各种功能和改进&#xff0c;因此更新的诱惑力很大。 但是&#xff0c;在更新之前&#xff0c;你应该考虑几个因素&#xff0c;以确保安装过程顺利成功。这些因素…

云计算中的负载均衡技术,确保资源的平衡分配

文章目录 1. 硬件负载均衡器2. 软件负载均衡器3. DNS负载均衡4. 内容分发网络&#xff08;CDN&#xff09; &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;云计算 ✨文章内…

Android studio 实现生成二维码和扫描二维码

效果图 build.gradle(:app)添加依赖 dependencies {implementation com.google.zxing:core:3.3.3implementation com.journeyapps:zxing-android-embedded:3.6.0implementation com.google.zxing:javase:3.0.0 }Manifests.xml <uses-permission android:name"android…

线程中的join()、wait() 和 notify()详解及练习题

一、join() Thread 类提供了 join() 方法&#xff0c;用于等待当前线程所调用的其他线程执行完毕。 1、当一个线程调用另一个线程的 join() 方法时&#xff0c;它会被阻塞&#xff0c;直到被调用的线程执行完毕或达到指定的超时时间。 比如&#xff1a;当主线程main中调用了…