我曾经专门认真的看过两次 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属性。
6. es6
《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. 总结
以现成框架为基础进行学习,可以掌握最基本的内容,能够真正的快速入门。