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

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

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

:

目录

1.下载并安装Vue 2。创建全局安装目录和缓存日志目录3。配置环境变量1。环境变量-用户变量-选择路径-单击编辑2。环境变量-系统变量-新建3。安装vue1。安装vue.js2安装webpack模板3。

一、下载和安装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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: