VUE的安装

发表于

我的版本如下所示

img

这是以前我的电脑就配置好的，具体怎么装俺也想不起来了，可以上网搜搜其他教程，注意配置环境变量和用户变量噢~

开始安装

先贴出来我滴参考文章吧！

《用webstorm搭建vue项目（亲测，绝对实用）》

大哥写的不错，也包含了安装nodejs和npm的过程，大家可以借鉴一下。下面是我的安装过程

  • 安装淘宝镜像-cnpm

这类似与npm的国内镜像源，用它下载会变快一点点~

安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

验证命令：cnpm -v

返回如下内容则安装成功

img

如果你一下就成功了，那我恭喜你。我本人输入验证命令时遇到了报错

‘cnpm‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。

上网找了很久，总结出来报错原因应该是：没有将cnpm的执行路径添加到windows环境变量中

好，那现在问题就变成了cnpm在哪里执行捏？

首先，cnpm一般会下载在你安装的nodejs的文件夹下。按照网上的说法，有一些人的cnpm.cmd会在这个↓文件夹下，不知道大家的在不在，反正我是没有

（注意是cnpm.cmd不是普通的cnpm噢）

img

找了半天我也不知道网上博主们的cnpm.cmd是哪来的，正发愁的时候突然发现他就在前几层的文件夹（node_global）下诶

img

那现在问题就很简单啦，由于原因是：没有将cnpm的执行路径添加到windows环境变量中，现在我们只需要在用户变量的Path中添加cnpm.cmd所在的路径即可！

img

现在，我们再去用验证命令来验证，就会得到正确的结果啦

  • 安装webpack

安装命令：cnpm install webpack -g

验证命令：webpack -v

如果出现

We will use “npm” to install the CLI via “npm install -D”. Do you want to install ‘webpack-cli’ (yes/no):

直接回车（即默认no，选择yes会报错），然后执行

npm install webpack-cli -g

  • 安装Vue

安装命令：cnpm install vue -g

  • 安装Vue命令行工具，即vue-cli 脚手架

安装命令：cnpm install vue-cli -g

验证命令：vue -V (V要大写！)

img

这样我的vue就安装好啦，但是做到这里安装的vue-cli应该是2.9.6版本噢，我后续又进行了更新，下文会写！

Vue-Cli更新

参考的文章是

《如何升级Vue的版本 vue2.9.6升级到vue3.0》

  • 首先卸载老版本vue2.9.6

执行命令：npm uninstall vue-cli -g

  • 再安装新的vue

执行命令：cnpm install -g @vue/cli

完成！现在再输入vue -V就可以检测到新版本的vue了

WebStorm创建Vue项目

在新建项目是选择Vue.js即可，系统会自动去寻找电脑中的Node解释器和Vue CLI

img

点击创建，就可以开始创建新项目了。这时我的电脑又报错了。。。

npm ERR! code EPERM
npm ERR! syscall mkdir
…

具体啥意思捏？咱也不知道。反正就先把报错信息甩给bing让他搜去吧。

bing告诉我：《npm安装报错（npm ERR! code EPERM npm ERR! syscall mkdir…）》

文中提到两种方法，抱着能输命令就不找文件的原则，我先试了第二种

npm cache clean --force

失败了哈哈哈，提示我不能删除之类的（即使我已经以管理员身份运行）

然后回过头看第一种，这次倒是根据文章很顺利的找到了.npmrc文件（C:\Users{账户}\下的.npmrc文件），直接delete，再次运行，问题解决（已经删完了没法给大家截图了，莫得办法）

经过一段时间的等待，WebStorm终于创建好了Vue项目，项目结构如下

img

这时候有人就要问了：“你怎么知道你安装的vue版本呢？” 检测vue版本可以在我们的webstorm的终端中输入npm list vue来查看（不在项目下输入可能会报错）

img

也可以在package.json文件中的"dependencies"下查看

img

后面再更新Vue的教程~