我的 Vue.js 入门过程

系统管理员 2022-03-22 05:48 201阅读 0赞

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

最近因为公司使用了 [https://github.com/wekan/wekan][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/][https_panjiachen.github.io_vue-element-admin-site_zh_guide]
 *  vue.js: [https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]
 *  vuex: [https://vuex.vuejs.org/zh/guide][https_vuex.vuejs.org_zh_guide]
 *  vue-router: [https://router.vuejs.org/zh/guide][https_router.vuejs.org_zh_guide]
 *  element-ui: [http://element-cn.eleme.io/\#/zh-CN/component][http_element-cn.eleme.io_zh-CN_component]
 *  es6: [http://es6.ruanyifeng.com/][http_es6.ruanyifeng.com]
 *  axios: [https://www.kancloud.cn/yunye/axios/234845][https_www.kancloud.cn_yunye_axios_234845]
 *  …

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

## 1. vue-admin-template ##

[https://panjiachen.github.io/vue-element-admin-site/zh/guide/][https_panjiachen.github.io_vue-element-admin-site_zh_guide]

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

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

## 2. Vue.js ##

[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]

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

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

## 3. vuex ##

[https://vuex.vuejs.org/zh/guide][https_vuex.vuejs.org_zh_guide]

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

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

## 4. vue-router ##

[https://router.vuejs.org/zh/guide][https_router.vuejs.org_zh_guide]

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

## 5. element-ui ##

[http://element-cn.eleme.io/\#/zh-CN/component][http_element-cn.eleme.io_zh-CN_component]

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

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

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

## 6. es6 ##

[http://es6.ruanyifeng.com/][http_es6.ruanyifeng.com]

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

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

本书重点关注以下内容

### 6.1 `...` 运算符 ###

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

### 6.2 `Promise` 对象 ###

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

### 6.3 对象和方法的简便写法 ###

### 6.4 模块化语法 ###

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

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

### 6.5 箭头函数 ###

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

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

## 7. axios ##

官方文档：[https://github.com/axios/axios][https_github.com_axios_axios]

中文文档：[https://www.kancloud.cn/yunye/axios/234845][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)  
![在这里插入图片描述][2019012614540755.png]

添加下面的配置：

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

## 9. 成果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 1]

## 10. 总结 ##

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

[https_github.com_wekan_wekan]: https://github.com/wekan/wekan
[Meteor]: https://www.meteor.com/
[vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[https_panjiachen.github.io_vue-element-admin-site_zh_guide]: https://panjiachen.github.io/vue-element-admin-site/zh/guide/
[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[https_vuex.vuejs.org_zh_guide]: https://vuex.vuejs.org/zh/guide
[https_router.vuejs.org_zh_guide]: https://router.vuejs.org/zh/guide
[http_element-cn.eleme.io_zh-CN_component]: http://element-cn.eleme.io/#/zh-CN/component
[http_es6.ruanyifeng.com]: http://es6.ruanyifeng.com/
[https_www.kancloud.cn_yunye_axios_234845]: https://www.kancloud.cn/yunye/axios/234845
[Vue.js]: http://www.runoob.com/vue2/vue-tutorial.html
[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Module]: http://es6.ruanyifeng.com/#docs/module
[https_github.com_axios_axios]: https://github.com/axios/axios
[2019012614540755.png]: /images/20220322/2aa51f51cb0445c485ee29c75c92c1f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70]: /images/20220322/73b59f9eb1e544bdabb67cf05a91d3cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 1]: /images/20220322/a3c1cddf7e7f4d818bc80a8be086a5a0.png