前言

写完算法实现后，老师让我去做一个界面，我参考了很多，最后选择了vue等一系列技术栈作为前端解决方案。

应朋友们的邀请，下面就记录一下我学习的一些路线(文档、视频和项目)，也希望给未来的你有所指引。（大佬路过不喜轻喷哈，本人脸皮较薄呜呜…

好文推荐

这个章节主要是对于稍微有基础的读者分享滴
一文掌握 vue3.2 setup 语法糖

文档

vue相关

我首先是看了一下vue官方文档

vue 2.x
vue 3.x

然后我发现在vue的项目中，vue-router 和 vue-cli用的也挺多，就去瞅了一下他们的文档

vue-cli
vue-route

不管它们我也只瞅了基础部分，vue-router主要是明白如何构造项目的路由，去渲染该url下的组建。vue-cli主要是方便我们快速构建一个vue项目。

看完文档之后，就可以上手项目了。
如果你不是为了赶进度的话，这边还建议您再看看尤雨溪大佬本人的一些讲解视频。
尤雨溪教你写vue 高级vue教程源码分析中文字幕翻译完毕–bilibili

element-UI

另外, 在看项目过程中我发现这个也用的多，也可以看看.
element ui上手文档

尤其是当我看见el-col利用span参数调整布局的方便时，真心喜欢这个库
Element el-row el-col 布局组件详解

另外补充一下在vue-cli项目中引入element-ui的用法

npm install element-ui --save

然后在main.js文件中

import Vue from 'vue'
import App from './App.vue'
import router from './router'// 饿了么的element-ui库
// import './plugins/element.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)new Vue({router,render: h => h(App),
}).$mount('#app')

项目

既然看完文档，那么就可以上手项目了。
这里我的环境是

这里大部分项目都是git clone 下来后

npm install

上面语句可以加载package.json写的相关依赖。注意在npm install 前先配好镜像。
然后

npm run dev

至于这里为什么是run dev而不是run 其他，你得看package.json 中的scripts。

Todo List

我建议第一个看的项目是 Vue3-Todo-List-AddName。只要你看过一下vue的文档，基本一两个小时就能完全看懂。这只是一个单页面的应用。

该项目不需要vue-router的知识
实用到了浏览器的localStorage
事件处理: 回车添加，右键删除，左键变红

CNode bbs

一个vue2的cnode社区项目。
也是一个适合入门的项目。代码量也不算多，当时看了一个小时左右。

需要用到vue-router, 能教会你使用route-link和route-view

Music Web

Vue动漫风音乐播放器-bilibili
下载地址见作者置顶评论，我记得是放在百度网盘的。

个人觉得它做的还是蛮好看的。(歌曲信息来自api，这个不是重点，由于api访问有时延，所以打开这个页面的时候会觉得有点慢，不过不是重点，我们重点是学习vue

Manage-system

该项目基于vue3+element plus, 和上面介绍的项目一样，也是一个后台数据可视化项目。
github: vue-manage-system

用到了vuex, “每一个 Vuex 应用的核心就是 store（仓库）。store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)”

表单:

一些可视化，不过可惜是静态的，个人还是喜欢有交互的echarts。

Touzi-admin

如果需要数据可视化，可看看这个项目。
GitHub: vue2-element-touzi-admin

该项目用到了很多element UI的组建
使用了echart 进行图表可视化。
(一年前我写了一个使用echart的例子:
echarts异步请求后台数据(flask, express, beego版本))

(上面效果图我对代码进行了修改, 原来右下角女孩照片看上去有点被水平拉伸的样子，在/index/index.vue文件的第104, 108, 111行)

vue学习日记(流水账相关推荐

vue学习日记-关于同步跟异步的个人理解
!!!(我请你吃饭和你请我吃饭的不同) 通俗理解: 同步:我请你吃饭,你马上跟我走了,或者是只有你跟我走了我才会去吃异步:你请我吃饭,我没有马上跟你走的话,你就自己先去吃了. 现在的vue默认是支持 ...
Vue学习日记之vue实例生命周期
在vue实例开始创建.运行到销毁的过程,就是vue的生命周期 vue生命周期中发生(存在)的事件(这些事件可以用函数来表示),我们称之为生命周期钩子. 即:生命周期钩子=生命周期函数=生命周期事件 ...
Vue2源码的学习日记（3）
组件化 (在文章中的一切源码大部分都是只给出头部,因为源码是开源的(Vue2.6),我认为在自己去边查找边看的过程也能提升到自己) 续学习日记(2)后,便开始慢慢走向vue这个框架的核心,希望能帮到大 ...
Vue学习之认识到应用（三）
上一篇文章Vue学习之认识到应用(二)因为字太多页面反应不过来,卡了.重新写了一部分,难受. 目录 13.Vue-Router前端路由 13.1.路由的发展阶段 13.1.1.后端路由阶段 13.1. ...
Vue错误日记 ——关于Vue-Router出现esm-bundler.js?6c02:2127 Uncaught TypeError: Object(...) is no的解决方案
Vue错误日记 --关于Vue-Router无法正常使用的解决方案前言配置项目环境项目代码问题处理结束语前言今天用 Vue-cli 搭建 Vue 项目时,发现Router无法正常挂载, ...
Vue初学日记Day1
Vue初学日记Day1 1.配置环境参考:https://www.jianshu.com/p/454c3a7c5602 node-v10.16.0-x64.msi 链接:https://pan.ba ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...

vue学习日记(流水账

前言