工程化

项目初始化

npm init

生成package.json文件

{
  "name": "es6toes5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Judian",
  "license": "ISC"
}

1. es6转es5

安装babel工具

npm install -g babel-cli

安装到项目中

npm install --save-dev babel-preset-es2015 babel-cli

会在pageage.json文件中自动生成

    ...
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1"
    }

在根目录下创建.babelrc并写入:

{
	"presets": [
		"es2015"
	],
	"plugins": []
}

假设项目目录src，dist把src/index.js 文件转换成es5输出到dist/index.js，执行命令：

babel src/index.js -o dist/index.js 就转成es5输出了。

    ...
    "scripts": {
        ...
        "build": "babel src/index.js -o dist/index.js"
    },
    ...

在package.json 中添加，可执行命令：npm run build

2. 使用sass预处理器

安装通过官网：www.sass.hk/install/

这里使用：sudo gem install sass 和 sudo gem install compass安装，途中报错需要添加：xcode-select xcode-select --install

完成可通过sass -v,compass -v 查看版本。

在项目中添加sass/index.scss文件编写样式，执行compass watch 可生成stylesheets文件夹和.sass-cache文件夹。而sass/index.scss被编译到stylesheets/index.css成普通css语法。

sass/index.scss文件

body {
	div {
	  color: red;
	}
}

被编译为：stylesheets/index.csss文件

body div {
  color: red;
}

sass使用

变量 $name: value

// 定义变量
$jcolor: red;
$jbg: #fcc568;

body {
	div.title {
	    color: $jcolor;
	    background: $jbg;
	}
}

@import 引入

@import "./reset.scss";

@mixin和@include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

// mixin
@mixin importtext {
	color: $jcolor;
	font-size: 20px;
	font-weight: bold;
}
@mixin bordered($color: red,$width: 1px) {
	border: $width solid $color;
}
body {
	div.title {
	  @include importtext;
	  @include bordered;
	}
}

可变参数：不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

@extend与继承

一个选择器的样式从另一选择器继承 button

.btnbasic {
	border: none;
	padding: 10px 30px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	border-radius: 19px;
}
.btn-submit {
	@extend .btnbasic;
	background: red;
}

在vue中配置全局引用

mixin文件在src/style/mixin.scss

...
css: {
    ...
    loaderOptions: {
        scss: {
            prependData: `@import "~@/style/mixin.scss";`,
        }
    }
}

vue.config.js中配置