win7 x64位 下安装 Vue 开发环境

一、安装nodejs

Node.js 是一个开源与跨平台的JavaScript 运行时环境

在 nodejs官网 https://nodejs.org/en/ ,下载最新版本,发现nodejs最新版本不在支持win7系统

选择nogdejs版本(12.18.4)

所以找个可以支持window7的版本(12.18.4),安装后效果如下

下载安装

https://nodejs.org/zh-cn/download/releases/

 选择对应的版本就行,我这边win7,64位选择是的node-v12.18.4-x64.msi这个安装版.,下载后双击安装下就可以使用了

这里我 安装的是 c:\Program Files\nodejs\   目录下（默认）

之后一直下一步安装就可以了

检测nodejs安装
当执行完上步安装包安装后，需要进行安装是否成功，win+r打开运行，输入cmd后进入命令行界面。

分别输入node -v  和  npm -v  命令进行node的版本号和npm的版本号的查看。

二、安装完毕后,配置node.js

配置npm安装全局模块路径与缓存路径
NPM是随同NodeJS一起安装的包管理工具

一般，在进行npm install ...等命令全局安装时，默认的会将模块安装C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中。

此时可不进行修改，但便于对C盘数据进行管理，此时这里配置我们自定义的全局模块安装路径和缓存路径，在当前的nodejs安装目录下新建两个文件夹，分别为   node_global   和  node_cache 

此时需要win+r打开运行，输入cmd进入命令行界面，分别输入以下内容执行

npm config set perfix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"

 

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

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

检查一下镜像站 是否可用命令

npm config get registry

更新一下npm

npm install npm -g
 

node环境变量配置
在 系统变量  中新建 NODE_PATH  值为 C:\Program Files\nodejs\node_modules

注：下面 修改 用户变量 的步骤 我测试并没有成功，vue还是安装 在   C:\Users\Administrator\AppData\Roaming\npm  目录下。

所以这步不用改， 也是好用的。

在 用户变量 中编辑 用户变量的path，修改对应的 npm的路径值为上文中自定义的node_global路径

原

C:\Users\Administrator\AppData\Roaming\npm

改为

C:\Program Files\nodejs\node_global

  改为    

三、安装 Vue 

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

安装vue-cli
vue-cli 是一个官方发布vue.js 项目脚手架，一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

运行cmd调出命令行窗口。命令行里输入：npm --version，显示npm版本大于3.0才能安装vue-cli。

执行  npm install -g @vue/cli     

安装Vue
执行  npm install vue -g

在 global  的模块目录下就能找到 vue

安装Vue-router
这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。

执行  npm install vue-router -g

查看vue版本

执行  vue -V

 运行 Demo

四、新增一个Vue项目 运行Demo

在 C盘 根上 新建 myVue 进入 再建 VueDemo

C:\myVue\VueDemo

运行  ->  cmd

执行  cd..  退到 C盘根目录中

执行  cd myVue  进入刚刚新建的目录中   C:\myVue\VueDemo
 

 初始化，安装依赖

 执行   npm install -g @vue/cli-init

初始化 Vue 项目

 执行  vue init webpack vue01

期间会需要输入 回车

期间会询问 是否 Yes/No  输入 y 回车

期间会让进行选择，选择默认就可以

 期间会出现一会 警告

 最终会出现

 进入 vue01目录

 安装依赖

 执行   npm install  

 运行
 npm run dev

 

 

 最终出现  http://localhost:8080

在浏览器中访问，出现下图说明 Vue 安装成功，已经运行Demo

 按 Ctrl + V  后输入  y 退出

 打包
 npm run build

 

 

此时在  C:\myVue\VueDemo\vue01  目录 会有 dist目录，这个目录下就是编译好的文件

 

-------------------------------------------------------------------------------

 十分感谢 一只小木头. 的分享

https://blog.csdn.net/weixin_42900442/article/details/120855416