创建vue项目：node.js下载安装、配置环境变量，下载安装cnpm，配置npm的目录、镜像，安装vue、搭建vue项目开发环境（保姆级教程一）

今天讲解 Windows 如何创建 vue 项目，搭建 vue 开发环境，这是这个系列的第一章，有什么问题请留言，请点赞收藏！！！

文章目录

    • 一、Vue简单介绍
    • 二、开始搭建
      • 1、安装node.js环境
      • 2、配置npm下载时的默认安装目录和缓存日志目录
      • 3、配置npm镜像
      • 4、npm常用命令
      • 5、安装webpack打包模块

一、Vue简单介绍

搭建 node 环境，最重要的作用就是为创建 vue 项目作准备的，所以这里先简单介绍下 vue，以及 vue 的创建安装方式：

1、vue 简单介绍：

  • Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
  • Vue.js是一个MVVM(Model - View - ViewModel)的SPA框架。
    • Model：数据
    • View：视图
    • ViewModel：连接View与Model的纽带

2、Vue.js的安装使用方式有几种，简单的只需要引入一个第三方的JS包即可。在 <head> 中引入Vue.js包。

<script src="https://cdn.jsdelivr.net/npm/vue@4.5.12"></script>

重点： 这里只重点关注 npm 方式安装 vue ，即本系列主要内容。

二、开始搭建

在用 Vue.js 构建大型应用的时候推荐使用 npm 安装方法，npm 能很好的和 Webpack 或者 Browserify 模块打包器配合使用。

npm 方式安装 vue 需要的工具：

  • node 环境（也就是 npm 包管理器）
  • vue-cli 脚手架构建工具

1、安装node.js环境

1、官网下载：下载地址 。下载稳定版本 v20.10.0。注意：偶数是稳定版本 奇数是不稳定版本。
在这里插入图片描述

在这里插入图片描述
然后直接安装（记得选择 Add To Path），其余保持默认即可。

2、测试是否成功：按下cmd+R，输入cmd，打开终端，在命令行输入 node -v，显示 v20.10.0，表示成功。顺带输入 npm -v，显示10.2.3，这个表示查看 npm 版本。

NPM（Node Package Manager）：Node JS 包管理工具。注意：Node安装成功，默认就安装了 npm

2、配置npm下载时的默认安装目录和缓存日志目录

这里的环境配置，主要配置的是：npm安装的全局模块所在的路径，以及缓存 cache 的路径。之所以要配置，是因为 npm install express -g 执行全局安装语句时，会将安装的模块安装到：C:\Users\用户名\AppData\Roaming\npm 路径目录下，久而久之 C 盘很容易被占满（C 盘足够大可以无视此步骤，最好更改目录）。

通过设置，将 默认安装目录 和 缓存日志目录 重新配置到其他盘符。

1、输入命令：

npm config set prefix "D:\nodeJs\node_global"
npm config set cache "D:\nodeJs\node_cache"

① 操作完成会在你所选择的路径建立 node_global 和 node_cache 两个文件夹（没有自动生成就手动创建）。

② 如果你想要修改设置的 node_global 和node_cache 的名称，可以通过重新输入设置命令的方式修改，或者进入 C:\Users\用户名 目录，修改 .npmrc 文件里面的内容即可。

2、配置好后，可以查看：

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

3、配置npm镜像

1、安装时指定安装源（可选择）
npm install 安装的东西（比如：jquery） --registry=https://registry.npm.taobao.org2、永久指定镜像源：
npm config set registry https://registry.npm.taobao.org换回默认全局镜像
npm config set registry https://registry.npmjs.org3、安装cnpm：由于需要加速从而选择安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org==============================
查看镜像
npm config get registry

报错1：cmd 输入 安装cnpm 的命令后，报错 Error: EPERM: operation not permitted, mkdir....：
在这里插入图片描述
解决1：没有权限的原因，cmd 窗口需要以管理员的身份打开，然后再次输入即可。

报错2：安装完 cnpm 后，输入：cnpm -v 报错：‘cnpm’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

解决2：由于之前设置了全局安装的目录，所以这里会找不到位置（假如不修改目录，可能不报错，假如也报错，也配置下）：


注意：如果没有修改全局目录也报错的话，也需要：找到全局安装的位置，然后同样配置即可。所以 cnpm 也安装完毕。

4、npm常用命令

npm list     查看已经安装的模块
npm install jquery		        默认下载最新的版jquery
npm install jquery@1.12.4	    下载指定版本jquery，后面会将前面的文件覆盖（覆盖式安装）
npm uninstall jquery          	卸载模块，但不卸载模块留在package.json中的对应信息
npm uninstall express --save  	卸载模块，同时卸载留在package.json中dependencies下的信息
npm uninstall express -g      	卸载全局模块
npm update 模块名  			  更新最新版本的模块
npm update 模块名@指定版本        更新到指定版本号的模块
npm search jquery			    搜索包
npm view 模块名 version   		  查看模块最新的版本号

5、安装webpack打包模块

这个模块可以根据需要来安装。Webpack 是一个模块打包器（bundler）

1、安装（cmd为以管理员身份打开）：npm install webpack -g

2、查看 webpage 的版本：npm webpack -v。webpack4 以上的版本，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装 webpack-cli：npm install webpack-cli -g

至此，本教程结束，后续内容给点击专栏查看！！！

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

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

相关文章

1、Redis变慢原因排查(上)

1、Redis变慢原因排查(上)

感觉Redis变慢了&#xff0c;这些可能的原因你查了没 &#xff1f;(上) Redis 作为一款业内使用率最高的内存数据库&#xff0c;其拥有非常高的性能&#xff0c;单节点的QPS压测能达到18万以上。但也正因此如此&#xff0c;当应用访问 Redis 时&#xff0c;如果发现响应延迟变…
阅读更多...
QT----Visual Studio输入中文报错，常量中有换行符

QT----Visual Studio输入中文报错，常量中有换行符

问题描述 在VS中写qt时发现在标题中输入了中文直接把报错无法运行 解决方法1 修改文件的编码方式。在VS菜单栏 工具->自定义-》命令-》选择文件-》添加高级保存选项命令。 双加选中添加中文的文件&#xff0c;文件-》高级保存选项-》修改utf-8就可以运行了 解决方法2…
阅读更多...
AMD 发布新芯片MI300，支持训练和运行大型语言模型

AMD 发布新芯片MI300，支持训练和运行大型语言模型

AMD 宣布推出 MI300 芯片&#xff0c;其 Ryzen 8040移动处理器将于2024年用于笔记本电脑。 AMD官方网站&#xff1a;AMD ׀ together we advance_AI AMD——美国半导体公司专门为计算机、通信和消费电子行业设计和制造各种创新的微处理器&#xff08;CPU、GPU、主板芯片组、电…
阅读更多...
电脑搜不自己的手机热点，其余热点均可！

电脑搜不自己的手机热点，其余热点均可！

一、现象&#xff1a; 之前可正常连接&#xff0c;突然间发现收不到自己的WiFi信号&#xff0c;其余人均可收到。通过重复手机电脑关机、改变热点设置中的频段等方式均没解决&#xff0c;同事电脑和手机可搜索到我的WiFi。 二、问题&#xff1a; WiF驱动程序更新 三&#x…
阅读更多...
字节开源的netPoll底层LinkBuffer设计与实现

字节开源的netPoll底层LinkBuffer设计与实现

字节开源的netPoll底层LinkBuffer设计与实现 为什么需要LinkBuffer介绍设计思路数据结构LinkBufferNodeAPI LinkBuffer读 API写 APIbook / bookAck api 小结 本文基于字节开源的NetPoll版本进行讲解&#xff0c;对应官方文档链接为: Netpoll对应官方文档链接 netPoll底层有一个…
阅读更多...
【python、opencv】opencv仿射变换原理及代码实现

【python、opencv】opencv仿射变换原理及代码实现

opencv仿射变换原理 仿射变换是opencv的基本知识点&#xff0c;主要目的是将原始图片经过仿射变换矩阵&#xff0c;平移、缩放、旋转成目标图像。用数学公式表示就是坐标转换。 其中x&#xff0c;y是原始图像坐标&#xff0c;u&#xff0c;v是变换后的图像坐标。将公式转换为…
阅读更多...
idea__SpringBoot微服务03——yaml（新注解）（新的依赖）

idea__SpringBoot微服务03——yaml（新注解）（新的依赖）

yaml 一、数据格式二、注入配置文件&#xff08;yaml注入&#xff09;&#xff08;新注解ConfigurationProperties&#xff09;三、注入配置文件&#xff08;properties注入&#xff09;&#xff08;新注解PropertySource&#xff09;四、yaml配置文件占位符${}五 、yaml跟prop…
阅读更多...
kettle作业发送@163邮件

kettle作业发送@163邮件

版本&#xff1a;20231207 用kettle做一个简单的邮件发送 使用模块 start、转换、邮件 在start设置好你需要的时间 在转换中随便添加一个你之前保存的一个任务 重点在邮件设置上 1.邮件的地址 2.邮件的服务器 这里最重要的一点就是发件人验证的第三方接入密码&#xff0c;这…
阅读更多...
WEB组态编辑器（BY组态）介绍

WEB组态编辑器（BY组态）介绍

BY组态是一款非常优秀的纯前端的【web组态插件工具】&#xff0c;可无缝嵌入到vue项目&#xff0c;react项目等&#xff0c;由于是原生js开发&#xff0c;对于前端的集成没有框架的限制。同时由于BY组态只是一个插件&#xff0c;不能独立运行&#xff0c;必须嵌入到你方软件平台…
阅读更多...
国科大超大规模集成电路设计针对期末考试的复习

国科大超大规模集成电路设计针对期末考试的复习

基本概念 物理综合Physical synthesis 从RTL代码创建正确的布局布线电路,相当于跳过了逻辑门级表示&#xff0c;直接从数据流阶段到了版图阶段。 等效门equivalent gate 一个等效门是指一个二输入的与非门&#xff0c;这里的等效不是指功能上的等效&#xff0c;而是芯片面积…
阅读更多...
深度学习疫情社交安全距离检测算法 - python opencv cnn 计算机竞赛

深度学习疫情社交安全距离检测算法 - python opencv cnn 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 相关技术3.1 YOLOV43.2 基于 DeepSort 算法的行人跟踪 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习疫情社交安全距离检测算法 ** 该项目较为新颖&#xff0c;适合作为竞赛…
阅读更多...
Android hook式插件化详解

Android hook式插件化详解

引言 Android插件化是一种将应用程序的功能模块化为独立的插件，并动态加载到主应用程序中的技术。通过插件化，开发者可以将应用程序的功能分解成独立的模块，每个模块可以作为一个插件单独开发、测试和维护，然后通过动态加载的方式集成到主应用程序中，实现功能的动态扩展和…
阅读更多...
功能测试，接口测试，自动化测试，压力测试，性能测试，渗透测试，安全测试，具体是干嘛的?

功能测试，接口测试，自动化测试，压力测试，性能测试，渗透测试，安全测试，具体是干嘛的?

软件测试是一个广义的概念&#xff0c;他包括了多领域的测试内容&#xff0c;比如&#xff0c;很多新手可能都听说&#xff1a;功能测试&#xff0c;接口测试&#xff0c;自动化测试&#xff0c;压力测试&#xff0c;性能测试&#xff0c;渗透测试&#xff0c;安全测试等&#…
阅读更多...
CentOS系统中设置反向代理服务器的步骤

CentOS系统中设置反向代理服务器的步骤

在CentOS系统中设置反向代理服务器可以帮助你隐藏原始服务器的细节&#xff0c;并提高服务器的安全性。以下是在CentOS系统中设置反向代理服务器的步骤概述&#xff1a; 安装反向代理软件&#xff1a; 常见的反向代理软件包括Nginx和Apache。你可以选择其中之一来作为你的反向…
阅读更多...
【Git】error：failed to push some refs to ‘git@gitee.com:name/project.git‘

【Git】error：failed to push some refs to ‘git@gitee.com:name/project.git‘

错误展示 今天在版本回退的时候&#xff0c;推送到gitee显示如下错误 先执行了git pull origin master&#xff0c;然后再执行push操作&#xff0c;也没有用 解决办法 执行git push -f origin master ,-f 表示强制推送。 结果 问题解决啦&#xff01;
阅读更多...
区分node，npm，nvm

区分node，npm，nvm

目录 一&#xff0c;nodejs二&#xff0c;npm三&#xff0c;nvm 区分node&#xff0c;npm&#xff0c;nvm 几年前学习前端的时候学习的就是htmlcssjs 三件套。 现在只学习这些已经不能满足需要了。 一&#xff0c;nodejs nodejs是编程语言javascript运行时环境。&#xff08;比…
阅读更多...
项目架构-六边形架构的概述和实现

项目架构-六边形架构的概述和实现

使用传统的分层架构&#xff0c;我们的所有依赖项都指向一个方向&#xff0c;上面的每一层都依赖于下面的层。传输层将依赖于交互器&#xff0c;交互器将依赖于持久层。 在六边形架构中&#xff0c;所有依赖项都指向内部——我们的核心业务逻辑对传输层或数据源一无所知。尽管如…
阅读更多...
【深度学习】强化学习（一）强化学习定义

【深度学习】强化学习（一）强化学习定义

文章目录 一、强化学习问题1、交互的对象1. 智能体&#xff08;Agent&#xff09;2. 环境&#xff08;Environment&#xff09; 2、强化学习的基本要素1. 状态 &#x1d460;2. 动作 &#x1d44e;3. 策略 &#x1d70b;(&#x1d44e;|&#x1d460;)4. 状态转移概率 &#x1…
阅读更多...
人工智能企业引入S-SDLC，推动安全能力大跃升，保障AI技术体系深化落地

人工智能企业引入S-SDLC，推动安全能力大跃升，保障AI技术体系深化落地

某人工智能公司是国际知名的上市企业&#xff0c;核心技术处于世界前沿水平。多年来&#xff0c;该企业在智慧教育、智慧医疗、智慧城市、智慧司法、金融科技、智能汽车、运营商、消费者等领域进行深度技术赋能&#xff0c;深入推进各个行业的智能化、数字化转型建设。 人工智能…
阅读更多...
【开源】基于Vue+SpringBoot的智慧家政系统

【开源】基于Vue+SpringBoot的智慧家政系统

项目编号&#xff1a; S 063 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S063&#xff0c;文末获取源码。} 项目编号&#xff1a;S063&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询家政服…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023