vue安装

最新推荐文章于 2024-09-05 16:41:42 发布

weixin_34352449

最新推荐文章于 2024-09-05 16:41:42 发布

阅读量100

点赞数

文章标签： json webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011364070

版权

　　真的是超级心疼胖胖的自己。一个vue环境搭建了两天才终于搭建成功,我真的是个超级小白，几乎每次安装新软件的时候我都没有试过一次成功的，最喜欢的就是网上的安装教程视频，一步一步看着跟着来就会非常安心，但是这样好的福利真的是少之又少。下面分享一下这三天我的各种心酸史。
　　步骤各种教程和官网都已经写得非常的详细了，但是不同的用户去搭建的时候真的会出现各种各样不一样的问题。

以下是步骤：

1.在官网下载安装node.js LST是稳定长效版官网推荐是这个，current是当前最新版。选哪个版本都可以，看个人喜好。中文网的下载速度一般会快一点点。

2.node.js的安装全部选默认即可，安装路径可以根据自己的喜好修改。

3.安装好后node.js会自动配置环境变量。在 我的电脑=>高级系统设置=>高级=>环境变量=>Path，如果没有自动配置好环境变量的话，找到自己的安装路径自己加上即可。
nodejs环境变量自动配置

4.安装好后我们可以打开cmd 输入 node -v 可以查看当前的node.js版本；输入 npm -v 可以看到npm的版本。npm是node.js自带的一个包，不用担心不会安装npm

【这是坑】  
在安装的过程中，小白的我是看着官网的安装步骤一步一步来的。   
我很忧伤的在装完node.js后就直接顺着去输入了npm install vue ,但是随之而来的是一系列的报错。

！不能盲目的看到按顺序有什么指令就直接输入到cmd中。

！到这一步后一定一定不要输入npm install vue

！若没有输入请直接跳到第5点继续查看

vue官网教程

（下面都是坑，请不要跟着执行，这只是来自一个装了整整两天的小白的哀怨）

如：
① 没有creat package.json文件

百度后说，package.json文件是需要通过npm init 而来，   
而npm init -f则会直接创建一个已经有了基本格式的package.json文件。

②好不容易创建了一个package.json文件，我再次执行npm install vue命令，却给出提示说是

no such file 
 no directory
 no license……

③再次谷歌百度说可以自行修改package.json文件的内容。跟着网上的模板使得package.json文件不再是我理解的no such file ; no diretory ; no lecense后，再次输入npm install vue命令后，它说package.json文件已更新，no such file没有了！一阵欣喜！却看见依旧是 no directiory ; no license，宣告失败！

5.输入npm install --global vue-cli ，必须要以管理员身份运行cmd：

　　在多次的失败后快到凌晨两点，我就这样度过了我非常忧伤的安装失败第一天。这时候我毅然放弃了官网，投向了各个谷歌教程的怀抱。发现他们的安装教程中都没有npm install vue这一项。而是在安装了node.js后直接如上图官网第二行CLI里面的全局安装vue-cli。

在安装了node.js后，就可以使用npm直接输入命令npm install --global vue-cli ……如果这一步完成后，胜利的希望就即将到来了。不要输入npm install vue 命令！！！

　　但是，在输入npm install --global vue-cli后，数据一直在变动显示着正在下载文件真的兴奋得以为我要奔向了幸福的小康。结果输入如上的命令后，我的问题再次的回到了上面第四点的坑……

　　在看到网上安装成功的教程，我们可以看到安装成功后的vue-cli是在 C:\Users\用户名\AppData\Roaming\npm 的路径里面，而在cmd以用户身份执行安装的话，按照常理来说，vue-cli是安装在了 C:\Users\用户名\ 这个文件夹下。

于是重点又来了，要用管理员身份运行cmd后再输入安装vue-cli的命令。静静等待，在安装成功后输入vue就可以看到以下的信息了。

vue-cli成功后

6.vue init webpack my-project 创建项目

　　官网其实已经把安装步骤写得非常的简单有效，只是为什么会产生这么问题真的看rp。

　　紧接着我们就可以开始创建我们的工作项目了，进入到我们要创建工程的workspace后在cmd输入：vue init webpack vue-chapter3 ，vue-chapter3为自定义的项目名称
　　接下来的步骤可以查看这个链接玄木的基于vue-cli快速构建，一步步写得非常详细，跟着来准没错，在安装过程中也是多亏了这个链接的分享我的安装才得以成功。当然也可以继续看这里，它会出现下图内容由用户进行填写选择：

① project name 在输入vue init webpakc my-project 时就已经定义好了，但是所输入的文件名中不能够含有大写字母，否则会出现报错Sorry, name can no longer contain capital letters.原因可参考这里阮一峰老师的为什么文件名要小写
② Project decription 项目描述，初始化有'A Vue.js project' 可直接按回车键
③ Author 作者
④ Vue build 会让我们进行选择
Runtime + Compiler: recommended for most users 运行加编译，推荐给大多数的使用者。（我选择这个）
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 运行时版本
⑤ Install vue-router 是否安装路由（我：y）
⑥ Use ESLint to lint your code? 是否使用ESLint管理代码 (我： y)
⑦ Pick an ESLint preset 选择题（我：Standard）
⑧ Setup unit tests with Karma + Mocha? 是否安装单元测试(我： y)
⑨ Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 (我： y)

7.而下一个步骤是在进入我们创建的项目cd vue-chapter3(vue-chapter3是自己创建的项目名称) 输入这个指令:npm install来安装依赖

但在这个指令后，随之而来的又很可能会是一系列的问题。
①执行这个指令后我们会看到创建的工程下多了node_modules这个文件夹。

②而node_modules这个文件夹下也还有这大量的文件

node_modules文件夹内容

　　npm的速度是出了名的慢，所以如果一小会就下载完毕，并且有错误提示的话，一般都是下载失败的，并且还会出现一系列报错，并且百度也没有找到答案。

若有幸看到下图，真的要恭喜您！真的非常非常幸运一次便安装成功。
这是我在安装过程中遇到过的一些错误提示：

错误提示：

sha512-35+Asrsk3XHJDBgf/VRFexPgh3UyETv8IAn/LRTiZjVy6rjPVqdEk8dJcJYBzl1w0XCJM48lvTy8SfEsCWS4nA== integrity checksum failed when using sha512: wanted sha512-35+Asrsk3XHJDBgf/VRFexPgh3UyETv8IAn/LRTiZjVy6rjPVqdEk8dJcJYBzl1w0XCJM48lvTy8SfEsCWS4nA== but got sha512-FFN6FmosqLvvQiIHZwzd1YysmzmrY1BCdY49W2BVDP4ApuSQt4eUdi1OcZnDXzIQUI15UE9M5kmn9fxuxQ5bug==

sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw= integrity checksum failed when using sha1

sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y= integrity checksum failed when using sha1 ..

　　根据错误提示发现，是因为下载速度比较慢导致了文件的缺失而报错，重新下载即可。但是多次重新下载无果后，可以尝试一下下面两种方法：

① 使用淘宝镜像cmd输入 npm install express --registry https://r.cnpmjs.org/
② 换源 cmd输入npm config set registry="http://registry.npmjs.org"
（据说下载淘宝镜像可能会导致下载库不全，所以我选择了第二种方法。）

8.npm下载phantomjs失败时，手动下载phantomjs压缩包
　　当可以成功执行步骤7后，这是很可能会出现一个百分比的进度条并且维持0%久久不变或者永远到不了100%，并且提示 phantomjs not found 是因为我们在下载过程中会下载一个非常大的phantomjs的压缩包就很容易卡顿而导致下载失败。
　　我们可以在这个phantomjs下载网址中下载这个压缩包，手动放在C:\Users\用户名\AppData\Local\Temp\phantomjs的文件夹里面再次输入npm install重新安装依赖，进度条就会很快很快了！

9.最后在这个项目里面输入npm run dev就可以在我们的浏览器中看到我们的vue啦！

10.当需要再次创建新的工程时，只需从第6点开始再次执行一次即可。只要成功安装过一次后，后面的速度都会非常的迅速。

weixin_34352449

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue安装

　　真的是超级心疼胖胖的自己。一个vue环境搭建了两天才终于搭建成功,我真的是个超级小白，几乎每次安装新软件的时候我都没有试过一次成功的，最喜欢的就是网上的安装教程视频，一步一步看着跟着来就会非常安心，但是这样好的福利真的是少之又少。下面分享一下这三天我的各种心酸史。　　步骤各种教程和官网都已经写得非常的详细了，但是不同的用户去搭建的时候...
复制链接

扫一扫