FEMessage blog

前端基础

环境配置

  1. Node.js LTS版本安装 https://nodejs.org/en/

  2. 淘宝源设置: npm config set registry https://registry.npm.taobao.org/

  3. nvm Node.js版本管理工具安装 https://github.com/creationix/nvm

  4. Yarn 包管理器安装 https://yarnpkg.com/lang/en/  注意：依赖统一使用Yarn安装，而不是NPM

  5. Chrome 最新版本安装 https://www.google.cn/chrome/

  6. Lantern 翻墙工具安装 https://github.com/getlantern/download（其他翻墙工具也行，目的是可以使用谷歌搜索）

  7. Webstorm IDE安装 https://www.jetbrains.com/webstorm/download/ (其他IDE也行，自己顺手即可)

注：默认使用淘宝源，不需要cnpm; 除了安装私服包要指定registry, 其他一概使用yarn + 淘宝源安装依赖

淘宝源设置也可以这样： vi ~/.npmrc

添加下面一行

registry=https://registry.npm.taobao.org/

技术栈说明

学习资料

Vue官方手册

Vue-Essentials-Cheat-Sheet.pdf

Nuxt官方手册

Nuxtjs-Cheat-Sheet.pdf

编码规范

约定，前端的风格偏向kebab-case，即字母开头命名，且全部字母为小写，单词之间统一使用中划线 “-” 连接。

Vue风格指南

https://cn.vuejs.org/v2/style-guide/

请务必花上时间读完。

组件风格

通读vue官方风格指南,  由于我们是kebab-case的重度用户，因此我们更看重的是在多个项目中保持相同的大小写规则，以下是摘取的适用于我们团队协作习惯的指南：

这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的

好例子：

components/
|- my-component.vue

好例子:

<!-- template -->
<my-component></my-component>

这里我们选择使用PascalCase, 因为在编程语言里，kebab-case并不是最佳实践。

好例子:

Vue.component('MyComponent', {
  // ...
})
​
import MyComponent from './my-component.vue'
​
export default {
  components: {MyComponent},
  // ...
}

Container

注意理解区分container与component的区别。虽然其概念源于react社区，但思想是通用的。

简单来说：

  • container是带有特殊业务逻辑的，一个常见的例子是会发送特定的ajax请求。
  • component是只包含UI渲染逻辑的，一般通过props传参，例如functional组件。

原文出处：https://medium.com/@learnreact/container-components-c0e67432e005

JS偏好

整洁的javascript

CSS约定

class的命名应该尽量精短、明确，同样是kebab-case

每个页面约定在页面代码的根元素加上 class=${page-name}
并且在后续的css代码中, 该页面的类选择器都放在.page-name中

<template>
  <div class="my-page">
    <div class="list"></div>
    <button class='submit-btn'></button>
  </div>
</template>

<style lang="stylus">
.my-page {
  .list {}
  .submit-btn {}
}
</style>

命名需要精简，但却也要有意义

// 推荐
#nav {}
.author {}

// 不推荐
#navigation {}
.atr {}

避免多余的选择器

// 推荐
#example {}
.error {}

// 不推荐
ul#example {}
div.error {}

参考

google style

团队github

https://github.com/FEMessage

团队npm

https://www.npmjs.com/settings/femessage/packages

常用yarn命令

install

安装依赖

yarn install 

# 可以简写成
yarn

add

添加依赖并安装

yarn add xxx

添加开发依赖并安装

yarn add xxx -D

添加peer依赖并安装

yarn add xxx -P

upgrade

更新至最新版本

yarn upgrade xxx --latest

更新至指定版本

yarn upgrade xxx@1.0.0

remove

删除依赖

yarn remove xxx

编程修养 →