vue学习(一):vscode安装Vue是遇到的问题

时间:2024-04-03 09:47:48

在vscode上安装Vue是,遇上了一些问题,我把它记录下来。或许我的这篇文章对以后有需要的人能够提供一些帮助。

在网络上查询的安装Vue的教程是

一、安装node.js

本机环境:Windows 10 家庭版 x64

 

1.1、下载安装包
Node.js 官方网站下载:https://nodejs.org/en/

选择操作系统对应的包:

 

vue学习(一):vscode安装Vue是遇到的问题

下载完成,安装包如下

vue学习(一):vscode安装Vue是遇到的问题

1.2、安装
打开安装,傻瓜式下一步即可:

vue学习(一):vscode安装Vue是遇到的问题

选择安装位置,我这里装在D盘下:

安装成功,文件夹结构如下

vue学习(一):vscode安装Vue是遇到的问题

 

 

1.3 配置环境变量

将node.js安装目录下的node_modules文件所在目录添加至系统环境变量path中:

vue学习(一):vscode安装Vue是遇到的问题

完成!这样的话vue就可以顺利的跑起来了。

二、安装vue及依赖

这里可以在两个地方安装

2.1在vsCode中的Terminal下安装(在这里我遇到了一些问题,配置好node.js的环境变量之后,情况还是和之前没有安装node.js一样,显示不能识别npm,而后我就以为是环境变量没有配置好,所以就在cmd下安装了vue,也就是我下面要提到的第二种安装的地方。但是我重启电脑之后,突然又能够识别了,我都觉得很神奇),下面是执行过程

执行npm命令安装webpack

npm install webpack -g

vue学习(一):vscode安装Vue是遇到的问题

再安装vue

npm install vue vue-cli -g

vue学习(一):vscode安装Vue是遇到的问题

现在就能在vscode的目录中看到创建好的node_modules文件啦

vue学习(一):vscode安装Vue是遇到的问题

2.2 如果在vsCode的terminal下显示不能识别npm指令的话,也可以选择在我们电脑自带的cmd上进行下载

首先输入npm进行一下测试,有显示的话说明node.js就安装成功了

 

vue学习(一):vscode安装Vue是遇到的问题

执行npm命令安装webpack

npm install webpack -g

vue学习(一):vscode安装Vue是遇到的问题

再安装vue

npm install vue vue-cli -g

vue学习(一):vscode安装Vue是遇到的问题

三、创建vue项目


创建vue项目必须能够访问互联网,因为创建vue项目的过程中需要下载vue的模板。

vue init webpack vue001

等待下载vue的模板,然后会等等用户做一些选择,全部回车即可,然后开始下载项目的依赖,等待项目创建完成。

现在就能在C:\Users\Administrator目录下看到创建好的vue001文件啦

vue学习(一):vscode安装Vue是遇到的问题

cd vue001

npm run dev

打开浏览器, 输入 http://localhost:8080  即可访问刚刚创建的vue001项目的界面了,如下图所示

vue学习(一):vscode安装Vue是遇到的问题