vuejs开发环境搭建

前言：如今前端最火的是3个框架：react,vue,angular。能够说着是哪一个框架大大改变了前端的地位。相对于angular来讲。vue一样拥有丰富的指令，而且都是典型的MVC框架，可是vue比较轻量级一些，最主要的是，它是中国人写的。别看这是中国人写的框架，在国际上照样获得了不俗的评价。

 

咱们在开发大型vue项目的时候，一般会搭建一些开发环境，今天就来详细的写一下搭建环境的步骤吧

 打开你的命令提示符（window+r），输入cmd

 

第一步：准备工做

首先，你必需要确保本身的电脑上装了node和npm，这里须要注意的是，

因为 npm 安装速度慢，因此使用了淘宝的镜像及其命令 cnpm，安装命令：

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

　咱们再来检查一下npm的版本：

npm -v　

npm 版本须要大于 3.0，若是低于此版本须要升级它：

cnpm install npm -g

这样咱们的准备工做就绪了之后，准备开始咱们的环境搭建

 

第二步：安装vue

咱们首先须要安装vue，命令以下：

cnpm install vue

安装完成以后，咱们能够试一下vue命令（即单纯输入vue），若是不报错，则vue安装成功，否则从新安装

 

第三步：全局安装vue-cli

这里须要注意一点，安装默认的是C盘，可是我不想把项目安装到c盘，此时，在这个地方咱们须要进入到咱们想安装的所在地，即命令行当中的:

cd 你想要的地址

这个时候执行

cnpm install --global vue-cli

 

第四步：建立一个基于 webpack 模板的新项目

命令以下：

vue init webpack my-project

此时咱们一直回车就能够了，遇到y/n的时候直接y　

这个时候再咱们的文件当中会出现一个文件夹：

　

这个就是咱们经过命令行下载的webpack模板

 

第五步：安装vue的项目依赖

咱们在以前搭建postcss或者gulp的时候，都用到了项目依赖，vue也不例外

首先，进入到咱们的项目总，即my-project

cd my-project

执行依赖下载命令

cnpm install

我在这里用了npm，由于cnpm总是失败的缘由

这里我刚开始安装的时候老是报错，多安装几遍便可，安装完成之后，在你的my-project里面会多一个依赖的文件夹，以下：

 

第六步：运行vue

运行以下命令：

cnpm run dev

　　

恩呢，此时随便找个浏览器，输入localhost:8080便可：

如果此页面，则说明你的vue环境已经搭建成功了。