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

news2024/11/27 20:52:59

今天讲解 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.org

2、永久指定镜像源：
npm config set registry https://registry.npm.taobao.org

换回默认全局镜像
npm config set registry https://registry.npmjs.org

3、安装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.coloradmin.cn/o/1291303.html

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

相关文章

Vue 创建组件

Vue 创建组件

组件&#xff1a;用于将某个功能的 HTML、CSS、JS 封装到一个文件中&#xff0c;提高代码的复用性和可维护 性。 基础使用【setup 语法糖写法】 一、在 src / components 文件夹中创建一个组件&#xff0c;文件命名为 MyDemo 。 <template><p class"redColo…
阅读更多...
Domino多Web站点托管

Domino多Web站点托管

大家好&#xff0c;才是真的好。 看到一篇文档&#xff0c;大概讲述的是他在家里架了一台Domino服务器&#xff0c;上面跑了好几个Internet的Web网站&#xff08;使用Internet站点&#xff09;。再租了一台云服务器&#xff0c;上面安装Nginx做了反向代理&#xff0c;代理访问…
阅读更多...
vue2-使用vue-i18n搭建多语言切换环境

vue2-使用vue-i18n搭建多语言切换环境

安装 注意&#xff1a;vue2.0要用8版本的&#xff0c;使用9版本的会报错 npm install vue-i18n8.27.0 --save 创建相关的语言包文件 在src目录下&#xff0c;新建i18n文件夹 在新文件夹i18n中新建langs文件夹&#xff0c;里边放语言文本文件.js zh.js&#xff1a;存…
阅读更多...
抽象类和接口(超重点!!)

抽象类和接口(超重点!!)

[本节目标] 1.抽象类 2.接口 3.Object类 1.抽象类 1.1 抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&a…
阅读更多...
企业计算机服务器中了mallox勒索病毒如何处理，Mallox勒索病毒解密

企业计算机服务器中了mallox勒索病毒如何处理，Mallox勒索病毒解密

随着计算机技术的不断发展&#xff0c;越来越多的企业利用网络来提高工作效率&#xff0c;但随之而来的网络安全威胁也在不断增加&#xff0c;各种勒索病毒种类不断增加&#xff0c;给企业的数据安全带来严重的威胁&#xff0c;影响企业的生产业务开展。近期&#xff0c;云天数…
阅读更多...
荣耀手机怎么录屏？必备技巧和软件推荐

荣耀手机怎么录屏？必备技巧和软件推荐

“荣耀手机怎么录屏呀&#xff0c;新买的荣耀v50&#xff0c;还没怎么用过&#xff0c;今天玩游戏的时候突然想录屏&#xff0c;却找不到录屏在哪&#xff0c;我记得是有录屏功能的呀&#xff0c;有人知道吗&#xff1f;教教我。” 在智能手机时代&#xff0c;录屏功能已经成为…
阅读更多...
跨境电商卖家必备：自养号测评补单的重要性

跨境电商卖家必备：自养号测评补单的重要性

测评补单对于跨境电商卖家来说&#xff0c;是一种重要的运营手段之一。一个产品想要获得更好的曝光和更高的转化率&#xff0c;需要有一个良好的Listing排名。而在各平台的Listing中&#xff0c;Review占据着较高的权重。一个好的Review能够给用户带来良好的观感&#xff0c;增…
阅读更多...
HuggingFace学习笔记--Prompt-Tuning、P-Tuning和Prefix-Tuning高效微调

HuggingFace学习笔记--Prompt-Tuning、P-Tuning和Prefix-Tuning高效微调

1--Prompt-Tuning 1-1--Prompt-Tuning介绍 Prompt-Tuning 高效微调只会训练新增的Prompt的表示层&#xff0c;模型的其余参数全部固定&#xff1b; 新增的 Prompt 内容可以分为 Hard Prompt 和 Soft Prompt 两类&#xff1b; Soft prompt 通常指的是一种较为宽泛或模糊的提示&…
阅读更多...
MySQL系列（二）——日志篇

MySQL系列（二）——日志篇

MySQL日志 主要包括错误日志、查询日志、慢查询日志、事务日志、二进制日志几大类。其中&#xff0c;比较重要的还要属二进制日志binlog&#xff08;归档日志&#xff09;和事务日志redo log&#xff08;重做日志&#xff09;和undo log&#xff08;回滚日志&#xff09;。 今…
阅读更多...
基于安卓聊天APP的设计与实现

基于安卓聊天APP的设计与实现

安卓聊天APP的设计与实现 摘要 Android在2007年由谷歌发布&#xff0c;移动即时通讯凭借便利快捷的用户体验在即时通讯市场大受欢迎。这个互联网时代产业的新鲜血液凭借着自身优势在互联网市场中的地位越来越重要。 聊天工具的主要功能是为基于互联网的客户端提供实时语音、文…
阅读更多...
交易历史记录20231206 记录

交易历史记录20231206 记录

昨日回顾&#xff1a; select top 10000 * from dbo.CODEINFO A left join dbo.全部&#xff21;股20231206010101 B ON A.CODE B.代码 left join dbo.全部&#xff21;股20231206CONF D on A.CODED.代码left join dbo.全部&#xff21;股20231206 G on A.CODEG.代码 left…
阅读更多...
智慧城市是什么？为什么要建智慧城市？

智慧城市是什么？为什么要建智慧城市？

智慧城市是一个通过现代科技手段推动城市管理和服务创新的概念。 具体来说&#xff0c;它利用信息技术和创新概念&#xff0c;将城市的各个系统和服务集成起来&#xff0c;以提升城市运行效率、优化城市管理和服务&#xff0c;改善市民的生活质量。 为什么要建智慧城市呢&…
阅读更多...
Vue学习计划-Vue2--Vue核心（五）条件、列表渲染、表单数据

Vue学习计划-Vue2--Vue核心（五）条件、列表渲染、表单数据

1. 条件渲染 v-if v-if“表达式”v-else-if “表达式”v-else “表达式” 适用于&#xff1a;切换频率较低的场景 特点&#xff1a;不显示dom元素&#xff0c;直接被删除 注意&#xff1a;v-if和v-else-if、v-else一起使用&#xff0c;但要求结构不能被打断 v-if和template一…
阅读更多...
观海微电子---线路腐蚀的起因与对策

观海微电子---线路腐蚀的起因与对策

线路腐蚀的原理&#xff1a; 在线路表面的污染物中含有金属元素的离子或金属化合物&#xff0c; 在潮湿的空气中这些污染物与线路之间的冷凝水连成微电池&#xff0c;引发电化学反应&#xff0c;产品通电的情况下反应进行得更快&#xff0c;耗损线路导致线路腐蚀形成断线。 腐…
阅读更多...
空对象指针为什么有时候能调用成员函数

空对象指针为什么有时候能调用成员函数

在谈这个话题之前呢&#xff0c;还是得了解一下内存布局&#xff0c;以x86的32位系统为例&#xff1a; 然后得明确一点&#xff0c;NULL指针是无法访问的&#xff0c;如果强行访问&#xff0c;则会引发异常 然而空对象指针有时候却能够调用成员函数 class C { public:int a;st…
阅读更多...
《论文阅读》用于情绪回复生成的情绪正则化条件变分自动编码器 Affective Computing 2021

《论文阅读》用于情绪回复生成的情绪正则化条件变分自动编码器 Affective Computing 2021

《论文阅读》用于情绪回复生成的情绪正则化条件变分自动编码器 前言简介模型结构实验结果总结前言 今天为大家带来的是《Emotion-Regularized Conditional Variational Autoencoder for Emotional Response Generation》 出版：IEEE Transactions on Affective Computing 时间…
阅读更多...
应用在大功率驱动器中的IGBT晶圆

应用在大功率驱动器中的IGBT晶圆

功率器件驱动器是电力电子系统的低压信号控制电路和高压主电路之间的接口&#xff0c;是功率器件应用的关键技术与难点之一。功率器件中的晶体管和晶闸管在应用中需要驱动器的驱动信号才可运行&#xff0c;功率器件驱动器的通常作用是电气隔离、信号传输与放大及功率器件的保护…
阅读更多...
【力扣】206.反转链表

【力扣】206.反转链表

206.反转链表 这道题有两种解法&#xff0c;但不只有两种&#xff0c;嘿嘿。 法一&#xff1a;迭代法 就是按循序遍历将每一个指针的指向都给改了。比如说1——>2——>3改为null<——1<——2<——3这样。那这里以第二个结点为例&#xff0c;想一想。我想要指向…
阅读更多...
怎样提升Windows Server安全性？

怎样提升Windows Server安全性？

在Windows Server环境中&#xff0c;审计对于处理安全、运营和合规需求至关重要。然而&#xff0c;微软活动目录安全审计工具存在固有限制&#xff0c;包括专业知识需求、耗时的过程和缺失的功能&#xff0c;因此我们需要第三方审计工具&#xff0c;如ManageEngine ADAudit Plu…
阅读更多...
Pytorch CIFAR10图像分类 ShuffleNetv2篇

Pytorch CIFAR10图像分类 ShuffleNetv2篇

Pytorch CIFAR10图像分类 ShuffleNetv2篇 文章目录 Pytorch CIFAR10图像分类 ShuffleNetv2篇4. 定义网络&#xff08;ShuffleNetv2&#xff09;高效网络设计实用指南指南一&#xff1a;同等通道大小最小化内存访问量指南二&#xff1a;过量使用组卷积会增加MAC指南三&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023