浅入深出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以及开发的项目。

  • 所需工具
  • 环境安装、配置
  • 开发过程
  • 发布

初次撰教程文,言辞不当或技术方面问题欢迎各位指教,用心讨论,共同提升。

浅入深出Vue:前言的更多相关文章

  1. 浅入深出Vue系列

    浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...

  2. 浅入深出Vue:环境搭建

    浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...

  3. 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  4. 浅入深出Vue:工具准备之WebStorm安装配置

    浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...

  5. 浅入深出Vue:第一个页面

    今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...

  6. 浅入深出Vue:代码整洁之封装

    深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...

  7. 浅入深出Vue:文章列表

    终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...

  8. 浅入深出Vue:自动化路由

    在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...

  9. 浅入深出Vue:代码整洁之去重

    在开始本篇的主题之前,让我们把上次遗留下来的问题都清理一下: 将其他组件中 axios 请求的地方封装起来. 这里就不把代码放在开头了,相关代码都放在文末,有兴趣了解的童鞋可以先往下翻. 好了, 我们 ...

随机推荐

  1. 逆向-攻防世界-logmein

    iDA载入程序,shift+F12查看关键字符串,找到双击来到所在地址,进入函数 然后进入主函数, 经过分析,可以得出:输入的字符要等于  经过处理的v7和v8的异或.v8很明显,但是v7是怎么回事呢 ...

  2. ASP.NET Core 2.2 十九. Action参数的映射与模型绑定

    前文说道了Action的激活,这里有个关键的操作就是Action参数的映射与模型绑定,这里即涉及到简单的string.int等类型,也包含Json等复杂类型,本文详细分享一下这一过程.(ASP.NET ...

  3. 周末学习笔记——day03(模块,包)

    一,复习 ''' 装饰器 @wraper # fn = wraper(fn) def fn(): pass def wrap(arg): def outer(func): # 可以用arg def i ...

  4. 【算法】深度优先 马走日 Hamilton routes

    在n*m的棋盘中,马只能走“日” 字.马从位置(x,y)处出发,把棋盘的每一格都走一次,且只走一次.找出所有路径. ××××××××××××× 类似问题: 在半个中国象棋棋盘上,马在左下角(1,1)处 ...

  5. Python_if

    if if c语言中的if语句格式如下: if (条件) { 结果} python的格式与其不同,定义了自己的格式,更加的简明: if 条件 : 结果 print(111) if 3 > 2: ...

  6. Vue—组件传值及vuex的使用

    一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...

  7. RMQ 问题 ST 算法(模板)

    解决区间查询最大值最小值的问题 用 $O(N * logN)$ 的复杂度预处理 查询的时候只要 $O(1)$ 的时间  这个算法是 real 小清新了   有一个长度为 N 的数组进行 M 次查询 可 ...

  8. Ubutun 16.04添加操作命令审计

    1.启用/var/log/messages,监控系统命令 说明:由于需要把操作命令记录到/var/log/messages,但是ubuntu默认并没有开启日志写入到这个文件 tchua@ubuntu: ...

  9. 注意:QQ影音视频压缩时长丢失

    客户宣传片发来,高清的,比较大,500多M,需要转成小一点的,放在客户网站上,于是用QQ影音转码压缩下,变成低质量的.如下 一切都很顺利,提示进度100%! 这一切都是电脑自动的,又是提示成功的,千想 ...

  10. axios拦截http拦截

    一,判断登录页面 const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: ' ...