快速搭建vue开发环境

本文旨在快速搭建vue开发环境,方便后期的学习和开发

一.下载安装node.js

vue的运行环境需要依赖于node.js的npm管理工具
官网: http://nodejs.cn/download/
下载msi文件,傻瓜式下一步即可,注意选择软件安装目录,尽量不要放在c盘下

安装成功后需要配置环境变量中的path变量,将刚才nodejs的安装目录新增在path变量下,最后验证安装是否成功,打开cmd窗口,输入node -v和npm -v命令,如下图所示:

配置npm在安装全局模块时的路径和缓存cache的路径(如果这里不配置那么在npm执行全局安装命令的时候默认会安装在C盘,不方便管理且占用C盘空间)
在刚才nodejs的安装目录下新建两个文件夹node_cache和node_global

打开cmd窗口,执行如下两个命令:

npm config set prefix "安装目录\nodejs\node_global"
npm config set cache "安装目录\nodejs\node_cache"

执行npm config ls 命令验证刚才命令是否成功:

最后一步,修改环境变量
新建系统变量

修改用户变量Path

测试安装是否成功,打开cmd窗口执行npm install webpack -g命令,安装成功后查看刚才设置的两个文件夹下是否生成了对应的webpack文件


到此nodejs就安装成功

二.使用淘宝 npm 镜像定制的 cnpm命令行工具代替默认的 npm

npm 是随同 nodejs 一起安装的包管理工具，我们经常使用它来下载第三方包到本地,但是在国内使用npm下载第三方包速度很慢,所以我们在这里需要替换为淘宝npm镜像
打开cmd窗口并执行:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

执行完毕后,我们就可以使用cnpm命令安装第三方包

三.使用cnpm命令安装vue-cli脚手架

打开cmd窗口执行命令:

cnpm install --global vue-cli

可以在控制台输入vue命令,如果出现vue的相关信息,说明vue-cli安装成功

四.新建vue项目

项目尽量不要新建在c盘,可以切到任意目录下打开cmd窗口执行命令:

vue init webpack 项目名称

一直回车,直到出现是否要安装vue-router

这个我们在项目中会用到,所以选择y回车

这里会提示我们是否需要js语法检测,我们用不到,所以选no,后面也是我们用不到的可以直接选no,后面在直接回车就好,然后就可以开始安装了


切换到vue项目目录下,因为各个模板之间是相互依赖的,所以我们现在需要安装依赖,输入命令: cnpm install

最后执行npm run dev命令
出现以下画面就说明你的vue项目已经运行成功了

下一期将对vue项目的目录结构进行说明