一、使用之前,我们先来掌握3个东西是用来干什么的。
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
开始:
![](https://i-blog.csdnimg.cn/blog_migrate/2e3fa51e8fc0041e5d0b153b5488ddee.png)
如图,下载8.9.3 LTS (推荐给绝大部分用户使用)
![](https://i-blog.csdnimg.cn/blog_migrate/c8c0b72549d0e1d34c65ac3a8ba366b1.png)
双击安装
![](https://i-blog.csdnimg.cn/blog_migrate/722a3c67ecf0810451652a5b9c4505c2.png)
可以使用默认路径,本例子中自行修改为d:\nodejs
![](https://i-blog.csdnimg.cn/blog_migrate/b8e72e887af163cf675046d7f8eff6c0.png)
一路点Next
![](https://i-blog.csdnimg.cn/blog_migrate/5855054e5e7bf5245e33fe4a867d1757.png)
点Finish完成
![](https://i-blog.csdnimg.cn/blog_migrate/2ecb1e93a6fbc2c4fa6010416b46a288.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e9d75478ea18f9f33250f8dca4948262.png)
打开CMD,检查是否正常
![](https://i-blog.csdnimg.cn/blog_migrate/4f2ba526dcbeb839f729624bec33cadd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7a783bb3c71470a973104523af6edd7f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e5953a8cb59969d0db4cf90a1ffb5b55.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cee496893dc42d27068f855d3746f73e.png)
找不到AppData:查看隐藏项目就可以在目录下看到了
再看看另外2个目录,npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\nodejs
先如下图建立2个目录
![](https://i-blog.csdnimg.cn/blog_migrate/566b22ad04c07a417eb287bf82a98549.png)
然后运行以下2条命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
![](https://i-blog.csdnimg.cn/blog_migrate/9bc074bea3b3c5b14d4857cf137cf48a.png)
如上图,我们再来关注一下npm的本地仓库,输入命令npm list -global
![](https://i-blog.csdnimg.cn/blog_migrate/856b508b72957d49d3b077054be8c3ad.png)
输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站
![](https://i-blog.csdnimg.cn/blog_migrate/b6f6ae914cf4a6e7963ed623cd29d277.png)
输入命令npm config list 显示所有配置信息,我们关注一个配置文件
C:\Users\Administrator\.npmrc
![](https://i-blog.csdnimg.cn/blog_migrate/c359678cc71b5042333055b1cd7945ad.png)
使用文本编辑器编辑它,可以看到刚才的配置信息
![](https://i-blog.csdnimg.cn/blog_migrate/6d89118a3079c4c9c1f3936c3ed92dda.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6a5bc81a95a3ebc283ee8cb42dda0120.png)
检查一下镜像站行不行命令1
npm config get registry
![](https://i-blog.csdnimg.cn/blog_migrate/e787cb6723de4101f55fdd1c96a29b7a.png)
检查一下镜像站行不行命令2
Npm info vue 看看能否获得vue的信息
![](https://i-blog.csdnimg.cn/blog_migrate/24a5c287646c16259fa2b775e302889e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f0384982a41fd1e823611ca70cd36b25.png)
注意,此时,默认的模块D:\nodejs\node_modules 目录
将会改变为D:\nodejs\node_global\node_modules 目录,
如果直接运行npm install等命令会报错的。
我们需要做1件事情:
1、增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules
![](https://i-blog.csdnimg.cn/blog_migrate/be93b0a6cde46f76708737fbba1968d1.png)
(注意,一下操作需要重新打开CMD让上面的环境变量生效)
一、测试NPM安装vue.js
命令:npm install vue -g
(注意,此命令需要使用 管理员模式 打开的 命令提示符)
这里的-g是指安装到global全局目录去
![](https://i-blog.csdnimg.cn/blog_migrate/4e35b7ad722a50c5429685fda8dc255c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3908b653da4732d96280ebf8476bb6d6.png)
二、测试NPM安装vue-router
命令:npm install vue-router -g
![](https://i-blog.csdnimg.cn/blog_migrate/eb19e43912e78b65cb2ea7fd7b3a56b8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/15c83b48f7bc9a3f13237e222358ce41.png)
![](https://i-blog.csdnimg.cn/blog_migrate/31a70bbe3f51f4b5577a55fcfc7c7016.png)
运行npm install vue-cli -g安装vue脚手架
![](https://i-blog.csdnimg.cn/blog_migrate/fcc98af94bc98c73c638dd219565c4e0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/08cd3ebf0dabe395f744f5abfdb6524e.png)
编辑环境编辑path
![](https://i-blog.csdnimg.cn/blog_migrate/ae2fb4a7cddcf916a0bf468594bbcc8b.png)
对path环境变量添加D:\nodejs\node_global
win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】
![](https://i-blog.csdnimg.cn/blog_migrate/04b18c38688b10531fca7c2d2a4ca482.png)
重新打开CMD,并且测试vue是否使用正常
![](https://i-blog.csdnimg.cn/blog_migrate/33ab91778403230bc9a1512e27322665.png)
注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,
他的配置并不全放在根目录下的 webpack.config.js 中。
![](https://i-blog.csdnimg.cn/blog_migrate/004d8d69df4395c969c621bfbbdc9dd2.png)
初始化,安装依赖
![](https://i-blog.csdnimg.cn/blog_migrate/a699f28956dcebe26e3ad122cd77d86a.png)
运行npm install安装依赖
![](https://i-blog.csdnimg.cn/blog_migrate/65da914ad072648de791ab5e96619088.png)
npm run dev
![](https://i-blog.csdnimg.cn/blog_migrate/d56ca2ac54917bee0288c6b57bcc7eaf.png)
成功界面,提示打开地址http://localhost:8080
![](https://i-blog.csdnimg.cn/blog_migrate/0b4ff428e51fa54f0c9bf9dd83d4121c.png)
自动打开浏览器http://localhost:8080/#/
![](https://i-blog.csdnimg.cn/blog_migrate/ef5054ff7261068b106f9c5b82d5f089.png)
npm run build
生成静态文件,打开dist文件夹下新生成的index.html文件
nmp下新建出来的vue01的目录描述:
![](https://i-blog.csdnimg.cn/blog_migrate/464bd34c6ac6854cf70b6082f8fe7984.png)
安装NVM管理器:
安装包下载地址:https://github.com/coreybutler/nvm-windows/releases
![](https://i-blog.csdnimg.cn/blog_migrate/7a5a59944425620985ff4cc5592b8108.png)
双击下载好的nvm安装包
修改nvm和nodejs安装目录或者直接next
![](https://i-blog.csdnimg.cn/blog_migrate/306661d8923a6e7bc26a4032dc9db645.png)
勾选同意,然后next下一步
![](https://i-blog.csdnimg.cn/blog_migrate/775b8b4778095f796c98404f24300fde.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d3409e276ad7f05db050b1b34c6fa041.png)
然后win+R输入cmd回车,然后输入nvm命令查看是否安装成功
![](https://i-blog.csdnimg.cn/blog_migrate/9a4b11d22d782802695bb0b45d59e629.png)
切换并使用nodejs版本
nvm命令行操作命令
1,nvm nvm list 是查找本电脑上所有的node版本
- nvm list 查看已经安装的版本
- nvm list installed 查看已经安装的版本
- nvm list available 查看网络可以安装的版本
2,nvm install 安装最新版本nvm
3,nvm use <version> ## 切换使用指定的版本node
4,nvm ls 列出所有版本
5,nvm current显示当前版本
6,nvm alias <name> <version> ## 给不同的版本号添加别名
7,nvm unalias <name> ## 删除已定义的别名
8,nvm reinstall-packages <version> ## 在当前版本node环境下,重新全局安装指定版本号的npm包
9,nvm on 打开nodejs控制
10,nvm off 关闭nodejs控制
11,nvm proxy 查看设置与代理
12,nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是: https://github.com/npm/npm/archive/.
13,nvm uninstall <version> 卸载制定的版本
14,nvm use [version] [arch] 切换制定的node版本和位数
15,nvm root [path] 设置和查看root路径
16,nvm version 查看当前的版本
文章借鉴:
windows下npm安装vue - liluxiang - 博客园 (cnblogs.com)