Vue.js（读音 /vju?/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的方针是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不只易于上手，还便于与第三方库或既有项目整合。

下面介绍三种 Vue.js 的安置要领：

独立版本

我们可以在Vue.js的官网上直接下载vue.js,并在html中通过<script>标签中引用。<script src = ../vue.js> </script> 开发环境不要使用最小压缩版，不然会没有错误提示和警告！（页面中直接使用）

使用vue多页面开发：

引入vue.js
创建一个vue根实例 new Vue({选项})

使用CDN要领

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （国内不不变）          

unpkg：https://unpkg.com/vue/dist/vue.js, 会连结和 npm 颁布的最新的版本一致。（保举使用）

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="http://www.mamicode.com/https:/cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）

NPM要领（保举使用）

在用Vue.js构建大型应用的时候保举使用NPM安置要领，NPM能很好的和诸如Webpack或者Browserify模块打包器共同使用。Vue.js 也供给配套工具来开发单文件组件。

首先，先列出我们接下来需要的对象：

node.js环境（npm承打点器）

vue-cli 脚手架构建工具

cnpm npm的淘宝镜像

安置node.js

从node.js官网下载并安置node，安置过程很简单，一直点下一步就ok了，安置完之后，我们通过打开命令行工具（win+R）,输入node -v 命令，检察node的版本，若呈现相应的版本号，则说明你安置告成了。

npm承打点器，是集成在node中的，所以安置了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

到目前为止，node的环境已经安置完成，npm 承打点器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安置依赖包的时候掉败，所以我们还需要npm的国内镜像----cnpm.

安置cnpm

在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后期待，没报错暗示安置告成，（我的已经安置过了，显示更新告成的信息），如下图：

完成之后，我们就可以用cnpm取代npm来安置依赖包了。如果想进一步了解cnpm的，检察淘宝npm镜像官网。

 安置vue-cli 脚手架构建工具（必需在全局中进行安置）

在命令行中运行命令 npm install -g vue-cli ，然后期待安置完成。

是否安置告成：vue -V

webpack的版本盘问：webpack -v

通过以上三部，我们需要筹备的环境和工具都筹备好了，接下来就开始使用vue-cli来构建项目。
首先我们要选择存放项目的位置，然后再用命令行cd到项目的目录中，在这里，我选择在c盘下创建新的目录（NodeTest 目录），用cd 将目录切到该目录下，如下图：

在NodeTest 目录下，在命令行中运行命令 vue init webpack firstApp（初始化一个完整版的项目） 。解释一下这个命令，这个命令的意思是初始化一个项目，此中webpack是构建工具，也就是整个项目是基于webpack的。此中firstApp是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在NodeTest 目录生成该文件夹），如下图：

若我们在编纂器中已经手动创建了这个项目存放的文件夹cd到项目中：vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包：

是否是在本目录下进行创建

输入命令后，，会询问我们几个简单的选项，我们按照本身的需要进行填写就可以了。

Project name :项目名称 ，如果不需要变动直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest

Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git的作者，他会读取。

Install vue-router? 是否安置vue的路由插件，我们这里需要安置，所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和气势派头。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。

setup unit tests with Karma + Mocha? 是否需要安置单元测试工具Karma+Mocha，我们这里不需要，所以输入n。

Setup e2e tests with Nightwatch?是否安置e2e来进行用户行为模拟测试，我们这里不需要，所以输入n