vue入门(二) 使用nodejs，webpack，vue-cli搭建项目

在上一篇文章中已经介绍过用cdn的方式使用vue。这次改为在nodejs中搭建vue项目。

在nodejs环境和各种工具的帮助下你可以使用ES6语法，组件，模块来开发web应用，使前端开发更加工程化。

一、安装nodejs

打开nodejs官网

选择左边推荐版本 ，下载安装。

安装完成后，打开CMD，输入node -v ，检查是否已经安装成功。显示版本号即表示成功安装了。

 这里要插入介绍一下 npm（node package manager）node自带的包管理器，可简单理解为它是帮助你下载安装或卸载包的工具。

输入 npm -v 可以检查npm版本

 注意：我是已经安装过的了，版本号可能和大家下载的不一样。 

 二、安装vue-cli

vue-cli是搭建vue项目的脚手架。使用它可以快速形成项目的基本结构。

用npm全局安装vue-cli

 install 即安装，“ -g ” 代表全局安装。

安装完vue-cli后可输入 vue -V  查看版本，注意这里的 “ -V ” 是大写的V。

 注意：我是已经安装过的了，版本号可能和大家下载的不一样。

 三、创建项目

 使用vue-cli 创建项目

使用 vue init webpack my-project  my-project 是自定义的项目名字，webpack指用webpack来打包

这时候已经下载了项目基本模板，但是没有安装依赖，所以还不能运行。

转到项目文件夹 cd my-project

安装依赖 npm install 

稍等一会儿，可能会有点点慢。

如果实在是慢的不行，可以改用淘宝映射

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

安装完后，就可以运行啦。

使用 npm run dev 或者 npm start 

这是正在运行中。

显示这个界面时就已经可以了，在浏览器打开 http://localhost:8080 

这样就已经运行你的第一个vue项目了噢，很简单吧。