webpack vue 环境变量_vue框架环境搭建

这里的环境框架搭建主要针对win10, 对于win7是否有效，毕竟没有两台电脑，不太清楚。好久没写知乎了，希望大家多多指正。

对于才开始学习vue框架的同学，可能会比较懵，同样，在搭建环境的时候也不太清楚怎么搞，一上来就直接去 npm install -g @vue/cli 但是这个命令不会有任何作用，毕竟电脑不知道npm是个啥。所以，这里我从头至尾的讲下吧。

首先就是去Node.js 官方网站下载：

Node.js​nodejs.org

如下图所示：

针对window用户大家可以下载这个版本，当然随着版本的更新，不一定版本一定要相同，但是尽可能是（LTS）这是一个长期维护的版本。下载之后进行傻瓜式的安装，一直next，但是安装的路径要注意下，如下图（图是网上盗的，如果涉及版权问题，请联系我删除）

这里我安装的路径是E:ruanjiannodejs 如图所示：

打开环境变量你会发现在系统变量中的path中有安装的路径：

好，接下来测试一下是否安装好了，打开命令行cmd的dos窗口，输入命令 node -v 以及 npm -v 查看版本，如下图：

成功之后我们来做针对后面安装webpack的一些准备工作。改变webpack的安装路径，因为nodejs安装之后会在环境变量 > 用户变量 >path 中出现路径

C:用户asusAppdataRoaming 这样一个类似的路径，用来存放后面安装的webpack,(但是这个文件内容又比较大，放在内存中比较占空间）于是我们自定义路径安装。

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix "E:ruanjiannodejsnode_global"

npm config set cache "E:ruanjiannodejsnode_cache" 具体操作如下图：

因为我电脑已经安装过了，大家这样执行下就行。我就不重复操作。接下来是改变环境变量，在系统变量下新增：“NODEPATH”值为”E:ruanjiannodejsnode_globalnode_modules" 在用户变量path中改变刚才所说的那个 ”C:用户asusAppdataRoaming” 为“E:ruanjiannodejsnode_global”如图所示：

上面操作完成后 接下来安装webpack: 在cmd 执行命令:npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效 如下图：（执行结果就不展示了，重装一次太麻烦）

vue的相关文件暂时不用管，那是后面安装的时候出现的。 这个时候基本上node.js就已经安装完成，cmd执行命令 npm webpack -v 查看下是否安装成功，如下图：

接下来就是我们最开始的操作了，（所以说如果以上不完成的话，后面这个命令是不会有任何作用的）cmd执行命令 npm install -g @vue/cli，执行图效果就不作展示了，基本这里完成了，如果你不放心，同样可以执行命令 npm vue -v 查看版本来测试。

到这里环境我们就基本搭建出来了，接下来讲下如何构建项目，如果你已经接触过vue，可以直接cmd执行命令vue create myProject 来创建项目。这里的myProject是项目名 ，读者自行命名。第二种就是使用vue ui命令（这里我们主要讲这种方式）。

难得打字了，直接上我做的思维导图吧，在用运行图来对比下 vue ui 的两种创建方式。

第一种：直接vue ui :

根路径直接是c盘，很不好管理，当然，这个只针对第一打开，当你在其他盘创建过项目后，他就会直接到那个盘，所以第二次创建的时候就不用麻烦，直接使用vue ui了。

第二种：到有vue.cmd的所在目录执行，看上面的图是，不知道你注意到没有那个文件，在nodejsnode_global下。来看具体操作。

坑已经踩完了，那么接下来就去创建下项目吧我们看图说话，不打字了。

如果来到这个界面就表示创建成功了。现在我们来运行项目吧，

这里从左到右一依次点击即可

出现这个页面，说明我们的项目搭建成功了。

搭建环境还是花了不少的时间，

CSDN-专业IT技术社区-登录​blog.csdn.net vue环境搭建​www.faychou.cn

将网上的和老师发布的内容进行结合，以及我自己安装时的见解，经验结合分享给大家，对有错误的地方做了一定整改，如果大家在安装的时候出现问题，欢迎大家分享交流。