浅入深出Vue:前言
浅入深出Vue系列文章
之前大部分是在做后端,后来出于某些原因开始接触Vue
。深感前端变化之大,各种工具、框架令人眼花缭乱。不过正是这些变化,让前端开发更灵活。
博主在刚开始时,参考官网的各个步骤以及网上的博客。搭个环境,跑起来demo都费了大半天的劲。
本系列文章的初衷:
- 迅速的搭建起环境,不在环境、工具等其他因素上占用太多时间
-
Vue
框架由浅入深的理解部分知识点,能快速上手Vue
并将其实践至项目中 - 由
粗糙
到精致
,一步步优化代码,了解并使用一部分关于代码整洁、优化的知识 - 同时也是若羽对所学知识的一个巩固
本系列文章将由始至终围绕一个简易的个人博客项目展开,在阐述的同时利用这个项目来连贯起来。
系列文章分为四个阶段且均基于Vue-cli
,内容暂定为下:
同时,若羽将会在实践的过程中不断补充和完善目录及内容。
基础篇
工欲善其事必先利其器
- 工具准备
- 环境搭建
- 数据绑定
- 数据渲染
- 事件
- 路由
- 组件
- 子组件及数据传递
本篇主要介绍从无到有,从0开始搭建一个项目。
并且介绍Vue
中的一些基本概念,为后面搭下基础
主要会将
Vue
中的基础概念尽可能以简洁明了的方式阐述出来,围绕着数据驱动
去阐述。
入门篇
Hello Wrold
- 第一个页面
- 注册
- 登录
- 博客文章编辑
- 博客文章列表
- 发布
本篇主要正式开始利用基础篇所学到的知识开始写一个真正的项目
并接触如何与后端交互,如何渲染页面,如何定义简单的路由以及如何发布
当入门篇完结时,一个真实可以运行的小项目随之诞生,享受自己创建的快乐吧 :)
提高篇
混乱的代码会让思维变得更加混乱
- 代码整洁:封装
- 代码整洁:去重
- 代码整洁:专一
- 代码整洁:分层
- 代码整洁:质量
- 待定
提高篇的主要内容是在入门篇的基础上,对入门篇的代码进行重构,对于细节的打磨。
当代码/项目开始变得混乱时,维护起来将会花费比开发更多的时间,并且随着时间,这个成本将会越大。
对于如何组织代码,以及如何美化
代码,提出一部分建议并辅以实例。
深入篇
优雅之道
- 依赖注入:控制反转
- 全局异常处理
- 自动化路由
- 待定
深入篇分两部分,一部分讲解依赖注入来为整个项目做解耦。另一个部分则是关于Vue
的部分特性/组件深入使用。
相关技术、工具
技术上将会涉及到以下部分,vue-router
之类的vue组件未细写。
Vue
vue-cli
npm
ElementUI
开发工具上将会采用
WebStorm
采用WebStorm
的主要原因是因为提示、重构功能以及个人习惯。
也可以采用其它轻量级的工具,如:VsCode
, Sublime Text
, Atom
等,本系列文章将会使用WebStorm
。
最后
本系列文章,将会从以下几个维度进行讲解,确保不会因为工具、环境以及打包之类的其它因素分神,从而专注于钻研Vue
以及开发的项目。
- 所需工具
- 环境安装、配置
- 开发过程
- 发布
初次撰教程文,言辞不当或技术方面问题欢迎各位指教,用心讨论,共同提升。