vue安装构建

【PS:来自一年后看到这篇文章的自己 感觉废话真的是太太太太多了】
下面是这整篇文章的简易版,如果遇到些其他的搭建问题的话,再滚动鼠标到下面看吧!

  1. 默认选项安装node.js (一般会自动配置环境变量)
  2. 安装完毕后,以管理员身份运行cmd进入自己要创建vue项目的目录输入npm install --global vue-cli
  3. vue init webpack my-project
  4. 进入创建项目位置输入:npm install
  5. 最后输入npm run dev启动项目

真的是超级心疼胖胖的自己。一个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点开始再次执行一次即可。只要成功安装过一次后,后面的速度都会非常的迅速。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容