Windows10 下安装Vue以及遇到的一些问题

Vue安装

Vue是国内开发的一种前端框架,在国内应用非常广泛,本人最近在学一些前端框架相关的东西,于是选择了vue这个框架,下面与大家分享一下安装过程中遇到的一些问题以及解决方法。

Node.Js安装

要安装Vue,首先必须要安装node.js(注意:要用node.js安装Vue,必须要node.js版本在6.0.0及以上才行)。下面附上node.js下载地址:https://nodejs.org/en/
如下图所示:可以下载右边的最新版,也可以下载左边的稳定版本
下载好后一路next傻瓜式安装,然后配置环境变量就可以了。

Vue安装

现在安装的node.js里面一般自动安装了npm。安装好node.js之后进入命令行页面,快捷键Windows+R,输入cmd回车,如下图所示:
首先输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.orgi 选择淘宝NPM镜像下载安装(因为淘宝NPM镜像是国产的,下载起来更快,想了解详情请看 https://npm.taobao.org/ )如下图所示

然后输入命令cnpm install -g vue-cli 安装Vue,如下图所示:

安装完成后可以查看vue的相关信息:

安装时遇到的问题:Node.Js版本过低

如果是之前就已经安装过node.js的小伙伴安装Vue时要注意node.js的版本,如果版本过低会出现如下情况:
在这里插入图片描述
这时需要我们去更新node.js的版本,node.js下载地址前面已经提供了,下载之后重新安装,注意安装目录要覆盖之前的安装目录,与环境变量中的目录一致。
安装好后输入命令node -v可查看当前的node版本。
由于Windows不支持n模块,所以只能自己下载新版本并重新安装,如果电脑支持n模块的小伙伴可以直接在命令行中通过命令进行更新,这里就不详细讲了。

项目创建于运行

安装好Vue之后就可以开始我们的vue之旅了,首先要在命令行中创建一个自己项目:
第一步:确定一个文件夹用于保存自己的项目:我创建了一个名为VueWorkSpace的文件夹用于保存自己的项目。
在这里插入图片描述
第二步:在命令行中cd 进入该文件夹cd D:\WorkSpace\VueWorkSpace
在这里插入图片描述
第三步:输入命令vue init webpack my-vue创建一个项目,其中“my-vue”是自己的项目的名字后面也可以指定。在下图中箭头所指处可以输入项目的名字,可以跟命令中的不一样,以此处为准。
在这里插入图片描述
输入名称后回车,也可以不管直接回车,名字就是上面命令中的名字。回车后又会出现下面几个问题,除了下图中标注出来的以外都可以自己编辑或者直接回车不管他。
在这里插入图片描述
上图中箭头指出来的那一项最好选择N,因为这一项是选择检查代码以及报错的,如果选择Y,那么在代码中即使你只敲错了一个空格,他也会报错,很难受。创建好后如下图所示:
在这里插入图片描述
第四步:进入自己创建的项目目录下,运行自己的项目:
输入命令:cd my-vue进入自己的项目的目录,其中"my-vue"是自己的项目名。
输入命令:npm run dev运行自己的项目。
这样我们创建的项目就运行起了。
在这里插入图片描述

安装Vue中的问题:ChromeDriver不可用

在执行命令 vue init webpack my-vue时可能会出现下面的问题:
在这里插入图片描述
显示ChromeDriver不可用,这时你可以去下载对应版本的Chromedriver并保存到上图中最后一行指定的目录中,也可以不管他,因为命令运行到这里时如果出现这个问题会在这里停留几分钟,如果不管他,他还是会继续执行创建项目,并且会报错,但项目还是能成功创建。如下图所示:
在这里插入图片描述
这时我们通过cd 进入我们创建的项目目录下,执行命令cnpm install或者npm install安装依赖,如果创建过程中没有报错可以省略这一步。然后执行npm run dev运行项目。

最后

总之我遇到的问题目前就这些,还有其他问题的小伙伴可以去其他地方找找看。
上面提到的创建项目的方法是比较全面的一种,还有另一种创建项目的方法,这种方法创建的项目更简单一些,项目中的文件也没有前一个方法的多,在一些轻量级的项目中更为方便,这种方法的命令是vue init webpack-simple my-vue(my-vue为项目名)。这种方法比较简单,而且不用选择前一种方法中的检查代码的那个选项,只要一路回车下来就行了。

发布了3 篇原创文章 · 获赞 1 · 访问量 286

猜你喜欢

转载自blog.csdn.net/Z_X_L_/article/details/97136122