一份Vue笔记，一个少年故事

Java4ye
360 阅读9分钟

这是我参与更文挑战的第3天，活动详情查看： 更文挑战

本篇文章主要记录 4ye 之前学 vue 的一些笔记，哈哈 非常青涩~

主要介绍了 入门 vue 的一些知识点，如Babel, css预处理器 ,ES6，Eslint,vuex 等等~

故事发生在一个卷卷卷的年代，一个初出茅庐的Java开发者涉世未深，对前端没有怀着敬畏之心，对上级安排的前端项目嗤之以鼻,欣然接下。

心高气傲的他丝毫没有意识到问题的严重性，甚至觉得做这个前端项目也是分分钟的事情,心里默念着“不就是写写 JS ，调调 CSS 吗，这有啥难的 ， 分分钟后，老子又可以摸鱼~”

于是乎，故事就这么开始了~

白发少年和我在夕阳下慢悠悠地说着这段故事

”白天…… 夜里……“

正当我听得入神时，眼前的白发少年却突然停了下来，抬头望着即将消失的夕阳道，说：”到点了，我要回家了“，我起身想多留他一会，却听他婉拒到，”好久没和夕阳一起下班了“

这一刻，很多话被我咽回去了

回来后整理了和少年的对话，发现就这么两句:

白天，他如临大敌，火急火燎，却堪堪画了个雏形。

夜里，他辗转反侧，心力憔悴，只因三个字：”改UI“

相同的时间，相同的地点，我又断断续续地约着少年，继续聊聊他的故事。

终于，在第n次后，故事迎来了新的高潮

少年目光如炬，缓缓地道，他成了守夜人 。

深夜是他的另一个战场，他的工位上光亮依旧，在这偌大的公司里显得那么的耀眼！

可就是这么安宁的场景，却传来与那份寂静格格不入的阵阵键声。

键声时而急促，时而缓慢，在这无边的寂静中宣泄着他那焦急无助的心情。

少年抬头45度角仰望天空

本以为少年想感慨”天不生我尤雨溪，我大前端万古如长夜“，

却听他说 ”若此后公司夜里没有光,我便是唯一的光“

什么光？工位的光？

少年沉默一阵后，袒露到，在无数个夜深人静里，他悔不当初...

再看着少年眼里流露出的 五彩斑斓的黑和那流光溢彩的白 后，我也陷入了沉思

至于中间具体发生了什么，就不得而知了，此时此刻恰如彼时彼刻，我们先从眼前这份笔记入手叭~

这份笔记也有一年了，哈哈

因为当时项目需要，领导让我负责。。去用vue搭建一个前端项目出来。

（心里活动：纳尼(ÒωÓױ)！ 这是部门里第一个用vue搭建的前端项目啊！------》算了，好像vue挺好玩的 去试试）

由于接触的知识点特别多 对我这个前端萌新来说是很有挑战的。。

学习历程

在搭建项目之前

  1. 我先去 vue 官网了解了一下 vue 的简单使用，如vue的模板语法 在一个普通的 HTML 页面中引入并使用它（这会还觉得确实容易上手。。）
  2. 接着就去百度看看vue相关的项目用到了那些技术（vue全家桶：vue-cli + vue2.0 + vuex + vue-router + axios + element-ui ）一下子觉得信息量爆炸。。（X_X）
  3. 后面在同事的推荐下去看了这个 vue-element-admin 开源项目，被虐得体无完肤，
  4. 又简单了解到 ESlint,Webpack,Babel,less,Mock,ES6语法,Commit规范和 vscode 的各种强力插件如 Vetur 等, 幸运的是经过一周多的学习对这些东西也比较熟悉了。。
  5. 然后发现vue3.0Beata版出来了，，(oT-T)尸

下面进入正题！

在了解了vue的基础使用后，我决定尝试着用vue cli搭建一个项目出来。

Vue Cli

官方文档参考

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 特点：

  1. 通过 @vue/cli 搭建交互式的项目脚手架。
  2. 一个丰富的官方插件集合，集成了前端生态中最好的工具。

安装

npm install -g @vue/cli
# Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
# OR
yarn global add @vue/cli

使用

vue create vue-test

选择manual的话会出现下图，需要你手动去添加需要的功能 QQ浏览器截图20200503161156

下面将逐一简单说下图中的插件

Babel

官方文档参考

介绍

QQ浏览器截图20200503180137

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map((n) => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

Babel是 Vue-Cli 脚手架中的默认选项，使用了之后就会在项目目录中生成一个 babel.config.js 的默认文件，可以帮我们预设插件（ vue-element-admin 项目中该文件也是默认生成的，于是我也没有改动这个文件）

Typescript

菜鸟教程 Typescript文档

介绍

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript6 标准。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

博主在项目中并没有使用到这个 Typescript，但是有在 vue 中使用到 ES6 的一些语法，这里推荐下 阮一峰大神 的 ES6入门教程

PWA (Progressive Web App)

Mozilla 开发者社区(MDN) PWA文档

介绍

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

个人理解这应该是类似小程序，快应用等不用安装到手机上就可以使用的程序

Vue Router

官方文档

简单来说它是个前端路由，控制页面的跳转 这部分的知识点在了解了 vue 的组件之后会更好理解

(当时的感觉是，卧槽，前端还有自己的路由的😂)

Vuex

官方文档

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

应用场景

  1. 多个视图组件，包括父子组件，兄弟组件之间的状态共享
  2. 不同视图组件的行为需要变更同一个状态

CSS Pre-processors

可以选择 Sass,Scss,Less,Stylus 这四种 css 预处理器，博主使用的博客主题里用到的是stylus，所以对这个stylus是比较熟悉的，项目中也是使用它。

Linter / Formatter

选择后会在文件夹中生成 .eslintrc.js 代码规范文件。 可以参考 饿了么团队Eslint

Unit Testing 单元测试

Jest 是 facebook 推出的一款测试框架，还没实践。。

E2E Testing 端对端测试

Nightwatch 一个自动化测试方案，还没实践。。

其他工具的使用

如 axios ,element-ui ,v-charts ,Webpack ,Mock和EasyMock等

  1. axios 中文文档 axios 对 vue 框架进行整合 vue-axios 它是一个非常好用的 http 客户端！

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

    promise 是异步编程的一种解决方案，是 ES6 语法中的一员.

  2. element-ui 官方文档 和 layui 这些前端框架一样，可以提高开发效率！

    网站快速成型工具 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

  3. 配合 vue 使用的图表组件 v-charts

    在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

  4. Webpack 官方文档

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

    其中 __dirname 是Node.js中的全局变量，表示当前文件所在的目录。 Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换，所以在使用stylus时也会装相应的loader，在vue中使用这个svg图片也需要相应的配置，这些配置需要在vue.config.js中配置(这个文件需要手动创建)，跨域的问题也要在这里进行配置。

  5. mock 官方文档

    生成随机数据，拦截 Ajax 请求

    正如官网所说的，它是一个模拟数据生成器，拦截ajax请求意味着你在浏览器的调试窗口是看不到它发出去的请求，所以这个对我们模拟跨域问题不大友好，不过现在又有了更方便的 EasyMock

    EasyMock文档

    github地址

    （注意版本!）

    QQ浏览器截图20200504162813

学习过程中这个API和文档密不可分，如Vue.js文档 和API 可以先大概浏览下，有问题的时候可以针对性地查查api ，找找解决办法 QQ浏览器截图20200504122318

以上就是博主最近当时学 vue 了解到的一些知识点，希望对你有所帮助！😝

欢迎关注，交个朋友呀！！ ( •̀ ω •́ )y

嘿嘿，我是4ye 咱们下期再见！╰(°▽°)╯

如果你觉得本篇文章还不错的话，那拜托再点点赞支持一下这个 这个有着五彩斑斓的黑和流光溢彩的白的少年好吗😝

让我们开始这一场意外的相遇吧！~

欢迎留言！谢谢支持！ヾ(≧▽≦*)o 冲冲冲！！

avatar
文章
阅读
粉丝