安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程

    • 第一步:安装node.js
    • 第二步:改变npm本地仓库目录
    • 第三步:配置淘宝镜像站
    • 第四步:安装vue
    • 第五步:构建一个新的vue项目
    • 附:在开发工具中启动新创建的vue项目

搭建vue开发环境的时候在网上找了几个教程,还是遇到了几个坑,所以写下这篇可以让你从零开始一步一步跟着本篇博客搭建好环境,顺利直接进行vue开发的步骤。

第一步:安装node.js

先去官网下载node.js,如下图,根据自己的电脑选择安装包下载,我的电脑是windows 64位的,所以选了下图红色框的。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第1张图片
下载完成之后,点击下载好的安装包进行安装,安装过程全部直接点next,不用勾选其他,直到安装完成
安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的node.js版本
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第2张图片
node.js自带npm(包管理)安装完成之后,npm本地仓库默认在 C:\Users\Administrator\AppData\Roaming 目录下。注:有的电脑会自己隐藏文件夹,可以复制上面的目录地址在自己电脑上直接进入。看到如下图的两个文件夹:npmnpm-cache
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第3张图片
接下来就是将上面的npmnpm-cache移动到node.js的安装目录下。靠命令来移动!不是手动移。跟着下面第二步来移动

第二步:改变npm本地仓库目录

1.先找到自己的node.js安装目录,不记得安装目录的,可以在dos窗口输入where node查看。如图:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第4张图片
可以去这个目录下看以下是否有node.js,如图都是有的
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第5张图片
2.现在在node.js目录下手动新建两个名字为node_cachenode_global空文件夹,注意是空的文件夹,如图:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第6张图片
3.输入命令移动文件夹:cmd中执行npm config set prefix "D:\Program Files\nodejs\node_global"回车,然后继续执行命令npm config set cache "D:\Program Files\nodejs\node_cache"。命令里面的目录写自己刚在nodejs安装目录下创建的node_cachenode_global目录,两句都比较长,可以在第一条执行完之后,按键盘↑键,然后对着改一下确保正确也行。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第7张图片
4.执行之后,继续输入命令npm list -global,查看npm本地仓库,如图即为目录已改变。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第8张图片

第三步:配置淘宝镜像站

1.在cmd窗口,输入命令:npm config set registry=http://registry.npm.taobao.org,配置淘宝镜像站,主要好像是用来提升速度。然后执行命令npm config list查看配置。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第9张图片
2.检查配置的镜像站是否可用的两个命令npm config get registry或者npm info vue,如下图,npm info vue的执行结果太长我把配套的命令写在下面了便于截图
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第10张图片
在这里插入图片描述
3.更新npm:执行命令npm install npm -g,等待几分钟执行完。如图即为更新成功。执行命令npm -v查看npm版本是否更新。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第11张图片
4.查看global模块,执行命令npm list -global命令会看到模块下面不为空了,直接去文件夹下面也可以看到多了很多东西。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第12张图片

因为上面的操作,默认模块的D:\Program Files\nodejs\node_modules目录将会改变为D:\Program Files\nodejs\node_global\node_modules,直接执行npm install命令会报错,所以需要配置环境变量。
在计算机–>系统属性–>高级系统设置–>环境变量中进行配置:
添加D:\Program Files\nodejs\node_modules
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第13张图片
同时在path中添加:D:\Program Files\nodejs\node_global;如果path中结尾没有";"分号,要记得先加个分号再加目录
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第14张图片

第四步:安装vue

1.在cmd窗口输入全局安装vue命令npm install vue -g进行安装,如下图:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第15张图片
我这里是隔了几天补写的,我在操作这个的时候已经安装过了,所以执行命令后会出现 update 1 package,正常第一次安装应该是执行命令后出现added 1 package
安装完成之后可以在node.js/node_global/node_modules下面找到vue目录
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第16张图片
这里的dist(distribution)是最终发布的产品,最后vue项目打包发布会生成一个这样的dist文件给我们来发布,这个后面写部署的时候补上说明。

2.安装vue-router,这个差不多是使用vue开发很常用的,所以一般使用全局安装。在cmd窗口输入命令npm install vue-router -g进行安装。如图:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第17张图片
安装完成之后同样可以在node.js/node_global/node_modules下面找到vue-router目录。跟上面vue目录同级,就不放图了。

3.安装脚手架:在cmd窗口输入命令npm install vue-cli -g并执行。如图:(在网上有看到用npm install -g vue-cli安装脚手架的。试了下执行结果是一样的,选其一就好,我还是习惯与前面保持一致吧,如果两个命令有区别后面发现了补充。)
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第18张图片
这里vue一般需要的东西就安装完毕了。

第五步:构建一个新的vue项目

1.首先找到一个你想存放项目的盘符,在盘符下面或者你想存放项目的文件夹下,创建一个空的文件夹,比如vueDemo。然后在cmd窗口里通过cd命令到这个空文件夹目录下,如图:我在E盘下创建了一个vueDemo的空文件夹
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第19张图片
2.在cmd窗口到达项目目录后,继续执行命令vue init webpack vueDemo来新建项目。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第20张图片
到达上图步骤之后,确认无误,继续按Enter键,项目开始构建。构建完毕如下图:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第21张图片
3.初始化项目:在cmd窗口到达项目路径下这里的项目路径是上一步中的project Name下,就是要到你的项目下,去运行项目,执行命令npm install,这里需要等待一会,如果安装了cnpm 可以用cnpm install,会比npm快很多。cnpm用的就是淘宝镜像站,如果跟着我上面的步骤来,就是配置了的。推荐用cnpm install
执行后结果如下:下面是用npm installcnpm install两种命令的执行结果。执行一个就够了。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第22张图片
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第23张图片
4.运行项目:继续在上图的窗口中执行命令cnpm run dev,如果没有配置淘宝镜像站就是npm run dev,运行后如下图所示:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第24张图片
运行完毕会出现项目的地址,如下图所示:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第25张图片
在浏览器输入该地址即可看到目前的项目,如图:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第26张图片

附:在开发工具中启动新创建的vue项目

我目前使用的是idea,就只用idea举例了。
1.点击左上角File-Open,弹出弹框,在弹框中找到刚创建的那个vue项目,点击OK:
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第27张图片
我一直没有关闭这个弹框,因为我前后台都做,需要前端和后端在不同的窗口好操作,所以我选的是New Window
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第28张图片
然后打开了新的idea窗口,等待加载完毕。
2.项目加载完毕如下图:还有一些目录我这边当时构建项目没有选的,所以就没有在我项目里显示。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第29张图片
3.启动vue项目:点击idea窗口左下角的Terminal,输入命令cnpm install,等待执行完毕后继续输入命令cnpm run dev
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第30张图片
如上图可以看到运行项目的地址,直接点击(或者在浏览器输入地址)可以到浏览器看到运行的项目。
安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程_第31张图片
到这里就全部搭建完毕啦,可以开始开发工作了。关于vue的开发及编码,后面慢慢补充。
写这篇花的时间很长,中间有间隔一段时间,如果写的有什么不足欢迎提出来我修改。目的是为了减少跟我一样的小白,在从0开始搭建vue环境并创建vue项目的时候遇到各种坑。

你可能感兴趣的:(vue)