教大家快速安装vue.js的运行环境。
一. 安装node环境
第一步当然是先去node官网去下载安装包。https://nodejs.org/en/download/ 然后选择自己的系统版本(我是win64) 图片如下:
按照windows一般应用程序,一路next就可以安装成功。
安装完成之后,大家一贯的风格就是想到去文件夹里面去找**.exe文件双击打开,大家请注意这里我们不要去双击打开如图下的node.exe这个我们暂时就不用管他了。
我们此时打开命令终端窗口输入cmd单击确定如图下:
现在我们就进行node环境测试,
我们再次进入nodejs官网https://nodejs.org/en/about/
复制红框中的代码并打开终端命令窗口直接输入node然后粘贴代码然后回车如图下:
会出现一下代码段 然后用浏览器访问 标红的地址
恭喜你说明你的node已经安装成功了, 测试也是没问题的。
我们node 安装成功了,通常我们也可以查看版本 来知道知否安装成功 命令:node -v 如下图:2
二. npm安装
安装完node之后,就要安装npm,由于许多npm包都是在国外,安装起来特别慢,所以我们这里 利用淘宝的镜像服务器,来对我们依赖的module进行安装。安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令。
三. webpack 安装
我们安装webpack 我们这里当下用于构建初始一个新项目,命令为:npm install -g webpack。
四. vue-cli 脚手架安装
接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架,命令为:npm install -g vue-cli。安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了。
五. 创建新项目
自己找一个合适的地方,新建一个项目文件夹,根据自己的需要命名,我的命名为 demo,然后,进入这个文件夹。也可以下载Git 打开此文件夹, 右键git bash here,进入到此文件夹。我这里依然是dos窗口如图:
输入:vue init webpack my-vue(项目文件夹名),回车,等待一小会儿,项目正在从git上下载,可按下图操作:
项目构建:
1.项目名称。 2. 项目描述。 3.作者 。 4.build 选择(键盘上下方向选择)第二项。 5.vue-router 因为我们项目组件之间需要router连接、通信等,所以我们这里建议启用。 6.ESlint 作用是简析es6语法书写规范等 ,我们这里也建议启用。 下面这这俩项的意思是要不要测试,我们这里不需要。最后我们根据最后三个命令来进入项目(cd my-vue)、安装项目依赖(npm install 这里也可以用cnpm)、运行项目(npm run dev)。
这样我们就新建完成了一个新的项目。
附言:
其实中间有很多步奏都可以省略掉,如果想三分钟安装新建一个新项目就可以省略掉node测试步奏,