vue模板:手把手教你加载外部vue模板

目录

一、前言

二、操作步骤

三、问题及解决

1.npm install安装时一直停留在idealTree:npm: sill idealTree buildDeps

2.许多vue模板都会让你先需要有先在gitHub的SSH通行证，以及对应的node版本。

3.npm安装依赖报fatal: unable to connect to github.com

4. npm安装依赖报错 Invalid dependency type requested: alias

---

一、前言

许多时候，直接学习开源的vue模块，可以让我们迅速的掌握各种各样的技能，但是对于许多小白来说，甚至是第一次接触vue的小伙伴，他们对于如何加载vue页面也不是很清楚，相比较传统的文件结构，vue会有些许的小变化，那就让我们一起来学习如何打开外部导入的模板吧。

二、操作步骤

1.首先需要去市面上下载能够打开vue文件的软件，比如vscode等。

2.进入vscode,打开文件夹，然后打开终端。

3.在终端，我们需要进入到所需要加载的目录文件路径下，一般打开文件夹后进入的路径就是正确的，如果不正确那么就用cd命令调节到指定目录即可。然后运用代码 npm install 进行相关配置文件的下载。

4. 最后，运用代码npm run dev 来运行，最后会出现一个链接，最后点击即可。

5.到这里恭喜你学会了！！但是，但是，但是（重要的事情说三遍）我们在加载的时候，往往不会有这么顺利，通常会有版本不一致等问题，相信很多人和我有一样的困扰，那小编就带大家一起梳理一下各种问题的解决办法吧。

三、问题及解决

1.npm install安装时一直停留在idealTree:npm: sill idealTree buildDeps

Ⅰ这种情况有两种原因，一个是内部缓存需要解决：

①进入C:\Users\{账户}\，删除用户界面下的npmrc文件

②.使用npm cache verify清理内存

Ⅱ 设置镜像源：npm config set registry https://registry.npmmirror.com，这里要注意，网上许多都叫你设置为https://registry.npm.taobao.org，这个镜像源已经过期了，上面那个就是它最新的镜像源。查看下是否设置成功：npm config get registry

2.许多vue模板都会让你先需要有先在gitHub的SSH通行证，以及对应的node版本。

比如这个就是说你还没有gitHub的通行证。这里可以参考这位大佬，很详细：GitHub SSH设置与Permission denied问题解决方法_load key "/users/raindandelion/.ssh/id_rsa_github"-CSDN博客文章浏览阅读3.3k次，点赞7次，收藏8次。1.配置个人信息git config --global user.name "你的username"git config --global user.email "你的邮箱"2.生成公私密钥对ssh-keygen -t rsa -C "邮箱地址"# eg:$ ssh-keygen -t rsa -C "example@qq.com"Generating public/private rsa key pair.# 这里需要注意 如果使用默认路径和名字为id_rsa则直接按下回车就可以，如果_load key "/users/raindandelion/.ssh/id_rsa_github": permission deniedhttps://blog.csdn.net/sinat_39000828/article/details/120494717

这是node官方给出的node和node-sass对应的版本表。我建议大家使用nvm来进行管理node，会方便的多。大家可以参考这位大佬：

NVM的安装使用与配置（node, npm, yarn）_nvm安装教程-CSDN博客文章浏览阅读2.3w次，点赞52次，收藏272次。安装nvm之前先卸载node，win+r：cmd，node -v 查看node版本和存在，在 控制面板→程序与功能 中找到node卸载，或uninstall。5、如果你本地已经有node版本，安装时nvm就会提示，点击“是”即可。分别对应的是全局缓存路径和全局安装路径，初次配置不会有这两个配置项。3、选择nodejs路径：创建nodejs文件夹放在E:\NVM下。2、点击next，选择nvm安装路径：E:\NVM\nvm。下图已经配置过全局缓存路径和全局安装路径，其中。已管理员身份运行命令提示符。_nvm安装教程https://blog.csdn.net/ppz8823/article/details/130862191

3.npm安装依赖报fatal: unable to connect to github.com

这个就是头部没有http的原因，按如下修改即可：

git config --global url."https://".insteadof git://

4. npm安装依赖报错 Invalid dependency type requested: alias

这说明npm需要更高版本的npm，大家可以按如下进行操作:

查看npm版本，如果是6.4.1就不行

npm --version

查看可用的node版本：（这里前提是需要安装nvm，上面有步骤教学）

nvm list

建议使用12.16.2及以上版本，如果没有可以下载：

nvm install 12.16.2

查看版本是否下载成功，使用版本：

nvm list

nvm use 12.16.2