VUE快速搭建vue开发环境的步骤
本篇文章介绍怎样快速搭建一个本地VUE开发环境,vue是目前非常火的一个前端框架,和Angular、react并驾齐驱,好了不多说了,进入正题。
1、首先要安装node.js
因为vue的运行是要依赖于node的npm的管理工具来实现的,可以到node.js的官网下载node.js,下载地址:https://nodejs.org/en/下载对应的版本安装,这里我选择是64位系统,如下图所示。
安装好node之后,dos窗口输入node -v,npm -v 命令会出现如下界面,说明安装成功
2、安装淘宝镜像,
这里说下为什么要安装淘宝镜像,因为在国内用npm的包管理工具是非常慢的,淘宝的cnpm命令管理工具可以代替默认的npm管理工具
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装vue脚手架
安装好淘宝镜像之后,安装vue脚手架,
输入命令:cnpm install --global vue-cli,安装完成之后输入命令vue出现如下界面说明脚手架安装成功
4、创建一个新的项目
搭建完脚手架之后就可以创建一个vue项目了,建议不要装在系统盘,我是装在F:\VUE下面,在此目录下打开dos命令行工具
输入命令:vue init webpack my-project,创建项目会有一些配置项,ESLint,unit tests, e2e, 都可以选择no,暂时用不到
5、更新依赖,运行项目
输入命令:cd my-project回车,进入到项目目录。再输入命令:cnpm install,回车安装项目需要的依赖,安装完成后输入命令:cpnm run dev,运行项目出现如下图所示,即代表项目运行成功:
6、访问项目:
浏览器输入localhost:8080回车即可,默认的端口是8080,下图所示就是项目的首页面: