Vue配置,安装vue的命令,超级详细的Vue安装与配置教程

Vueweb前端三大主流框架之一，是一套构建用户界面的渐进式框架。下面这篇文章主要介绍的是关于Vue安装配置教程的相关信息，通过图文介绍的非常详细，有需要的朋友可以参考一下。

一、下载和安装Vue

官网下载地址下载| Node.js

选择适合自己的版本，推荐LTS，长期稳定的版本。我选择了Windows Installer(。msi)这里是64位。

下载完成后，双击下载的安装包。

单击下一步。

检查我接受..然后单击下一步。

这里建议换到你想要的安装目录，然后点击下一步(可以先自己搭建安装目录。下面是我提前搭建的一个目录：E:\Java\nodejs)

这里有五个选项，有时间可以看看，就是安装的时候会安装一些组件和npm，同时会添加环境变量，右边有说明。我们直接点下一个吧。

不要在这里打勾，只需点击下一步

安装

结束

安装完成后，检查安装是否成功。

打开cmd并输入以下命令。

节点v

npm -v

输出版本号表明安装成功。

安装后的完整目录：

在我们的安装目录下，创建两个名为node_cache和node_global的文件夹。

打开Dos窗口并执行以下命令，将npm的全局模块目录和缓存目录配置为我们刚刚创建的两个目录。

Npconfig设置前缀“您的安装目录\node_global”

Npconfig设置缓存'您安装目录\node_cache '

为了以后快速下载包，修改来源是淘宝图片。(此处修改，不需要安装cnpm，因为cnpm是Node.js淘宝镜像加速器，。如果这里配置了，就不需要安装了。)

npm配置集注册表https://registry.npm.taobao.org

检查npm配置修改是否成功。

npm配置列表

同时，我们会找到一个附加文件：C:\Users\ user name \下的npmrc文件，可以理解为记录当前用户修改信息的配置文件。如果删除该文件，您刚才修改的所有参数都将丢失，并且将返回默认配置。

三、配置环境变量

在安装过程中，会自动配置两个环境变量，一个是环境变量---用户变量---Path中的C:\Users\你的用户名\AppData\Roaming\npm，另一个是环境变量---系统变量---Path中的软件安装目录。我们需要添加和修改它们。

1. 环境变量---用户变量---选中Path---点编辑

将C:\Users\你的用户名\AppData\Roaming\npm更改为你的安装目录\node_global。

2. 环境变量---系统变量---新建

变量名：NODE_PATH

变量值：您的安装目录\节点_全局\节点_模块

注意：这里的node_modules目录还不存在，但是当我们将模块安装到全局目录中时，我们会自动生成这个文件夹。

请记住将%NODE_PATH%添加到系统变量PATH中。

三、安装vue

1. 安装vue.js

npm安装vue -g

其中-g是全局安装，这意味着安装到全局的全局目录。如果没有添加-g，模块将被安装到当前路径下的node_modules文件夹中，如果没有目录，将自动创建。

如果出现此问题，是因为当前用户没有此权限。

一些在线方法是删除。C:\Users\ user name \下的npmrc文件。这是不能做的，因为当那个文件被删除时，我们之前修改的全局模块目录和缓存目录配置将会消失！到时候vue包会下载到C:\ Users \ your username \ AppData \ Roaming \ NPM，这是默认的地方，我们再早修改也没什么意义。

正确的打开方式是以管理员身份运行！

s用WIN搜索“命令提示符”，右键以管理员身份运行。

npm安装vue -g

2. 安装webpack模板

npm安装webpack -g

另外，在webpack 4x以上，webpack将命令相关的内容全部放入webpack-cli，所以需要安装webpack-cli。

npm安装webpack-cli -g

输入webpack -v，如果能输出版本号，就说明一切都安装了。

3. 安装脚手架vue-cli

npm安装vue-cli -g

输入vue - version，如果能输出版本号，说明安装了。

4. 安装vue-router

npm安装vue-路由器-g

都搞定了。当我们打开自定义全局模块目录中的node_modules文件夹时，会发现所有安装的模块都统一在这里。

四、我的第一个的vue-cli应用程序

1.创建项目(最好是从cd到D或E的某个地方，也就是项目的路径，否则项目会在C:\Users\ user name \中新建，也可以直接在想要的项目路径下输入cmd)可能会出现权限问题，所以我们还是以管理员身份运行cmd窗口。

2.基于webpack模板创建vue应用程序

vuinit web pack项目名称

根据自己的需求来操作。

项目名称是什么？输入项目描述？输入作者？是否安装了回车编译器是否安装了回车vue-router y回车作为代码用单元测试工具检查是否安装了回车n回车单元测试相关n回车在创建回车后直接初始化。

因为没有自动初始化，所以我们根据代码提示手动初始化。

cd myvue

npm运行开发

访问网址：成功！

总结

这就是这篇关于Vue安装和配置的文章。有关Vue安装和配置的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。