layout: post

title: "vue.js学习笔记"

categories: javascript

description: "vue.js学习入门"

main-class: 'dev'

color: '#637a91'

tags:

- "vue.js"

twitter_text: "vue.js学习笔记，vue学习入门"

introduction: "vue.js学习笔记，vue学习入门"

之前自己有学过react.js，但由于公司项目开发需要使用vue.js，所以就快速将vue.js架构的基本文档读了一遍，然后写了几个demo来练手。其中[3air](://github.com/feleventh/3air)这一demo的完成度最高，于是本文选择基于这一demo来分享vue.js的入门学习。

vue-cli手脚架工具为我们提供了构建vue项目的模版，使用vue-cli可以快速自动化构建vue项目。vue-cli官方提供了基于webpack的两个模版`webpack`和`webpack-simple`，相较于`webpack-simple`，`webpack`模版增添了单元测试和集成测试，在vue-cli构建过程,可以选择eslint的模版，测试的框架等等。除此以外，vue-cli还可以使用第三方模版来构建vue应用。

很多情况下，vue-cli基于模版构建的项目结构并不能满足我们的需求，需要根据项目的具体需求来设计项目目录结构，比如多页面的vue项目的结构和单页面项目(SPA)的目录结构不同，Webpack配置也将有很大区别。

Webpack有四大核心概念——entry入口文件、output打包后的文件目录，loader模块加载器，以及plugins插件。在webpack配置文件中的module中定义rules数组来指定打包规则。每个数组元素是一个规则对象，test用正则表达式来匹配文件的类型，loader指定相应文件类型的加载器，include制定要打包转换的目标文件的目录，exclude则是指定加载器忽略的目录，例如当使用babel-loader转换js文件为es2015时，可以使用exclude忽略/node_modules/目录下的js文件。

当用use来为文件指定多个loader时，use数组内的加载器的处理顺序为从右到左。另外，还可以使用options来定义额外的配置，例如图片、字体文件转换限制10kb的大小，使用hash来使静态资源带上hash值，防止缓存。

vue.js的手脚架工具vue-cli有webpack和webpack-simple2个webpack模板，可以自动生成使用webpack的vue项目。Vue-cli生成的webpack配置文件也可以在其基础上更具需要做相应的修改。Webpack模板在webpack-simple的基础上增加了单元测试、集成测试等功能，对webpack的配置文件进行了模块化的处理。

vue-cli手脚架工具还自动生成了eslint文件，默认的javascript编码规范为javascript-standard-style。相比airbnb javascriot style来说，standard比较精简，对缩进，空格的要求比较高。

vue.js的学习是学习文档与编写demo结合完成的，demo地址为[https://github.com/feleventh/3air](https://github.com/feleventh/3air)

在3air中使用了vue.js的各种指令，包括v-on，v-bind，v-model，v-if，v-for等等指令。使用vue单文件组件来进行模块化开发，在vue文件中，样式使用less预处理工具，模板可使用pug模板工具，并配合vue-router进行路由管理，使用vuex状态管理模式来进行组件之间的通信。

在项目的入口文件main.js中，需要先引入需要全局使用的工具库，全局样式以及插件，vue插件需要使用vue.use()方法来注册。然后，new一个vue实例。

在vue组件中，可以使用lang属性为模板制定模板语言，如pug，ejs。同时也能为样式制定预处理工具，如less，scss，stylus。并且，在style标签中还可以定义scoped属性来规定组件类的样式只在组件内有效。

在组件中，data属性类型必须为function，而在main.js中vue实例data是对象类型。在模板中需要对变量进行复杂计算或转换处理时，应该使用computed属性，computed属性的值完全依赖于计算或转换之前的data中的值，方便于在模板中直接使用。另外，在使用vuex的情况下，通常使用mapGetters将store中保存的getters映射到组件的computed属性中去。

生命周期钩子函数能在vue实例在生命周期不同状态之间发生转换时被调用。例如created函数能在实例被创建但还没进入挂载时调用，在3air的demo中，使用了created函数在组件实例被创建后获取航班起飞以及目的城市select控件的数据。

在demo中，还应用了vue transition来做组件的过度效果，transition可以使用样式来编写，也可以使用transition状态钩子函数来实现。

element-UI是饿了么前端团队设计的一款UI，目前最新版本为1.3.3。在入口文件中引入element-UI后还要，使用vue.use()来安装插件。同时，在入口文件中要引入element-UI的主题样式文件，可以根据具体需要使用在线主题生成工具来自定义主题颜色，还可以使用element-theme做更深入的定制。

在3air的demo中，使用了el-card以及el-form和各种表单组件来编写用户注册以及登陆模块并使用了el-tab在注册和登陆之间切换，配合vue的transition以及v-if来形成弹出modal框的效果，并使用v-loading来显示登陆的加载中的状态效果，使用notification来通知用户注册成功，其中notofication使用`this.$notify()`方法来调用。

另外，在demo中，还使用了el-table来展示航班的搜索结果，并使用el-pagination对el-table的内容进行了分页。

在el-menu中可以配置router属性来搭配vue-router来直接进行路由跳转。

vue-router的动态路由匹配使用冒号:来标记路径参数，在vue中能使用`this.$route.params`来获取到路由参数。

vue-router默认使用hash模式，但通常使用history模式，去掉hash模式中url尾部的#符号。当不需要像history添加记录的前提下，切换路由时，使用 `replace()`代替`push()`方法。

使用beforeEnter钩子函数可以来拦截某个导航，让其进行调转或取消。例如在demo中，当点击用户中心的菜单链接时，会先调用beforeEnter函数来检查用户是否已登陆，若已登陆则正常进入用户中心的链接，否则弹出注册modal。

vuex的action与mutation的区别在于，Action提交的是mutation而不是直接改变state，并且可以是异步操作。可以使用store.dispatch()来分发action，也可以使用mapActions。

在处理表单时，可以使用v-modal加带get()，set()方法的计算属性来实现双向绑定到state中去。

使用axios需要在入口文件中，将axios对象赋值给vue.prototype.$http，从而可以在全局使用this.$http来避免每个组件引入axios。axios支持promise API，在使用promise时，还需使用babel-polyfill来兼容浏览器版本。