浅入深出Vue:前言
浅入深出Vue系列文章
之前大部分是在做后端,后来出于某些原因开始接触Vue。深感前端变化之大,各种工具、框架令人眼花缭乱。不过正是这些变化,让前端开发更灵活。
博主在刚开始时,参考官网的各个步骤以及网上的博客。搭个环境,跑起来demo都费了大半天的劲。
本系列文章的初衷:
- 迅速的搭建起环境,不在环境、工具等其他因素上占用太多时间
Vue框架由浅入深的理解部分知识点,能快速上手Vue并将其实践至项目中- 由
粗糙到精致,一步步优化代码,了解并使用一部分关于代码整洁、优化的知识 - 同时也是若羽对所学知识的一个巩固
本系列文章将由始至终围绕一个简易的个人博客项目展开,在阐述的同时利用这个项目来连贯起来。
系列文章分为四个阶段且均基于Vue-cli,内容暂定为下:
同时,若羽将会在实践的过程中不断补充和完善目录及内容。
基础篇
工欲善其事必先利其器
- 工具准备之
WebStorm安装配置(已更新) - 工具准备之
PostMan安装篇安装配置及Mock服务配置(已更新) - 环境搭建
- 数据绑定
- 数据渲染
- 事件
- 路由
- 组件
- 子组件及数据传递
本篇主要介绍从无到有,从0开始搭建一个项目。
并且介绍Vue中的一些基本概念,为后面搭下基础
主要会将
Vue中的基础概念尽可能以简洁明了的方式阐述出来,围绕着数据驱动去阐述。
入门篇
Hello Wrold
- 第一个页面
- 注册
- 登录
- 博客文章编辑
- 博客文章列表
- 发布
本篇主要正式开始利用基础篇所学到的知识开始写一个真正的项目
并接触如何与后端交互,如何渲染页面,如何定义简单的路由以及如何发布
当入门篇完结时,一个真实可以运行的小项目随之诞生,享受自己创建的快乐吧 :)
提高篇
混乱的代码会让思维变得更加混乱
- 代码整洁:封装
- 代码整洁:去重
- 代码整洁:专一
- 代码整洁:分层
- 代码整洁:质量
- 待定
提高篇的主要内容是在入门篇的基础上,对入门篇的代码进行重构,对于细节的打磨。
当代码/项目开始变得混乱时,维护起来将会花费比开发更多的时间,并且随着时间,这个成本将会越大。
对于如何组织代码,以及如何美化代码,提出一部分建议并辅以实例。
深入篇
优雅之道
- 依赖注入:控制反转
- 全局异常处理
- 自动化路由
- 待定
深入篇分两部分,一部分讲解依赖注入来为整个项目做解耦。另一个部分则是关于Vue的部分特性/组件深入使用。
相关技术、工具
技术上将会涉及到以下部分,vue-router之类的vue组件未细写。
Vuevue-clinpmElementUI
开发工具上将会采用
WebStorm
采用WebStorm的主要原因是因为提示、重构功能以及个人习惯。
也可以采用其它轻量级的工具,如:VsCode, Sublime Text, Atom等,本系列文章将会使用WebStorm。
最后
本系列文章,将会从以下几个维度进行讲解,确保不会因为工具、环境以及打包之类的其它因素分神,从而专注于钻研Vue以及开发的项目。
- 所需工具
- 环境安装、配置
- 开发过程
- 发布
初次撰教程文,言辞不当或技术方面问题欢迎各位指教,用心讨论,共同提升。
浅入深出Vue:前言的更多相关文章
- 浅入深出Vue系列
浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置
浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...
- 浅入深出Vue:工具准备之WebStorm安装配置
浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...
- 浅入深出Vue:第一个页面
今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...
- 浅入深出Vue:代码整洁之封装
深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...
- 浅入深出Vue:文章列表
终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...
- 浅入深出Vue:自动化路由
在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...
- 浅入深出Vue:代码整洁之去重
在开始本篇的主题之前,让我们把上次遗留下来的问题都清理一下: 将其他组件中 axios 请求的地方封装起来. 这里就不把代码放在开头了,相关代码都放在文末,有兴趣了解的童鞋可以先往下翻. 好了, 我们 ...
随机推荐
- Java 8 Stream介绍及使用1
(原) stream的内容比较多,先简单看一下它的说明: A sequence of elements supporting sequential and parallel aggregate * o ...
- Python 爬虫基础Selenium
https://blog.csdn.net/weixin_36279318/article/details/79475388
- Cookies, Claims and Authentication in ASP.NET Core(转载)
Most of the literature concerning the theme of authentication in ASP.NET Core focuses on the use of ...
- 类String 常用方法
字符串当中的常用方法之比较相关的方法 public boolean equals (object obj):将此字符串与指定的对象进行比较(只有参数是字符串并且内容相同才会返回true) public ...
- 02-MySQL基础
MySQL基础 1.存储引擎 1.1MyISAM MySQL5.5以及之前默认存储引擎MyISAM 如果应用是以读操作和插入操作为主,只有很少的更新和删除操作,并且对事务的完整性.并发性要求不高,那么 ...
- “纽劢科技杯”第十六届同济大学程序设计竞赛暨上海邀请赛同步赛 J-张老师的游戏
传送门 题目描述 在空闲时间,张老师习惯性地和菜哭武玩起了取石子游戏,这次的游戏规则有些不同,在他们面前有n堆石子,其中,第i堆石子的个数为a[i],现在制定规则如下: 从张老师开始, ...
- UOJ#449. 【集训队作业2018】喂鸽子(期望dp)
题意 有 \(n\) 只鸽子,每只鸽子需要 \(k\) 粒玉米才能喂饱.问每次随意喂给 \(n\) 个鸽子中的一个,期望多久所有鸽子都被喂饱. 对于 \(998244353\) 取模. 数据范围 \( ...
- 如何解决Redis中的key过期问题
最近我们在Redis集群中发现了一个有趣的问题.在花费大量时间进行调试和测试后,通过更改key过期,我们可以将某些集群中的Redis内存使用量减少25%. Twitter内部运行着多个缓存服务.其中一 ...
- Jupyter Notebook不能在系统命令行里全局启动
Anaconda安装好Juypyter Notebook之后,只能在base环境里启动,在系统的命令行里要全局启动Jupyter NoteBook失败了 C:\Users\HP>jupyter ...
- BZOJ2127Happiness
题目描述 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文 ...