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 超级好用的手机端 滚动。