基于vue-cli脚手架生成vue项目

一、环境搭建

1、安装nodejs，从node.js官网下载安装，默认一直点下一步即可，输入node -v时，安装成功，新版的nodejs已经集成了npm,通过npm -v查看，如下图所示：

2、安装淘宝镜像（cnpm）

(1)输入命令

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

(2)输入cnpm -v 命令，查看安装结果

  cnpm -v

(3)、全局安装vue-cli脚手架

（1）、npm install -g vue-cli 或 cnpm install -g vue-cli

（2）、vue -v           //安装完成，查看版本号

二、vue脚手架创建vue项目

1、通过命令vue init webpack 项目名称，注：前面一直默认回车即可，vue-router可安装选【Y】；ESlint是es6语法验证的，如果你勾选可能会出现很多红色的格式要求，博主偷懒所以选择了【N】，哈哈；unit test单元测试、e2e端对端测试，根据个人项目情况选择；后面几默认回车，最后一个选择包管理工具进行下载安装依赖，我们选择npm ,然后他会自动安装依赖。出现的cd vue-first（进入项目目录），npm install (安装项目依赖)，前面已经自动安装了，所以不用手动安装了。

2、我们现在cd 到项目vue-first看一下目录结构

3.运行npm run dev即可运行，默认运行在8080端口，在浏览器输入http://localhost:8080即可打开项目页面。