windows安装npm教程及生成DEMO

2023-09-19 10:53:42

在使用之前,先类掌握3个东西,明白它们是用来干什么的:

npm:  nodejs 下的包管理器。

webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要npm install 就可以安装。

2、nodejs下载网址:Node.js     【如果嫌下载的慢,可以下载其他网站上的,别人有现成的,下载的比较快】

 3、下载好后,双击安装:

 4、默认,下一步:

 5、接受协议:

 6、选择安装路径:

 7、会默认自己添加环境变量:

 8、接下去一路“next”,最后点击finish

 9、安装好后,对应的各个文件的作用:

 10、cmd打开终端:

 11、检查是否正常

 12、再看看另外2个目录,npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,

一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\nodejs

先如下图建立2个目录:

 13、然后运行以下2条命令

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

 

如上图,我们再来关注一下npm的本地仓库,输入命令npm list -global

14、配置一个镜像站,为了提升速度,

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息,我们关注一个配置文件

C:\Users\Administrator\.npmrc

 

 

使用文本编辑器编辑它,可以看到刚才的配置信息

 

 检查一下镜像站行不行命令1

npm config get registry

 

 检查一下镜像站行不行命令2

Npm info vue 看看能否获得vue的信息

 

注意,此时,默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录,

如果直接运行npm install等命令会报错的。

我们需要做1件事情:

1、增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules

(注意,一下操作需要重新打开CMD让上面的环境变量生效)

一、测试NPM安装vue.js

命令:npm install vue -g

这里的-g是指安装到global全局目录去

 

二、测试NPM安装vue-router

命令:npm install vue-router -g

 

运行npm install vue-cli -g安装vue脚手架

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global

win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】

重新打开CMD,并且测试vue是否使用正常

注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,

他的配置并不全放在根目录下的 webpack.config.js 中

初始化,安装依赖

运行npm install安装依赖

 

成功界面,提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件,打开dist文件夹下新生成的index.html文件

nmp下新建出来的vue01的目录描述:

大部分借鉴的下面这个大神的:

https://www.cnblogs.com/liluxiang/p/9592003.html

更多推荐

SG-Former实战:使用SG-Former实现图像分类任务(一)

摘要SG-Former是一种新型的Transformer模型,它被提出以降低视觉Transformer的计算成本,同时保持其优秀的性能表现。计算成本的降低使得SG-Former能够更有效地处理大规模的特征映射,从而提高了模型的效率和全局感知能力。SG-Former的核心思想是利用显著性图来引导Transformer模型

leetcode 236.二叉树的最近公共祖先

⭐️题目描述🌟leetcode链接:二叉树的最近公共祖先思路1:依次遍历每一个结点,遍历到当前根结点,再继续递归找p是否存在左子树q是否存在右子树,若p在左子树q在右子树或者q在左子树p在右子树,说明当前root就是qp的公共祖先,若当前结点找不到这种情况,则当前root转换为子问题root->leftroot->r

343. 整数拆分

题目:343.整数拆分给定一个正整数n,将其拆分为k个正整数的和(k>=2),并使这些整数的乘积最大化。返回你可以获得的最大乘积。示例1:输入:n=2输出:1解释:2=1+1,1×1=1。示例2:输入:n=10输出:36解释:10=3+3+4,3×3×4=36。提示:2<=n<=58思考历程与知识点:看到这道题目,都会

信息化发展44

智能运维1、中国电子工业标准化技术协会发布的团体标准I/CESA1172《信息技术服务智能运维通用要求》,给出了智能运维能力框架,包括组织治理、智能特征、智能运维场景实现、能力域和能力要素,其中能力要素是构建智能运维能力的基础。2、组织通过场景分析、场景构建、场景交付和效果评估四个过程,基于数据管理能力域提供的高质量数

关于mysql已有主从环境得主从重配置

恢复主从环境1:Situation(背景)2:Task(任务)3:Action(行动)主库(备份)1:锁表2:效验是否锁表3:查看主库状态并记录4:备份数据库全部5:解锁表6:把备份放到从库从库1:备份从库(可选)2:恢复从库3:清除旧设置4:添加新设置4:Result(结果)1:Situation(背景)测试环境下得

片内互联中常用的拓扑结构

主要的拓扑结构有星型(Star)、交叉(Crossbar)、总线(Bus)、环型(Ring)和网格(Mesh)等。星型(Star)结构,主控处理器放在中心位置,其他各个模块均与其连接,而模块彼此之间并不直接交互,必须通过主控中转,结构如图1所示。这种结构简单高效,在早期片内模块数量较少、结构单一时经常被使用。但随着多核

9.21数电(加法器&状态机&独热编码)

加法半加器一位,分为两部分,一个是进位,一个是单位上的和进位采取与门,单位上的和用异或门全加器进位数就是三个数进行加和,通过与门,就是两两过与门描述每位的和项就是,只去描述那个1的情况,即三中有一个,或者三个都为1分解全加器行波进位加法器快速加法器是说下一位的进位=此位的两个加数再加上来自上位的进数当此位的两个加数均为

如何恢复U盘里面的已经损坏的数据?

弹出使用驱动器之前,先将U盘格式化的信息框,是Windows系统针对某些特定类型的U盘或移动硬盘的一种常见处理方式。一般来说,如果U盘或移动硬盘出现某些故障或问题,Windows系统会建议用户将其格式化。格式化是一种常规的操作,它能使U盘或移动硬盘恢复到初始状态,但需要注意的是,格式化操作将会清除所有存储在U盘或移动硬

极客时间:数据结构与算法之美【文章笔记 & 实践 & 总结】

原文链接:https://time.geekbang.org/column/intro/10001730127|递归树:如何借助树来求解递归算法的时间复杂度?如何借助树来分析归并排序算法的时间复杂度?如何借助树来分析快速排序算法的时间复杂度?如何借助递归树来分析斐波那契数列的时间复杂度?如何借助递归树来分析全排列的时间

SpringBoot,Mybatis 使用Java8(JSR310)时间日期规范

目录一.依赖二.前台三.Controller,Form,Service四.数据库类型五.效果一.依赖⏹若使用的是SpringBoot<dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter<

综合管廊安全监测系统,城市‘里子’的守护者

在现代城市的地下,一条隐藏在地下深处的巨龙悄然运行,它虽悄无声息,却是城市运转的重要生命线。这个神秘的存在就是综合管廊,综合管廊是保障城市运行的重要基础设施,被形象地称为“城市大动脉”“地下生命线”,能够有效解决传统城市建设中存在的“空中蜘蛛网”“马路拉链”等“城市病”,不仅让市容市貌更美观、更安全,也可以减少路面翻修

热文推荐