使用vue.js 开发时一般会使用两种方法：

1. 直接html文件中用script标签引入vue.min.js
2. 使用vue-cli搭建项目

使用第二种方法时，需要安装node.js，vue，vue-cli等搭建一个完整的环境。

搭建

安装node.js

下载地址
从官网下载直接安装就好，下一步一直点，安装比较简单

安装node.js的目的主要是使用它集成的npm包管理器

安装cnpm

cnpm是淘宝的npm镜像，官方地址,他们就是同一个东西，可以将npm理解为刺激战场海外版，因为npm的资源有些是国外的，我们无法访问，而cnpm就是和平精英，速度快，资源都能用。

通过npm指定源来安装cnpm

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

注意： 如果node.JS 安装在c盘，请用管理员权限执行上诉语句，避免出错。

安装Vue-cli

使用cnpm安装vue-cli

cnpm install -g vue-cli

区别

在开发过程中，也许会有疑问我为什么不直接使用第一种方法而是要费力搭建一个完整的环境呢？
包管理方便
在开发一个小demo的时候直接引入固然好使，但是等到应用需要的库和框架多起来，一个个从html里引入就相当不方便。因此通过vue-cli搭建起来的项目具有清晰的目录结构，同时node.js的npm也可以帮助开发者方便的使用各种依赖包。
测试方便
通过vue-cli构建的项目，自动地帮助开发者安装了express服务器，用以模拟在真实服务器上的效果，方便测试。

VUE是一个js的前端框架，因此只能在服务器上运行，只要有一个静态文件服务器能通过http访问到其他资源文件。

构建项目

环境搭建好后就可以构建项目了，这里也有两种方法：

1. 通过IDE工具构建项目
2. 通过命令行构建项目

两种方法没有什么区别，只是构建方式不一样而已，而我一般选择通过IDE比如是IDEA、webstorm来构建项目，对我来说相对更加快捷方便。

IDE构建

创建一个新项目

配置项目目录，解释器和vue-cli目录

之后也是一些项目配置诸如项目名称，说明，作者之类的，跳过

选择vue代码风格

之后就是配置单元测试之类的，可以默认也可以按需求选择，最后点击finished就算构建成功了。

命令行构建

• cd到要存放项目的目录 比如 cd d:demo
• 使用命令构建项目 vue init webpack projectDir webpack是一个模块打包器
• 安装项目依赖 cnpm install
• 运行项目 npm run dev
• 测试 在浏览器输入 http://127.0.0.1:8080 就可以进入项目初始页面

生成项目

使用 npm run build就可以构建项目

它会在项目目录下生成dist文件夹，将里面的文件放在http服务器就可以了。