本文链接：https://blog.csdn.net/qq_33845788/article/details/78630735

vue-cli

runtime + compiler可以不基于.vue文件去开发，我们可以在运行时做编译;如果选runtime-only省略了模版的编译过程,编译过程是在webpack用vue-loader去编译.vue文件的时候去做的.vuejs的大小会变小6kb，我们就得依赖.vue文件的开发。

ESLint

在用vue-cli初始化vue项目时会询问是否使用ESLint,eslint是es6的代码风格检查器，可以统一代码的风格，并且可以帮助检查一些非常初级的错误.中文文档ESLint,配置在.eslintrc.js的plugins的rules里面.

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'eol-last': 0,
    'space-before-function-paren': 0
  }
}

stylus

stylus写出来的css结构层次感特别清晰,参考的文档Stylus

mixin

// 背景图片
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

// 不换行
no-wrap()
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap

// 扩展点击区域
extend-click()
  position: relative
  &:before
    content: ''
    position: absolute
    top: -10px
    left: -10px
    right: -10px
    bottom: -10px

把css的效果写成函数的形式，方便调用

variable

variable.styl可以根据设计的一些规范，去定义一些变量，这样去使用样式的时候就不用一个一个去手写了.

// 颜色定义规范
$color-background = #222
$color-background-d = rgba(0, 0, 0, 0.3)
$color-highlight-background = #333
$color-dialog-background = #666
$color-theme = #ffcd32
$color-theme-d = rgba(255, 205, 49, 0.5)
$color-sub-theme = #d93f30
$color-text = #fff
$color-text-d = rgba(255, 255, 255, 0.3)
$color-text-l = rgba(255, 255, 255, 0.5)
$color-text-ll = rgba(255, 255, 255, 0.8)

//字体定义规范
$font-size-small-s = 10px
$font-size-small = 12px
$font-size-medium = 14px
$font-size-medium-x = 16px
$font-size-large = 18px
$font-s

配置目录别名

前端目录的别名配置在build目录下webpack.base.conf里面的alias里面

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api')
    }
  }

配置了就可以直接使用这些目录别名了

path.join

这是node的模块path里面的方法,path.join()方法可以连接任意多个路径字符串。要连接的多个路径可做为参数传入。path.join()方法在接边路径的同时也会对路径进行规范化

var path = require('path');
//合法的字符串连接
path.join('/foo', 'bar', 'baz/asdf', 'quux', '..')
// 连接后
'/foo/bar/baz/asdf'

path.join(__dirname, '..', dir)
//__dirname这个变量名指的是当前目录，'..'表示向上查找,找到dir这个目录

path.resolve

这是node的模块path里面的方法,path.resolve()方法可以将多个路径解析为一个规范化的绝对路径。其处理方式类似于对这些路径逐一进行cd操作，与cd操作不同的是，这引起路径可以是文件，并且可不必实际存在
这里的resolve和path.resolve()方法不一样，这里的resolve是自己构造的函数

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

用到的插件

babel-runtime对es语法进行转义,fastclick解决移动端点击300ms延迟的问题,babel-polyfill(补丁)对es6的api比如promise这种进行转义.babel-polyfill一定要在main.js里引入.fastclick也要引入,fastclick.attach(document.body)是fastclick的推荐用法，解决300ms延迟的问题.

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'

import 'common/stylus/index.styl'

/* eslint-disable no-unused-vars */
// import vConsole from 'vconsole'

fastclick.attach(document.body)

驼峰写法

import MHeader from 'components/m-header/m-header'

引入组件这样写

<m-header></m-header>

用组件时这样写

移动端meta

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">