vue_介绍及安装

一、什么是vue.js？

Vue.js是一个构建数据驱动的web界面的库。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。

学习网址：
http://cn.vuejs.org/guide/installation.html#NPM
http://wiki.jikexueyuan.com/project/vue-js/instal.html
http://vuejs.org/guide/installation.html
http://www.hubwiz.com/class/566e67417e7d40946afc5ddc
https://router.vuejs.org/zh-cn/index.html

二、安装vue.js

1、兼容性：

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。
Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

2、Npm安装：

在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

1.$ npm install vue
2.`# 获取CSP兼容版本：
3.`$ npm install vue@csp
4.`# 获取最新开发版本(来自于GitHub):
5.$ npm install yyx990803/vue#dev

3、命令行工具：

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install -g vue-cli
 # 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

vue-cli学习网址：https://github.com/vuejs/vue-cli

译者注：对于大陆用户，建议将 npm 的注册表源设置为国内的镜像cnpm，可以大幅提升安装速度。

安装命令：

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

安装之后，在本文档里面所有出现使用 npm 的地方，你都可以使用 cnpm 代替

4、开发版构建：

重要：发布到 NPM 上的 CommonJS 包 (vue.common.js) 只在发布新版本时签入 master 分支，所以这些文件在 dev 分支下跟稳定版本是一样的。想使用 GitHub 上最新的源码，需要自己编译：

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

vue_项目结构

. 
├── build/ # webpack config files 
│ └── ... 
├── config/ 
│ ├── index.js # main project config 
│ └── ... 
├── src/ 
│ ├── main.js # app entry file 
│ ├── App.vue # main app component 
│ ├── components/ # ui components 
│ │ └── ... 
│ └── assets/ # module assets (processed by webpack) 
│ └── ... 
├── static/ # pure static assets (directly copied) 
├── test/ 
│ └── unit/ # unit tests 
│ │ ├── specs/ # test spec files 
│ │ ├── index.js # test build entry file 
│ │ └── karma.conf.js # test runner config file 
│ └── e2e/ # e2e tests 
│ │ ├── specs/ # test spec files 
│ │ ├── custom-assertions/ # custom assertions for e2e tests 
│ │ ├── runner.js # test runner script 
│ │ └── nightwatch.conf.js # test runner config file 
├── .babelrc # babel config 
├── .postcssrc.js # postcss config 
├── .eslintrc.js # eslint config 
├── .editorconfig # editor config 
├── index.html # index.html template 
└── package.json # build scripts and dependencies

build/

这个目录包含实际的配置为开发服务器和生产WebPACK的建立。通常你不需要接触这些文件，除非你想自定义WebPACK的装载机，在这种情况下，你应该看看build/webpack.base.conf.js。

config/index.js

这是主要的配置文件，暴露了一些为安装最常见的配置选项。看到API代理在发展和结合后台框架更多的细节。

src/

这是大多数应用程序代码将生活在。如何在这个目录结构都很大程度上取决于你；如果你使用的是vuex，你可以咨询建议的用途。

static/

这个目录是静态资产，你不想处理Webpack的逃生舱。他们将直接复制到同一目录下建立资产产生WebPACK。

看到处理静态资产更多的细节。

test/unit

包含单元测试的相关文件。See单元测试更多的细节。

test/e2e

端到端包含测试相关文件。See端到端的测试更多的细节。

index.html

这是模板index.html我们的单页应用。在开发和建设，Webpack将产生的资产，并为那些产生资产的网址将被自动注入到这个模板来渲染最终的HTML。

package.json

故宫包元文件包含所有的构建依赖关系和构建命令。