Windows安装npm vue教程（解压版nodejs）

1、在使用之前，先类掌握3个东西，明白它们是用来干什么的：

npm:  nodejs 下的包管理器。

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

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

2、nodejs下载网址：https://nodejs.org/en/     【如果嫌下载的慢，可以下载其他网站上的，别人有现成的，下载的比较快】

 

 3、下载：

 

 4、解压到指定目录：

各文件夹作用

 

 5、设置环境变量：

设置PATH环境变量：    D:\Development Program\node-v12.13.0-win-x64

 

 6、cmd打开终端：

 

 7、检查是否正常

 

 

 8、另外增加2个目录node_global和node_cache及1个子目录Nodejs\node_global\node_modules（这两个目录绝对路径间不要出现空格）

 

先如下图建立2个目录：

  8、设置环境变量
PATH环境变量增加C:\Users\YYC\Documents\Nodejs\node_global

 

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

npm config set prefix "C:\Users\YYC\Documents\Nodejs\node_global"

npm config set cache "C:\Users\YYC\Documents\Nodejs\node_cache"

 

 

 

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

11、配置一个镜像站，为了提升速度，

输入命令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的信息

 

 

 

12、增加环境变量NODE_PATH

注意，此时，默认的模块D:\Development Program\node-v12.13.0-win-x64\node_modules 目录

将会改变为C:\Users\YYC\Documents\Nodejs\node_global\node_modules目录，

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

我们需要做1件事情：

增加NODE_PATH为C:\Users\YYC\Documents\Nodejs\node_global\node_modules

13、安装常用工具cnpm和yarn

npm install -g cnpm

npm install -g yarn

Nodejs\node_global和子目录Nodejs\node_global\node_modules分别产生cnpm和yarn信息

 

（注意，一下操作需要重新打开CMD让上面的环境变量生效）

14、NPM安装vue【引用：https://segmentfault.com/a/1190000019616983】

VUE-CLI 的 1.x,2.x 和 3.x 安装命令不一样，全局安装过 1.x,2.x 的需要先卸载，以 VUE-CLI 的官方文档为准，下面命令都在 cmd 命令行执行，注释内容不要粘贴（命令行中，左键未选中内容时，右键是粘贴，左键选中内容时，右键是复制）。
3.x 以前包名是 vue-cli ，3.x 是 @vue/cli 。

卸载：

npm uninstall vue-cli -g  //-g 表示全局的意思，
# 或者
yarn global remove vue-cli

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

不知道是我之前修改过配置的原因还是现在这个版本默认就是这样，我的 npm 全局安装的包都在安装目录的 node_global 下面，这样 我刚才安装的 vue 就在这个目录下，
执行下面命令，查询当前 vue 的版本号，是不是3.x：

vue --version

如果提示你，不是内部或外部命令，这是因为 vue 没有在 path 环境中配置，在安装 nodejs 的时候自动安装了 npm 包，npm 也自动加入了 path 环境，可以仿照添加 vue，在环境变量中我的 npm 如下：

打开路径是包含 cmd 的路径：

现在仿照添加 vue，vue 在我的安装目录下的 node_global：

添加到 path：

重新打开命令行，查看 vue 版本：

HELLO WORLD

使用命令行创建

1 新建一个 workspace 文件夹，按住 shift 右键，在此处打开命令行或 power shell，输入如下命令创建项目：

vue create helloworld

2 上下选择，回车确定，后续创建完项目也可以继续添加依赖配置，这里选择第一个 default，开始创建下载依赖

3 创建成功后会提示，成功创建项目 helloworld，输入如下命令启动项目：

依次执行提示命令运行，左键选择命令，右键复制，右键粘贴，回车

4 运行成功，提示项目访问的 URL 和打包成上线产品的命令：

5 访问测试： http://localhost:8081/

测试成功！

使用 UI 界面创建

1 打开 workspace 文件夹，在此处打开命令行，输入如下命令：

vue ui

会自动打开浏览器，项目管理界面，会有之前命令行创建的项目 helloworld：

可以看到之前命令行创建的 helloworld

2 创建新项目

3 选择预设并创建

左侧可以管理项目的插件、依赖、配置，任务里面可以管理项目的运行和停止：

UI 界面创建的项目，可以在 UI 管理界面的首页项目中看到，命令行创建的是看不到的。

目录结构

打包试试：

npm run build

会将项目打包到项目路径下的 dist 文件夹中，直接打开 index 是访问不了的：

把 dist 里面的文件都丢到 tomcat 的 ROOT app里面试试：

是可以访问的。

目录结构

helloworld
    |—— node_modules #依赖的包
    |—— public 
    |    |—— favicon.ico 
    |    |—— index.html 
    |
    |—— src 程序员开发编辑的目录
    |—— 。。。
    

打开 vscode 开发工具，用开发工具打开项目，会自动识别为 VUE 语言，然后提示安装 VUE 开发插件，安装就行。

vue.config.js 配置

参考 官方文档 中，这是一个可选配置，与 package.json 同级，也可以将 vue.config.js 配置内容写在 package.json 里面，键为 vue,

baseUrl 是项目根路径，打包，在 tomcat 的 webapp 里面新建 vue 文件夹，把打包的 dist 里面的内容丢到 vue 文件夹，访问测试

 

 

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