一份Vue笔记，一个少年故事
本篇文章主要记录 4ye 之前学
vue的一些笔记，哈哈 非常青涩~主要介绍了 入门
vue的一些知识点，如Babel,css预处理器 ,ES6，Eslint,vuex等等~
故事发生在一个卷卷卷的年代，一个初出茅庐的Java开发者涉世未深，对前端没有怀着敬畏之心，对上级安排的前端项目嗤之以鼻,欣然接下。
心高气傲的他丝毫没有意识到问题的严重性，甚至觉得做这个前端项目也是分分钟的事情,心里默念着“不就是写写 JS ，调调 CSS 吗，这有啥难的 ， 分分钟后，老子又可以摸鱼~”
于是乎，故事就这么开始了~
白发少年和我在夕阳下慢悠悠地说着这段故事
”白天…… 夜里……“
正当我听得入神时，眼前的白发少年却突然停了下来，抬头望着即将消失的夕阳道，说：”到点了，我要回家了“，我起身想多留他一会，却听他婉拒到，”好久没和夕阳一起下班了“
这一刻，很多话被我咽回去了
回来后整理了和少年的对话，发现就这么两句:
白天，他如临大敌，火急火燎，却堪堪画了个雏形。
夜里，他辗转反侧，心力憔悴，只因三个字：”改UI“
相同的时间，相同的地点，我又断断续续地约着少年，继续聊聊他的故事。
终于，在第n次后，故事迎来了新的高潮
少年目光如炬，缓缓地道，他成了守夜人 。
深夜是他的另一个战场，他的工位上光亮依旧，在这偌大的公司里显得那么的耀眼！
可就是这么安宁的场景，却传来与那份寂静格格不入的阵阵键声。
键声时而急促，时而缓慢，在这无边的寂静中宣泄着他那焦急无助的心情。
少年抬头45度角仰望天空
本以为少年想感慨”天不生我尤雨溪，我大前端万古如长夜“，
却听他说 ”若此后公司夜里没有光,我便是唯一的光“
什么光？工位的光？
少年沉默一阵后，袒露到，在无数个夜深人静里，他悔不当初...
再看着少年眼里流露出的 五彩斑斓的黑和那流光溢彩的白 后，我也陷入了沉思
至于中间具体发生了什么，就不得而知了，此时此刻恰如彼时彼刻，我们先从眼前这份笔记入手叭~
这份笔记也有一年了，哈哈
因为当时项目需要，领导让我负责。。去用vue搭建一个前端项目出来。
（心里活动：纳尼(ÒωÓױ)！这是部门里第一个用vue搭建的前端项目啊！------》算了，好像vue挺好玩的 去试试）
由于接触的知识点特别多 对我这个前端萌新来说是很有挑战的。。
学习历程
在搭建项目之前
我先去 vue官网了解了一下vue的简单使用，如vue的模板语法 在一个普通的HTML页面中引入并使用它（这会还觉得确实容易上手。。）接着就去百度看看vue相关的项目用到了那些技术（vue全家桶：vue-cli + vue2.0 + vuex + vue-router + axios + element-ui ）一下子觉得信息量爆炸。。（X_X） 后面在同事的推荐下去看了这个 vue-element-admin 开源项目，被虐得体无完肤， 又简单了解到 ESlint,Webpack,Babel,less,Mock,ES6语法,Commit规范和 vscode 的各种强力插件如 Vetur 等, 幸运的是经过一周多的学习对这些东西也比较熟悉了。。 然后发现vue3.0Beata版出来了，，(oT-T)尸
下面进入正题！
在了解了vue的基础使用后，我决定尝试着用vue cli搭建一个项目出来。
Vue Cli
官方文档参考[1]
介绍
Vue CLI是一个基于Vue.js进行快速开发的完整系统 特点：
通过 @vue/cli搭建交互式的项目脚手架。一个丰富的官方插件集合，集成了前端生态中最好的工具。
安装
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的话会出现下图，需要你手动去添加需要的功能
下面将逐一简单说下图中的插件
Babel
官方文档参考[2]
介绍
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文档[3]
介绍
TypeScript是JavaScript的一个超集，支持ECMAScript6标准。TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
博主在项目中并没有使用到这个 Typescript，但是有在 vue 中使用到 ES6 的一些语法，这里推荐下 阮一峰大神 的 ES6入门教程[4]
PWA (Progressive Web App)
Mozilla 开发者社区(MDN) PWA文档[5]
介绍
PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。
个人理解这应该是类似小程序，快应用等不用安装到手机上就可以使用的程序
Vue Router
官方文档[6]
简单来说它是个前端路由，控制页面的跳转
这部分的知识点在了解了 vue 的组件之后会更好理解
(当时的感觉是，卧槽，前端还有自己的路由的😂)
Vuex
官方文档[7]
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
应用场景
多个视图组件，包括父子组件，兄弟组件之间的状态共享 不同视图组件的行为需要变更同一个状态
CSS Pre-processors
可以选择 Sass,Scss,Less,Stylus 这四种 css 预处理器，博主使用的博客主题里用到的是stylus，所以对这个stylus是比较熟悉的，项目中也是使用它。
Linter / Formatter
选择后会在文件夹中生成 .eslintrc.js 代码规范文件。可以参考 饿了么团队Eslint[8]
Unit Testing 单元测试
Jest[9] 是 facebook 推出的一款测试框架，还没实践。。
E2E Testing 端对端测试
Nightwatch[10] 一个自动化测试方案，还没实践。。
其他工具的使用
如 axios ,element-ui ,v-charts ,Webpack ,Mock和EasyMock等
axios中文文档[11]axios对vue框架进行整合 vue-axios[12]它是一个非常好用的http客户端！Axios是一个基于promise的 HTTP 库，可以用在浏览器和node.js中。promise是异步编程的一种解决方案，是ES6语法中的一员.element-ui官方文档[13]和layui这些前端框架一样，可以提高开发效率！网站快速成型工具
Element，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库配合
vue使用的图表组件 v-charts[14]在使用
echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。Webpack官方文档[15]webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。其中
__dirname是Node.js中的全局变量，表示当前文件所在的目录。Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换，所以在使用stylus时也会装相应的loader，在vue中使用这个svg图片也需要相应的配置，这些配置需要在vue.config.js中配置(这个文件需要手动创建)，跨域的问题也要在这里进行配置。mock官方文档[16]生成随机数据，拦截
Ajax请求正如官网所说的，它是一个模拟数据生成器，拦截
ajax请求意味着你在浏览器的调试窗口是看不到它发出去的请求，所以这个对我们模拟跨域问题不大友好，不过现在又有了更方便的 EasyMockEasyMock文档[17]
github地址[18]
（注意版本!）
QQ浏览器截图20200504162813
学习过程中这个API和文档密不可分，如Vue.js文档[19] 和API[20] 可以先大概浏览下，有问题的时候可以针对性地查查api ，找找解决办法
以上就是博主最近当时学 vue 了解到的一些知识点，希望对你有所帮助！😝
最后
如果你觉得本篇文章还不错的话，那拜托再点点赞支持一下这个 这个有着五彩斑斓的黑和流光溢彩的白的少年好吗😝
让我们开始这一场意外的相遇吧！~
欢迎留言！！谢谢支持！ヾ(≧▽≦*)o 冲冲冲！！
嘿嘿，我是4ye 咱们下期再见！╰(°▽°)╯
站了5个小时换来的书单
曾经拥有和不曾拥有哪个更遗憾？
万字长文，带你快速上手这些池化技术！
你什么时候觉得自己长大啦
参考资料
官方文档参考: https://cli.vuejs.org/zh/guide/
[2]官方文档参考: https://www.babeljs.cn/docs/
[3]Typescript文档: https://www.runoob.com/typescript/ts-tutorial.html
[4]ES6入门教程: https://es6.ruanyifeng.com/
[5]PWA文档: https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
[6]官方文档: https://router.vuejs.org/zh/
[7]官方文档: https://vuex.vuejs.org/zh/
[8]饿了么团队Eslint: https://www.npmjs.com/package/eslint-config-elemefe
[9]Jest: https://www.npmjs.com/package/jest
[10]Nightwatch: https://nightwatchjs.org
[11]中文文档: http://www.axios-js.com/zh-cn/docs/
[12]vue-axios: http://www.axios-js.com/zh-cn/docs/vue-axios.html
[13]官方文档: https://element.eleme.cn/#/zh-CN/component/installation
[14]v-charts: https://v-charts.js.org/#/
[15]官方文档: https://www.webpackjs.com/
[16]官方文档: https://github.com/nuysoft/Mock/wiki
[17]EasyMock文档: https://easy-mock.com/docs
[18]github地址: https://github.com/easy-mock/easy-mock
[19]Vue.js文档: https://cn.vuejs.org/v2/guide/
[20]API: https://cn.vuejs.org/v2/api/