[TOC]

什么是 Vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 本身具有响应式编程和组件化开发的特点。
详细介绍请移步Vue中文官网

安装 vue.js

方式一：script标签直接引入

1、独立版本

直接下载 vue.js 并通过 <script> 标签引入
vue.js 下载地址

<script src="vue.js"></script>
2、CDN

推荐使用 unpkg 会保持和 npm 发布的最新的版本一致。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

方式二：npm安装

cmd下执行以下命令

#查看npm版本（没有的请自行安装）
npm -v

#安装cnpm(这个速度快点)
npm install cnpm -g

#安装vue
cnpm install vue

#安装vue-cli
cnpm install --global vue-cli

#查看vue版本，显示正常显示，安装完成
vue -version

创建第一个vue项目

1、标签引入的方式

示例代码 helloVue.html ：

<!DOCTYPE html>
<html>
<head>
	<title>第一个vue项目</title>
	<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
	<span></span>
</div>

<script type="text/javascript">
new Vue({
	el: "#app",
	data: {
		message: "Hello my first vue project"
	}
});

</script>
</body>
</html>

####2、vue命令创建项目
创建命令及运行方式

#创建项目(基于webpack模板)
vue init webpack hello-vue

#接下来一些输入配置信息（根据个人需求选择相应配置，默认一路Yes）
? Project name hello-vue
? Project description 项目的描述消息
? Author Negen
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "hello-vue".

#等待现在完成，项目创建结束

#运行项目
  #进入项目根目录
  cd hello-vue  
  #启动项目命令
  npm run dev
  #出现这句话表示项目启动成功
  I  Your application is running here: http://localhost:8080

在浏览器输入 localhost:8080 出现如下界面