diff --git a/.babelrc b/.babelrc
index ad2e61542..11c0b05d1 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015-loose"],
+  "presets": [["es2015", { "loose": true }]],
   "plugins": ["transform-vue-jsx"],
   "comments": false
 }
diff --git a/Makefile b/Makefile
index 0b7bd180e..b6055c3e6 100644
--- a/Makefile
+++ b/Makefile
@@ -5,15 +5,12 @@ default: help
 build-theme: build-theme-default
 
 build-theme-default:
-	packages/theme-default/node_modules/.bin/gulp build --gulpfile packages/theme-default/gulpfile.js
-	cp -rf packages/theme-default/lib lib/theme-default
+	npm run build:theme
 
 install:
 	npm i --registry=http://registry.npm.taobao.org --ignore-scripts --loglevel=error
-	./node_modules/.bin/lerna bootstrap
 
-dev: install
-	node bin/iconInit.js
+dev:
 	npm run dev
 
 new:
@@ -21,11 +18,9 @@ new:
 
 dist:
 	npm run dist
-	make build-theme
 
 dist-all:
-	node bin/build-all.js
-	make build-theme
+	npm run dist:all
 
 deploy: install
 	@npm run deploy
@@ -38,8 +33,8 @@ gh-docs:
 pub:
 	./node_modules/.bin/kp $(filter-out $@,$(MAKECMDGOALS))
 
-pub-all: dist-all
-	./node_modules/.bin/lerna publish
+pub-all:
+	npm run pub:all
 
 help:
 	@echo "   \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
diff --git a/README.md b/README.md
index 26ac29c48..db46d3b12 100644
--- a/README.md
+++ b/README.md
@@ -31,8 +31,8 @@ import {
   // ...
 } from 'element-ui'
 
-Vue.component(Select.name, ElSelect)
-Vue.component(Button.name, ElButton)
+Vue.component(Select.name, Select)
+Vue.component(Button.name, Button)
 ```
 
 (roughly) to
@@ -50,8 +50,8 @@ import Select from 'element-ui/lib/theme-default/select.css';
 import Button from 'element-ui/lib/button';
 import Button from 'element-ui/lib/theme-default/button.css';
 
-Vue.component(Select.name, ElSelect)
-Vue.component(Button.name, ElButton)
+Vue.component(Select.name, Select)
+Vue.component(Button.name, Button)
 ```
 
 ## babel-plugin-component
@@ -70,20 +70,16 @@ Vue.component(Button.name, ElButton)
 ## development
 
 ### Building Tool Installation
+```shell
+# development => install packages -> build icon etc. -> run webpack
+$ npm run dev
 
-Element UI is built with [cooking](http://cookingjs.github.io/). So before running it you'll need to install [cooking](http://cookingjs.github.io/) globally.
+# Recommended use `npminstall` to install packages, it is so fast
+$ npm i npminstall -g
+$ npminstall
 
-```bash
-$ npm install cooking -g
-```
-
-### Commands
-
-```bash
-$ make install                        ---  install dependencies
-$ make dev                            ---  develop mode
-$ make dist                           ---  compile the project
-$ make dist-all                       ---  compile each component individually
+# build => build all component
+$ npm run dist
 ```
 
 ## Changelog
diff --git a/bin/new.js b/bin/new.js
index 253eaa5f5..a79c0286f 100644
--- a/bin/new.js
+++ b/bin/new.js
@@ -41,9 +41,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'El${ComponentName}',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/package.json b/package.json
index ee6902314..5b482342c 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,15 @@
     "src"
   ],
   "scripts": {
-    "dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
-    "dist": "rm -rf lib && cooking build -c scripts/cooking.conf.js -p && cooking build -c scripts/cooking.component.js -p",
+    "dev": "npm i && (node bin/iconInit.js & node bin/build-entry.js) && cooking watch -c scripts/cooking.demo.js",
+    "dist": "rm -rf lib && cooking build -c scripts/cooking.conf.js -p && cooking build -c scripts/cooking.component.js -p && npm run build:theme",
+    "dist:all": "node bin/build-all.js && npm run build:theme",
+    "build:theme": "gulp build --gulpfile packages/theme-default/gulpfile.js && cp -rf packages/theme-default/lib lib/theme-default",
     "deploy": "cooking build -c scripts/cooking.demo.js -p",
     "gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
-    "prepublish": "make dist"
+    "postinstall": "lerna bootstrap",
+    "pub": "npm run dist && kp",
+    "pub:all": "npm run dist:all && lerna publish"
   },
   "repository": {
     "type": "git",
@@ -27,27 +31,42 @@
     "url": "https://github.com/eleme/element-ui/issues"
   },
   "devDependencies": {
-    "theaterjs": "^3.0.0",
-    "object-assign": "^4.1.0",
+    "babel-core": "^6.14.0",
     "babel-helper-vue-jsx-merge-props": "^1.0.1",
+    "babel-loader": "^6.2.5",
     "babel-plugin-syntax-jsx": "^6.8.0",
     "babel-plugin-transform-vue-jsx": "^3.1.0",
-    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-preset-es2015": "^6.14.0",
+    "cheerio": "^0.18.0",
+    "cooking": "^1.0.0-rc.2",
+    "cooking-lint": "^0.1.2",
+    "cooking-vue2": "^0.1.4",
+    "css-loader": "^0.24.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
     "highlight.js": "^9.3.0",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.22.0",
+    "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
     "lerna": "2.0.0-beta.18",
     "markdown-it-container": "^2.0.0",
     "markdown-it-toc-and-anchor": "^4.1.1",
-    "oui-dom-events": "^0.2.1",
-    "postcss": "^5.0.21",
-    "cheerio": "^0.18.0",
+    "object-assign": "^4.1.0",
+    "postcss": "^5.1.2",
+    "postcss-loader": "^0.11.1",
+    "postcss-salad": "^1.0.5",
+    "style-loader": "^0.13.1",
+    "theaterjs": "^3.0.0",
     "uppercamelcase": "^1.1.0",
+    "url-loader": "^0.5.7",
     "vue": "^2.0.0-rc.3",
-    "vue-loader": "^9.4.0",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.2.3",
-    "vue-router": "^2.0.0-beta.2"
+    "vue-router": "^2.0.0-beta.2",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.15.1"
   }
 }
diff --git a/packages/alert/cooking.conf.js b/packages/alert/cooking.conf.js
index 4adcd4e0e..76dbab658 100644
--- a/packages/alert/cooking.conf.js
+++ b/packages/alert/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElAlert',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/autocomplete/cooking.conf.js b/packages/autocomplete/cooking.conf.js
index d9e2fb03f..640b10431 100644
--- a/packages/autocomplete/cooking.conf.js
+++ b/packages/autocomplete/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElAutocomplete',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/badge/cooking.conf.js b/packages/badge/cooking.conf.js
index 780ce4ffe..578005c55 100644
--- a/packages/badge/cooking.conf.js
+++ b/packages/badge/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElBadge',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/breadcrumb/cooking.conf.js b/packages/breadcrumb/cooking.conf.js
index 283dc2251..d4d80b49e 100644
--- a/packages/breadcrumb/cooking.conf.js
+++ b/packages/breadcrumb/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElBreadcrumb',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/button/cooking.conf.js b/packages/button/cooking.conf.js
index 46dc548c8..70c93458d 100644
--- a/packages/button/cooking.conf.js
+++ b/packages/button/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElButton',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/card/cooking.conf.js b/packages/card/cooking.conf.js
index c5f2a79e3..6545e96ad 100644
--- a/packages/card/cooking.conf.js
+++ b/packages/card/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElCard',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/cascader/cooking.conf.js b/packages/cascader/cooking.conf.js
index 6f6df4d40..b0d8c6848 100644
--- a/packages/cascader/cooking.conf.js
+++ b/packages/cascader/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElCascader',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/checkbox/cooking.conf.js b/packages/checkbox/cooking.conf.js
index 04758b042..bcc8b62c3 100644
--- a/packages/checkbox/cooking.conf.js
+++ b/packages/checkbox/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElCheckbox',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/col/cooking.conf.js b/packages/col/cooking.conf.js
index 5cc8ca2af..67190d5f3 100644
--- a/packages/col/cooking.conf.js
+++ b/packages/col/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElCol',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/date-picker/cooking.conf.js b/packages/date-picker/cooking.conf.js
index 860ef0731..e7d704240 100644
--- a/packages/date-picker/cooking.conf.js
+++ b/packages/date-picker/cooking.conf.js
@@ -3,15 +3,13 @@ var path = require('path');
 
 cooking.set({
   entry: {
-    index: path.join(__dirname, '_index.js')
+    index: path.join(__dirname, 'index.js')
   },
   dist: path.join(__dirname, 'lib'),
   template: false,
   format: 'umd',
   moduleName: 'ElDatePicker',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/dialog/cooking.conf.js b/packages/dialog/cooking.conf.js
index 319f4825c..eaf90248e 100644
--- a/packages/dialog/cooking.conf.js
+++ b/packages/dialog/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElDialog',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/dropdown/cooking.conf.js b/packages/dropdown/cooking.conf.js
index d83aa3d94..a751574bb 100644
--- a/packages/dropdown/cooking.conf.js
+++ b/packages/dropdown/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElDropdown',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/form/cooking.conf.js b/packages/form/cooking.conf.js
index 77cd62639..b208ea5f0 100644
--- a/packages/form/cooking.conf.js
+++ b/packages/form/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElForm',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/input-number/cooking.conf.js b/packages/input-number/cooking.conf.js
index 10f755083..cd4ad4585 100644
--- a/packages/input-number/cooking.conf.js
+++ b/packages/input-number/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElInputNumber',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/input/cooking.conf.js b/packages/input/cooking.conf.js
index 76456fecc..2c31952e3 100644
--- a/packages/input/cooking.conf.js
+++ b/packages/input/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElInput',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/loading/cooking.conf.js b/packages/loading/cooking.conf.js
index db5d5df19..c36ea233c 100644
--- a/packages/loading/cooking.conf.js
+++ b/packages/loading/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElLoading',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/menu/cooking.conf.js b/packages/menu/cooking.conf.js
index 9f8a6e78f..551386a18 100644
--- a/packages/menu/cooking.conf.js
+++ b/packages/menu/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElMenu',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/message-box/cooking.conf.js b/packages/message-box/cooking.conf.js
index c57c267bb..f5f99f542 100644
--- a/packages/message-box/cooking.conf.js
+++ b/packages/message-box/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElMessageBox',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/message/cooking.conf.js b/packages/message/cooking.conf.js
index e9dcae592..c67711bd4 100644
--- a/packages/message/cooking.conf.js
+++ b/packages/message/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElMessage',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+  extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/notification/cooking.conf.js b/packages/notification/cooking.conf.js
index 21bef7f12..2b2024aec 100644
--- a/packages/notification/cooking.conf.js
+++ b/packages/notification/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElNotification',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/pagination/cooking.conf.js b/packages/pagination/cooking.conf.js
index bc357e541..da8c4f2cb 100644
--- a/packages/pagination/cooking.conf.js
+++ b/packages/pagination/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElPagination',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/popover/cooking.conf.js b/packages/popover/cooking.conf.js
index 43e29dd80..e725401ae 100644
--- a/packages/popover/cooking.conf.js
+++ b/packages/popover/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElPopover',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/progress/cooking.conf.js b/packages/progress/cooking.conf.js
index e0851f192..6c2b99b32 100644
--- a/packages/progress/cooking.conf.js
+++ b/packages/progress/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElProgress',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/radio/cooking.conf.js b/packages/radio/cooking.conf.js
index 6f6df4d40..962c73067 100644
--- a/packages/radio/cooking.conf.js
+++ b/packages/radio/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElCascader',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/rate/cooking.conf.js b/packages/rate/cooking.conf.js
index 6de801ab0..21f681bf3 100644
--- a/packages/rate/cooking.conf.js
+++ b/packages/rate/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElRate',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/row/cooking.conf.js b/packages/row/cooking.conf.js
index c90fc5cd8..c028807b0 100644
--- a/packages/row/cooking.conf.js
+++ b/packages/row/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElRow',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/select-dropdown/cooking.conf.js b/packages/select-dropdown/cooking.conf.js
index 25b86b89a..84984f713 100644
--- a/packages/select-dropdown/cooking.conf.js
+++ b/packages/select-dropdown/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElSelectMenu',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/select/cooking.conf.js b/packages/select/cooking.conf.js
index b582e5547..f27b627f2 100644
--- a/packages/select/cooking.conf.js
+++ b/packages/select/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElSelect',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/slider/cooking.conf.js b/packages/slider/cooking.conf.js
index e61b101e4..e78a54ba0 100644
--- a/packages/slider/cooking.conf.js
+++ b/packages/slider/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElSlider',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/spinner/cooking.conf.js b/packages/spinner/cooking.conf.js
index 56c9a6afd..ae4b4b00f 100644
--- a/packages/spinner/cooking.conf.js
+++ b/packages/spinner/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElSpinner',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/steps/cooking.conf.js b/packages/steps/cooking.conf.js
index a839acb17..2b63e86b2 100644
--- a/packages/steps/cooking.conf.js
+++ b/packages/steps/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElSteps',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/switch/cooking.conf.js b/packages/switch/cooking.conf.js
index 6f6df4d40..962c73067 100644
--- a/packages/switch/cooking.conf.js
+++ b/packages/switch/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElCascader',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/table/cooking.conf.js b/packages/table/cooking.conf.js
index 18ba95ef1..82e6489f4 100644
--- a/packages/table/cooking.conf.js
+++ b/packages/table/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElTable',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/tabs/cooking.conf.js b/packages/tabs/cooking.conf.js
index 42d91beb1..1e38b2773 100644
--- a/packages/tabs/cooking.conf.js
+++ b/packages/tabs/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElTabs',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/tag/cooking.conf.js b/packages/tag/cooking.conf.js
index dd83ef37b..7d8d98599 100644
--- a/packages/tag/cooking.conf.js
+++ b/packages/tag/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElTag',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/tooltip/cooking.conf.js b/packages/tooltip/cooking.conf.js
index 0a4da21de..bba55d7d4 100644
--- a/packages/tooltip/cooking.conf.js
+++ b/packages/tooltip/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElTooltip',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/tree/cooking.conf.js b/packages/tree/cooking.conf.js
index 1d2acd4aa..630745b31 100644
--- a/packages/tree/cooking.conf.js
+++ b/packages/tree/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElTree',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/packages/upload/cooking.conf.js b/packages/upload/cooking.conf.js
index 535bf3722..7af8e7361 100644
--- a/packages/upload/cooking.conf.js
+++ b/packages/upload/cooking.conf.js
@@ -9,9 +9,7 @@ cooking.set({
   template: false,
   format: 'umd',
   moduleName: 'ElUpload',
-  extractCSS: 'style.css',
-
-  extends: ['vue', 'saladcss']
+ extends: ['vue2']
 });
 
 cooking.add('resolve.alias', {
diff --git a/scripts/cooking.component.js b/scripts/cooking.component.js
index a5a6252c4..aa1d91293 100644
--- a/scripts/cooking.component.js
+++ b/scripts/cooking.component.js
@@ -14,10 +14,9 @@ cooking.set({
   entry: entries,
   dist: './lib',
   clean: false,
-  template: false,
   format: 'cjs',
   extractCSS: '[name]/style.css',
-  extends: ['vue']
+  extends: ['vue2']
 });
 
 cooking.add('output.filename', '[name]/index.js');
diff --git a/scripts/cooking.conf.js b/scripts/cooking.conf.js
index 34d2167e5..715e43d3c 100644
--- a/scripts/cooking.conf.js
+++ b/scripts/cooking.conf.js
@@ -5,11 +5,10 @@ cooking.set({
   entry: './src/index.js',
   dist: './lib',
   clean: false,
-  template: false,
   format: 'umd',
   moduleName: 'ELEMENT',
   extractCSS: 'style.css',
-  extends: ['vue']
+  extends: ['vue2']
 });
 
 cooking.add('output.filename', 'index.js');
diff --git a/scripts/cooking.demo.js b/scripts/cooking.demo.js
index e0f3d7220..1ae6fe75d 100644
--- a/scripts/cooking.demo.js
+++ b/scripts/cooking.demo.js
@@ -18,7 +18,6 @@ cooking.set({
   },
   dist: './examples/element-ui/',
   template: './examples/index.template.html',
-
   publicPath: '/element-ui/',
   hash: true,
   devServer: {
@@ -26,27 +25,32 @@ cooking.set({
     log: false,
     publicPath: '/'
   },
+  minimize: true,
   chunk: 'vendor',
   extractCSS: true,
-  extends: {
-    vue: true,
-    lint: true,
-    saladcss: {
-      browser: ['ie > 8', 'last 2 version'],
-      features: {
-        'bem': {
-          'shortcuts': {
-            'component': 'b',
-            'modifier': 'm',
-            'descendent': 'e'
+  extends: ['vue2', 'lint'],
+  postcss: function(webapck) {
+    return [
+      require('postcss-salad')({
+        browser: ['ie > 8', 'last 2 version'],
+        features: {
+          'partialImport': {
+            addDependencyTo: webapck
           },
-          'separators': {
-            'descendent': '__',
-            'modifier': '--'
+          'bem': {
+            'shortcuts': {
+              'component': 'b',
+              'modifier': 'm',
+              'descendent': 'e'
+            },
+            'separators': {
+              'descendent': '__',
+              'modifier': '--'
+            }
           }
         }
-      }
-    }
+      })
+    ]
   }
 });