来自https://www.cnblogs.com/lgx5/p/10732016.html
返回主页
每天进步多一点
Make a little more progress every day
博客园首页新随笔联系管理订阅订阅随笔- 331 文章- 0 评论- 57
npm安装教程
一、使用之前，我们先来掌握3个东西是用来干什么的。
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
开始：
如图，下载8.9.3 LTS （推荐给绝大部分用户使用）
双击安装
可以使用默认路径，本例子中自行修改为d:\nodejs
一路点Next
点Finish完成
打开CMD，检查是否正常
再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs
先如下图建立2个目录
然后运行以下2条命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global
输入命令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安装依赖
npm run dev
成功界面，提示打开地址http://localhost:8080
自动打开浏览器http://localhost:8080/#/
npm run build
生成静态文件，打开dist文件夹下新生成的index.html文件
nmp下新建出来的vue01的目录描述：
分类: H5
好文要顶 关注我 收藏该文
每天进步多一点
关注 - 0
粉丝 - 198
+加关注
451
« 上一篇： 浅谈 CSS 预处理器： 为什么要使用预处理器？
» 下一篇： C# Cache缓存读取设置
posted @ 2019-04-18 20:17 每天进步多一点 阅读(158592) 评论(23) 编辑 收藏
评论
回复 引用#1楼 2019-07-12 17:14 | ❤清雨
天哪，好详细，学习了，给博主鸡腿
支持(9) 反对(0)
回复 引用#2楼 2019-08-08 14:05 | 吟恋错
写的很好
支持(1) 反对(0)
回复 引用#3楼 2019-08-10 20:31 | 今天也要好好努力
非常谢谢
支持(0) 反对(0)
回复 引用#4楼 2019-08-13 20:49 | Zcp1985
给大佬上茶！ 感谢分享
支持(0) 反对(0)
回复 引用#5楼 2019-08-22 10:57 | MrLaoBai
感谢分享
支持(0) 反对(0)
回复 引用#6楼 2019-08-22 22:34 | Martinz_Zoey
太赞了太赞了很佩服，虽然有的理解不了，但是一步一步跟着博主来就对了
支持(1) 反对(0)
回复 引用#7楼 2019-09-05 10:17 | 哈士奇好凶哦
大佬,我可以给您端茶不
支持(1) 反对(0)
回复 引用#8楼 2019-10-16 18:33 | Yangontheway
大佬，赞一个
支持(0) 反对(0)
回复 引用#9楼 2019-10-21 16:49 | __sai
大佬牛逼，学习了
支持(0) 反对(0)
回复 引用#10楼 2019-10-22 12:02 | 键盘来自M78
感谢大佬
支持(0) 反对(0)
回复 引用#11楼 2019-10-26 10:29 | 娇嫩大叔
原文照抄也不注明出处？原文在这里，17年的
支持(6) 反对(0)
回复 引用#12楼 2019-11-16 13:45 | 拯救秃头猿
还是注明出处的好
支持(1) 反对(0)
回复 引用#13楼 2019-12-04 16:38 | 丹薇68
牛气！！！
支持(0) 反对(0)
回复 引用#14楼 2019-12-18 11:11 | 老魔杖
谢谢楼主，最近在学习前后端分离，看过的文章属楼主最用心和详细了感谢分享！
支持(0) 反对(0)
回复 引用#15楼 2019-12-28 23:06 | jane_panyiyun
谢谢博主，好详细，非常清晰，爱你！
支持(0) 反对(0)
回复 引用#16楼 2020-01-16 22:07 | 溜号儿
详细的很，感谢分享
支持(0) 反对(0)
回复 引用#17楼 2020-03-12 12:00 | DUANJIAN25
感谢博主，我见过最详细的，很有用
支持(0) 反对(0)
回复 引用#18楼 2020-03-21 18:18 | 捉蝴蝶的🐱
感谢博主，很详细，很有用；弄好的同时，也知道些里边的逻辑。
支持(0) 反对(0)
回复 引用#19楼 2020-04-16 15:59 | eason66
感谢博主🙏
支持(0) 反对(0)
回复 引用#20楼 2020-04-17 12:26 | 会飞的丶仙人掌
专门登录下给你点个赞，感谢分享
支持(0) 反对(0)
回复 引用#21楼 2020-05-09 09:35 | 流苏丶
很详细，非常感谢！
支持(0) 反对(0)
回复 引用#22楼 2020-05-23 14:24 | Roger_Bourne
求在线的大佬指点下
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. D:\nodejs\node_global\webpack -> D:\nodejs\node_global\node_modules\webpack\bin\webpack.js npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"14.3.0","npm":"6.14.5"}) npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
webpack的安装过程中遇到了这个问题，老是说 chokidar 这个版本不够，具体什么原因啊
支持(0) 反对(0)
回复 引用#23楼 2020-06-04 11:37 | 川东龙潭
公司临时交了个移动端的项目，环境折腾了半天，这个终于妥了，感谢楼主。
支持(0) 反对(0)
刷新评论刷新页面返回顶部
发表评论
编辑
预览
支持 Markdown
退出 订阅评论
[Ctrl+Enter快捷键提交]
【推荐】了解你才能更懂你，博客园首发问卷调查，助力社区新升级
【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】免费下载 | 超全算法题精解，一本能“在线”编程的面试宝典
相关博文：
· npm安装教程
· windows下npm安装vue
· npm安装教程(vue.js）
· npm——安装教程、安装vue脚手架
· 安装vue错误详情解决办法
» 更多推荐...
最新 IT 新闻:
· 滴滴正式闯入货运，但“无限增长”的故事不好讲
· 拼多多疯狂砸价：iPhone 11降至4299元 周涛一场直播卖出1.4万台
· 官宣！诺基亚5310将推出：联发科芯片 蓝牙、无线FM一应俱全
· 往返机场仅需90秒！特斯拉将为“无聊公司”生产12辆电动巴士
· 苦等多时！《荒野乱斗》国服正式上线 腾讯代理
» 更多新闻...
历史上的今天：
2019-04-18 浅谈 CSS 预处理器： 为什么要使用预处理器？
昵称： 每天进步多一点
园龄： 4年8个月
粉丝： 198
关注： 0
+加关注
< 2020年6月 >
日 一 二 三 四 五 六
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 1 2 3 4
5 6 7 8 9 10 11
搜索
常用链接
我的随笔
我的评论
我的参与
最新评论
我的标签
随笔分类
ADO.NET(4)
ASP.NET(10)
Bootstrap(2)
C#(115)
Css(2)
Editor(2)
Es6(2)
FineReport(3)
H5(7)
Html(6)
Jquery(22)
Js(10)
layui(2)
Linq(11)
Mvc(15)
MySql(1)
Oracle(27)
Regex(3)
Sql(66)
Vue.js(3)
WeChat(2)
WeUI(1)
WinForm(12)
Xml(1)
设计模式(4)
随笔档案
2020年5月(6)
2020年4月(6)
2020年3月(6)
2020年2月(6)
2020年1月(6)
2019年12月(5)
2019年11月(5)
2019年10月(6)
2019年9月(6)
2019年8月(6)
2019年7月(7)
2019年6月(6)
2019年5月(6)
2019年4月(6)
2019年3月(6)
2019年2月(6)
2019年1月(6)
2018年12月(8)
2018年11月(7)
2018年10月(6)
2018年9月(6)
2018年8月(4)
2018年7月(7)
2018年6月(6)
2018年5月(8)
2018年4月(6)
2018年3月(5)
2018年2月(6)
2018年1月(8)
2017年12月(8)
2017年11月(7)
2017年10月(8)
2017年9月(3)
2017年8月(8)
2017年7月(6)
2017年6月(6)
2017年5月(8)
2017年4月(6)
2017年3月(9)
2017年2月(10)
2017年1月(6)
2016年12月(8)
2016年11月(8)
2016年10月(7)
2016年9月(4)
2016年8月(10)
2016年7月(6)
2016年6月(5)
2016年5月(6)
2016年4月(6)
2016年3月(5)
2015年9月(3)
最新评论
- Re:npm安装教程
公司临时交了个移动端的项目，环境折腾了半天，这个终于妥了，感谢楼主。
--川东龙潭
2. Re:npm安装教程
求在线的大佬指点下 npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokida...
--Roger_Bourne
3. Re:ASP.NET Web API(MVC API)
博主能加你qq不想学一下这个api
--debugger、Mr
4. Re:npm安装教程
很详细，非常感谢！
--流苏丶
5. Re:npm安装教程
专门登录下给你点个赞，感谢分享
--会飞的丶仙人掌
阅读排行榜
- npm安装教程(158572)
- C# list介绍(123431)
- HTML embed标签使用方法和属性详解(84226)
- C# Enum,Int,String的互相转换(48405)
- 关于C#泛型列表List
的基本用法总结(47272)
评论排行榜 - npm安装教程(23)
- 在EF中执行SQL语句(6)
- C# list介绍(4)
- MVC4中EasyUI Tree异步加载JSON数据生成树(2)
- C#如何使用异步编程(2)
推荐排行榜 - npm安装教程(45)
- 在EF中执行SQL语句(9)
- aspx,ascx和ashx使用小结(6)
- 如何搭建MVC + EF 框架(4)
- C# list介绍(3)
Copyright © 2020 每天进步多一点
Powered by .NET Core on Kubernetes