搭建vue+webpack+es6环境

1、vue介绍

vue属于VM*框架。是 MVVM框架。什么是MVVM框架？就是视图和数据的双向绑定。

vue的核心是数据驱动和组件化。

2.vue安装

1.首先查看一些node版本：node -v

2.全局安装 vue-cli:是Vue的脚手架 ,它是一个node包，所以要用npm去安装 ：sudo npm install -g vue-cli。

3.输入 vue list：看到我们可以使用的模板名称。我们本次选择 webpack模板。所以继续运行 ： vue init webpack shell  就可以在当前目录下生成 webpack的模板。

下面具体看一下这些目录：

一级目录：build和config目录是和webpack相关的目录；src是放我们的源码。staitic存放第三方静态资源。

.babelrc：babel转换es6的一些配置。

.editorconfig:编辑器的一些配置。

.eslintignore:忽略语法检查的配置文件。

.eslintrc.js:eslint的配置文件。重点看 看extands 和 rules。extands：‘standers’继承一些标准的规则。可以去对应的地址看。 rules:对具体的一些部分做修改，为0代表忽略某个规则的检查。

.gitignore: git仓库去忽略的一些文件。

package.json:项目的配置文件。scripts中是我们可以执行的一些命令。dependences:项目的依赖。 devDependencies：编译过程中需要的依赖。

index.html：项目的入口文件。

找到src中的main.js，是页面的入口js.

开始项目：

1. westrom中可能会有红色的线标错。我们可以在 performance中找到 languages&Faramewords下的JavaScript中设置版本为 ECMAScript6.

webstorm中找到 plugin 安装 Vue.js（标签快捷键）和 Vue-for-idea(stylus报错)

webstorm中找到 editor >File and Code Templates。添加一个 Vue File，并可以指定模板。（新建Vue文件）

2 .dev-server.js中写路由写接口；eslintrc.js中配置代码检查规则； 安装 stylus ;安装 vue-router.

3..路由出问题：版本是2.0.与1.0的区别 

》不能会读取Vue.internalDirectives.component这个属性。npm install vue-router@next

》router.go()变为 router.push()

移动端的1px 问题：伪类绘制边框 > 媒体查询根据最小dpr  对于伪类进行缩放

3.vue-resource处理前后端数据

4.better-scoll 超级好用的手机端 滚动。