我的 Vue.js 入门过程

我曾经专门认真的看过两次 Vue.js 的文档，简单例子也写过，但是很快就忘，一直没有入门。

最近因为公司使用了 https://github.com/wekan/wekan 看板来分配任务，需要有一套相应的功能来统计绩效，由于 wekan 本身较大，用的 Meteor 一站式框架编写的，看了很久感觉很难入手，因此放弃在原有基础上开发新功能。

因此选择了 Spring Boot 做后端（操作 mongodb 易如反掌），前端使用 vue-admin-template 。

在写相关功能的过程中，逐渐加深了对以下 工具 的理解：

• vue-admin-template: https://panjiachen.github.io/vue-element-admin-site/zh/guide/
• vue.js: https://cn.vuejs.org/v2/guide/
• vuex: https://vuex.vuejs.org/zh/guide
• vue-router: https://router.vuejs.org/zh/guide
• element-ui: http://element-cn.eleme.io/#/zh-CN/component
• es6: http://es6.ruanyifeng.com/
• axios: https://www.kancloud.cn/yunye/axios/234845

利用一周左右的时间完成了基本功能的开发。开发期间反复查看上述内容的相关文档，尽可能准确的了解相应工具的用法。

1. vue-admin-template

https://panjiachen.github.io/vue-element-admin-site/zh/guide/

这是一个非常不错的前台框架模板，从一个完整的项目开始学习会比零碎的学习各个独立工具要好，而且能很快掌握各个工具的用途，以及各自交互的用法。

在使用该框架开发的过程中，参考本文提供的这些资料会让你事半功倍。

2. Vue.js

https://cn.vuejs.org/v2/guide/

由于框架使用的 Vue.js，这是整个框架的基础，是核心，所以在使用前面框架前，你需要了解一下 Vue.js 的简单语法，建议先通过 菜鸟教程 Vue.js 教程 快速了解基本的语法，再重点看看 Vue.js 官方文档中的 单文件组件 ，了解所有 .vue 后缀文件的结构，了解每个部分的用法。然后使用上面的 vue-admin-template 框架，在使用过程中，在具体看 官方文档 中的介绍。

单文件组件对应框架中的 src/views/ 目录

3. vuex

https://vuex.vuejs.org/zh/guide

在上面框架中，通过 vuex 管理了用户登录状态和权限相关的信息，把官方文档中 核心概念 部分的代码都看一遍，你就能先理解框架中的用法，再根据需要增加自己的内容。

对应框架中的 src/store/ 目录

4. vue-router

https://router.vuejs.org/zh/guide

看看文档中的 基础 部分，重点在 嵌套路由 ，还要看 进阶/导航守卫 ，结合框架中的 src/router/index.js 以及 src/permission.js 中的 导航守卫 用法更容易理解。

5. element-ui

http://element-cn.eleme.io/#/zh-CN/component

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

这套组件非常好用，而且有大量的例子和详细的文档，需要什么组件时，复制粘贴再修改就能用。

新手特别注意 表单Form 中，如果使用校验规则 rule ，需要指定 prop 属性。

http://es6.ruanyifeng.com/

《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。

本书建议有时间的时候都浏览一遍，后续遇到问题能快速找到想要看的内容。

本书重点关注以下内容

6.1 ... 运算符

数组和对象中都能用，可变参数也有它，用途很多，需要看好几章才能看全。

6.2 Promise 对象

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。框架中使用的 axios 就是将 ajax 请求封装成了 Promise。

6.3 对象和方法的简便写法

var name = 'isea';
var obj = {name};
//上面的写法等价于 obj = {name: name}
var fun = {
	hello(){
		alert('hello');
	}
}
//上面的写法等价于下面的写法
var fun = {
	hello: function(){
		alert('hello');
	}
}
//因此经常会见到下面的用法
{
	data() {
		return {}
	}
}

6.4 模块化语法

经常会有 import {a} from 'xxxx' 或者 export default xxx ，这些都是模块化，仔细看看 Module 的语法

这里的 {a} 不是 {a:a} ，而是对象的解构，需要看变量的解构赋值部分。

6.5 箭头函数

经常有 x => x+1 这种箭头函数的写法，可以看 函数的扩展>5.箭头函数部分 了解。

ES6 需要了解的东西有很多，有时间可以多看看。

7. axios

官方文档： https://github.com/axios/axios

中文文档： https://www.kancloud.cn/yunye/axios/234845

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

先看会上面 ES6 的 Promise，再看 Axios 就容易的多了。

简单用法：

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在 vue-admin-template 框架中，使用了 axios.create 方式创建了一个实例。

8. eslint

框架中的代码规范比较特殊，在 VS CODE 中使用时，需要安装和配置两个插件。

安装 Prettier - Code formatter 和 Vetur ，点击【文件】>【首选项】>【设置】

打开设置(json)

添加下面的配置：

{
    //其他配置
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true,
            "semi": false
        }
    }
}

9. 成果

10. 总结

以现成框架为基础进行学习，可以掌握最基本的内容，能够真正的快速入门。