Web前端开发从小白开始(一):vue.js开发环境搭建

vue现如今在前端中，是前端开发较常用的'm框架之一，人们简单，搭建开发环境也比较容易，今天先分享一下vue.js开发环境的搭建。

一，安装node.js

vue的运行是要依赖于node.js的npm的管理工具来实现，node可以在官网或者中文网里面下载，网址：http://nodejs.cn；根据自己的系统选择对应的版本安装即可，安装过程中选择默认的选项即可，安装路径可以安装在非C盘里面。

安装完成后，输入node -v,会输出node的版本号，

输入 npm -v,可以看到npm版本号

 

 

二，安装cnpm

淘宝的cnpm命令管理工具下载资源比较快，可以用cnpm安装搭建vue环境，安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org，安装完成后 输入cnpm -v可以查看版本，如果出现版本号，说明安装成功，提升找不到内部命令，需要添加环境变量，方法在下面。

三，搭建vue-cli脚手架

1，全局使用vue-cli脚手架，输入命令：cnpm install --global vue-cli  回车；等待安装完成。验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；如果提升不是内部命令，需要添加环境变量。

2，新建项目，输入命令：vue init webpack my-project  回车，my-project是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车即可，也可以根据自己的需要选择yes或者no。

3，项目创建完成后，输入： cd my-project 回车进入项目目录，安装依赖，输入命令：cnpm install。

4，最后输入：npm run dev，直接在浏览器输入localhost:8080就可以打开默认的模板了；到此vue开发环境搭建完成。

 

四，可能出现的错误

安装cnpm后 ，cmd命令行提示'cnmp' 不是内部或外部命令，也不是可运行的程序或批处理文件，出现这种情况，一般是系统配置环境的问题，在我的电脑中，全局搜索cnpm.cmd 找到对应的目录，添加到系统配置环境中。出现vue不是内部命令也一样解决就行。在我的电脑搜索vue.cmd，找到文件路径添加到环境变量中。