前端开发手册

tDragonL

已于 2022-02-15 08:55:23 修改

阅读量745

点赞数

文章标签： webpack 前端 vue.js npm node.js

于 2022-01-25 10:09:04 首次发布

本文链接：https://blog.csdn.net/tDragonL/article/details/122679379

版权

1、学习方向

react、angular、vue，以及Google 正式推出稳定版的 flutter，等框架；
node（commonJS）、ECMAscript6、AMD（requireJS）、CMD（seaJS)等规范（AMD、CMD 已经过时）;
webpack、babel、eslint、npm（yarn、cnpm 等）等工具
typescript、coffeescript
less、sass、stylus、HTML5、css3

1.1 推荐学习网站

GitHub： GitHub: Where the world builds software · GitHubhttps://github.com/
掘金：掘金 - 代码不止，掘金不停https://juejin.im/timeline
阮一峰《ECMAScript6 入门》： ES6 入门教程http://es6.ruanyifeng.com/
廖雪峰： Home - 廖雪峰的官方网站https://www.liaoxuefeng.com/
W3C: w3school 在线教程http://www.w3school.com.cn/

1.2 node（commonJS）

了解 node 运行方式，清除 node 运行与浏览器运行的差异；node 使用的 commonJs 与 ECMAScript 在模块化定义和引用上的差异。

熟练掌握 npm 常用命令，能够使用它下单依赖，提升开发效率。我们项目中使用的是 yarn，替代了 npm，非官方提供。Yarn 是为了弥补 npm 的一些缺陷而出现的，由 Facebook、Google、Exponent 和 Tilde 联合推出。所以可以不掌握 npm，但是一定要了解 yarn 的命令。

npm 和 yarn 的区别: npm和yarn的区别，我们该如何选择? - 简书

1.3 ECMAScript6

按照《JavaScript 高级程序设计》一书中的说法，我们常用的 javaScript 广义上其实包含了三大部分：ECMAscript、DOM、BOM。

ECMAscript：国际标准语言

DOM：Document Object module

BOM：Browser Object Model

其中 ECMAscript 由欧洲标准化委员会制定，DOM 遵循 W3C 的标准，BOM 由浏览器厂商制定。

我们常说的 es6 就是 ECMAscript6。学习地址即上面单的阮一峰《ECMAScript6 入门》，该书语意详实。

ES6 目前 95%以上的功能可以运行 nodejs 中，并且部分浏览器（火狐、谷歌）已经开始支持 es6 新特性，目前 ES6 在浏览器端使用需要通过 babel 等编译（转换器）。新版本出现了很多新的特性：如箭头操作符、类的支持、增强的对象字面量、字符串模板、解构、参数默认值，不定参数，拓展参数、 let 与 const 关键字、for of 值遍历、iterator, generator、模块、Proxies、Symbols、Math，Number，String， Object 的新 API、Promises 等等。

建议重点学习：

let 和 const
解构赋值
对象扩展
Class
Promise
Module

1.4 vue 基础

vue 基础学习，它时下最流行的前端架构 MVVM，目前世界上最火的 web 开发框架 angular 和 vue 都是基于这个理念；有别于原有的 MVC 和 MVP 概念，双向数据绑定会使得开发人员剥离视图与逻辑之间的关系，不必要像 jquery 那样同时处理（本质上说，jquery 不是前端框架，仅仅是一个工具集，非常完备的工具集）。

vue 官网链接: 介绍 — Vue.js

建议重点学习：

模板语法
计算属性与侦听器
条件渲染
列表渲染
事件处理
表单输入绑定

1.5 vue-router

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

1.6 vuex

状态管理是所有 web 框架都会涉及的部分，按我的理解，该概念的出现时由 SPA 在前端技术中的发展衍生出的生态系统。

在 vue 框架的 SPA 中，用户看到的界面实际上是 vue 模块，用户能够体验到原生应用的体验。状态管理概念实际上是实现组件间数据共享，让页面视图与数据的双向数据绑定形成了多视图同时指向同一数据，这样多个页面模块之间切换做到了无缝链接。

了解其中的 state、getters、mutation、action

vuex: Vuex 是什么？ | Vuex

1.7 axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios中文网|axios API 中文文档 | axios

2、开发工具

Visual Studio Code

【开发人员推荐使用】

Visual Studio Code 是一个轻量级但是十分强大的源代码编辑器，重要的是它在 Windows， OS X 和 Linux 操作系统的桌面上均可运行。Visual Studio Code 内置了对 JavaScript， TypeScript 和 Node.js 语言的支持，并且为其他语言如 C++， C#， Python， PHP 等提供了丰富的扩展库。

Webstorm

Webstorm 是一个强大的前端开发 ide,webstorm NB 的智能提示功能非常强大，还省去了用别的 IDE 时候不停地按 Ctrl+s 保存，webstorm 都是自动保存的完全解放你的双手，下面列举一下 webstorm 的特型和一些常用的快捷键，希望大家可以快速掌握提高开发效率。

3、命名规范

3.1 Vue 文件命名规范

首字母大写方式，如：UserFee.vue

3.2 文件目录命名规范

全部小写，如：getmaster，按照功能区分目录树

3.3 Component 命名规范

全部小写，单词中间使用 “-” 分开，如：

<
app-header
>
<
/app-header
>

3.4 组件内容量要求

如果组件臃肿，建议按照单一的原则将其拆分成更小的组件并，建议不要超过 100 行代码

3.5 Js 中变量值使用符号包裹

Js 中使用单引号，如：let temp = ‘hello’

3.6 js 判断变量值是否相等

Js 中判断是否相等使用‘===’，杜绝使用‘==’

3.7 v-for 使用 key 配合

为方便便维护内部组件及其子树的状态。甚至在元素上维护可预测

的行为，使用如下：

<
ul
>
<
li v-for="todo in todos" :key="todo.id"
>

    {{ todo.text }}

<
/li
>
<
/ul
>

3.8 禁止直接操作 dom

禁止直接操作，如：$(“#temp”).()

3.9 Vue 文件中 method 命名

驼峰命名方式，使用动词开头，如：setUserInfo

3.10 在 vue 文件中箭头函数内不用使用 this 变量

使用 function 关键字

如：

computed：{
  temp：function（）{this… . }
}

3.11 Vue 文件中清晰化表达

建议使用顺序：name; extends; props, data and computed;components; watch and methods; lifecycle methods

3.12 不要在 mutation 中调用另外的 mutation

3.13 使用 mapGetter、mapActions 取存变量值

3.14 开发过程尽量使用 es6

开发过程使用 es6 相关特性编程

3.15 样式文件设置作用域

使用 scoped 为样式文件增加作用域，如：

<
style scoped
>

3.16 建议不使用 jquery

为减少前端工程打包大小，尽量使用原生编写

3.17 禁止隐形的子父通信

传递数据是自上而下的，禁止使用：this.$parent

3.18 生命周期相关

created：

data 已经 init，做数据的操作，对 vue 实例对象做一些处理

mounted：

【关键】发起 ajax 请求，数据初始化 beforeDestory：

清空组件相关内容

3.19 路由模式

使用 history 模式的话，请在 router 中配置 fallback: false，

原因：防止浏览器不支持 history 模式的话，转到 hash 模式，

导致不必要的麻烦。

new Router({
  mode: 'history',
  fallback: false,
  routes: [
    ...
  ]
})

tDragonL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发手册

1、学习方向 react、angular、vue，以及Google 正式推出稳定版的 flutter，等框架； node（commonJS）、ECMAscript6、AMD（requireJS）、CMD（seaJS)等规范（AMD、CMD 已经过时）; webpack、babel、eslint、npm（yarn、cnpm 等）等工具 typescript、coffeescript less、sass、stylus、HTML5、css31.1 推荐学习网..
复制链接

扫一扫