diff --git a/package.json b/package.json
index 61b6edc..f38b1cb 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "vue": "^2.5.2",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1"
   },
@@ -31,6 +32,8 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
diff --git a/server/app.js b/server/app.js
new file mode 100644
index 0000000..662bcc9
--- /dev/null
+++ b/server/app.js
@@ -0,0 +1,41 @@
+var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+
+var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'jade');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;
diff --git a/server/bin/www b/server/bin/www
new file mode 100644
index 0000000..b09c4b4
--- /dev/null
+++ b/server/bin/www
@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('server:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}
diff --git a/server/package.json b/server/package.json
new file mode 100644
index 0000000..032898a
--- /dev/null
+++ b/server/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "server",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.0",
+    "http-errors": "~1.6.2",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0"
+  }
+}
diff --git a/server/public/stylesheets/style.css b/server/public/stylesheets/style.css
new file mode 100644
index 0000000..9453385
--- /dev/null
+++ b/server/public/stylesheets/style.css
@@ -0,0 +1,8 @@
+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00B7FF;
+}
diff --git a/server/routes/index.js b/server/routes/index.js
new file mode 100644
index 0000000..ecca96a
--- /dev/null
+++ b/server/routes/index.js
@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('index', { title: 'Express' });
+});
+
+module.exports = router;
diff --git a/server/routes/users.js b/server/routes/users.js
new file mode 100644
index 0000000..623e430
--- /dev/null
+++ b/server/routes/users.js
@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;
diff --git a/server/views/error.jade b/server/views/error.jade
new file mode 100644
index 0000000..51ec12c
--- /dev/null
+++ b/server/views/error.jade
@@ -0,0 +1,6 @@
+extends layout
+
+block content
+  h1= message
+  h2= error.status
+  pre #{error.stack}
diff --git a/server/views/index.jade b/server/views/index.jade
new file mode 100644
index 0000000..3d63b9a
--- /dev/null
+++ b/server/views/index.jade
@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
diff --git a/server/views/layout.jade b/server/views/layout.jade
new file mode 100644
index 0000000..15af079
--- /dev/null
+++ b/server/views/layout.jade
@@ -0,0 +1,7 @@
+doctype html
+html
+  head
+    title= title
+    link(rel='stylesheet', href='/stylesheets/style.css')
+  body
+    block content
diff --git a/src/App.vue b/src/App.vue
index 58b5359..b6ff438 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,11 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view/>
-    <router-view name="title1"/>
-    <router-view name="title2"/>
   </div>
 </template>
 
 <script>
+import MyHeader from '@/components/myHeader'
 export default {
   name: 'App'
 }
@@ -18,8 +16,9 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+}
+html,body {
+  padding: 0;
+  margin: 0;
 }
 </style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
index f3d2503..89ffdd0 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 16afed5..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank">
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank">
-          Forum
-        </a>
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank">
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank">
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a href="http://router.vuejs.org/" target="_blank">
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a href="http://vuex.vuejs.org/" target="_blank">
-          vuex
-        </a>
-      </li>
-      <li>
-        <a href="http://vue-loader.vuejs.org/" target="_blank">
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a href="https://github.com/vuejs/awesome-vue" target="_blank">
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "HelloWorld",
-    data() {
-      return {
-        msg: "Welcome to Your Vue.js App"
-      };
-    }
-  };
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-  h1,
-  h2 {
-    font-weight: normal;
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-
-  li {
-    display: inline-block;
-    margin: 0 10px;
-  }
-
-  a {
-    color: #42b983;
-  }
-</style>
\ No newline at end of file
diff --git a/src/components/carousel.vue b/src/components/carousel.vue
new file mode 100644
index 0000000..f7ff138
--- /dev/null
+++ b/src/components/carousel.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="carousel">
+    <swiper class="swiper_container" :options="swiperOption" ref="mySwiper">
+      <!-- slides -->
+      <swiper-slide class="swiper_item"><img src="../../static/carousel3.png" /></swiper-slide>
+      <swiper-slide class="swiper_item"><img src="../../static/carousel1.png" /></swiper-slide>
+      <swiper-slide class="swiper_item"><img src="../../static/carousel2.png" /></swiper-slide>
+      <!-- Optional controls -->
+      <div class="swiper-pagination" slot="pagination"></div>
+      <!-- <div class="swiper-button-prev" slot="button-prev"></div>
+      <div class="swiper-button-next" slot="button-next"></div>
+      <div class="swiper-scrollbar" slot="scrollbar"></div> -->
+    </swiper>
+  </div>
+</template>
+<script>
+import "swiper/dist/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+
+export default {
+  name: "carousel",
+  components: {
+    swiper,
+    swiperSlide
+  },
+  data() {
+    return {
+      swiperOption: {
+        // some swiper options/callbacks
+        // 所有的参数同 swiper 官方 api 参数
+        pagination: {
+          el: ".swiper-pagination",
+          dynamicBullets: true
+        },
+        // autoplay: {
+        //   delay: 2500,
+        //   disableOnInteraction: false
+        // }
+      }
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
+  mounted() {
+    // current swiper instance
+    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
+    console.log("this is current swiper instance object", this.swiper);
+    this.swiper.slideTo(3, 1000, false);
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.carousel {
+  .swiper_container {
+    width: 100%;
+    height: 180px;
+    .swiper_item {
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/myHeader.vue b/src/components/myHeader.vue
new file mode 100644
index 0000000..956793f
--- /dev/null
+++ b/src/components/myHeader.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="myHeader">
+    <img class="logo" src="@/assets/logo.png" />
+    <h3 class="title">Hxx-Luxury Store</h3>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "myHeader",
+    data() {
+      return {
+        msg: "Welcome to Your Vue.js App"
+      };
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+.myHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.15);
+  .logo {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    margin-left: 5px;
+  }
+  .title {
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    color: #fff;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 9dd7654..b999822 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,9 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Test from '@/view/test'
-import Title1 from '@/view/title1'
-import Title2 from '@/view/title2'
-import Goods from '@/view/goods'
+import Home from '@/view/home'
 
 Vue.use(Router)
 
@@ -11,10 +8,6 @@ export default new Router({
   routes: [{
     path: '/',
     name: '/',
-    components: {
-      default: Goods,
-      title1: Title1,
-      title2: Title2
-    }
+    component: Home,
   }]
 })
diff --git a/src/view/goods.vue b/src/view/goods.vue
deleted file mode 100644
index d57f829..0000000
--- a/src/view/goods.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-	<div class="goods">
-		This is goods:
-		<span>{{$route.query.goodsId}}</span>
-	</div>
-</template>
-<script>
-export default {};
-</script>
-<style scoped></style>
\ No newline at end of file
diff --git a/src/view/home.vue b/src/view/home.vue
new file mode 100644
index 0000000..c7ca13f
--- /dev/null
+++ b/src/view/home.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="home">
+    <my-header></my-header>
+    <carousel></carousel>
+  </div>
+</template>
+<script>
+import MyHeader from '@/components/myHeader'
+import Carousel from '@/components/carousel'
+export default {
+  name: "home",
+  components: {
+    MyHeader,
+    Carousel
+  },
+  data() {
+    return {
+      msg: "hello vue"
+    };
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
diff --git a/src/view/test.vue b/src/view/test.vue
deleted file mode 100644
index 0ca3064..0000000
--- a/src/view/test.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="test">
-    <!-- 动态路由 -->
-    This is id: {{$route.params.testId}}
-
-    <!-- 嵌套路由 -->
-    <router-link to="/test/title1">标题1</router-link>
-    <router-link to="/test/title2">标题2</router-link>
-    <router-view></router-view>
-
-    <!-- 编程式路由 -->
-    <div @click="gotoGoods">跳转到商品详情页面</div>
-
-     <!-- 命名路由 -->
-    <router-link v-bind:to="{name: 'goods'}">用命名路由的方式跳转到商品详情页面</router-link>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      msg: 'hello vue'
-    }
-  },
-  methods: {
-    gotoGoods() {
-      //this.$router.push('/goods');
-
-      // this.$router.push({
-      // 	path: '/goods?goodsId=666'
-      // });
-      
-      this.$router.push({
-      	path: '/goods',
-      	query: {
-      		goodsId: 666
-      	}
-      })
-    }
-  }
-}
-
-</script>
-<style scoped></style>
diff --git a/src/view/title1.vue b/src/view/title1.vue
deleted file mode 100644
index 7cda835..0000000
--- a/src/view/title1.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="title1">
-  	这里是title1的内容
-  </div>
-</template>
-<script>
-export default {
-}
-
-</script>
-<style scoped></style>
diff --git a/src/view/title2.vue b/src/view/title2.vue
deleted file mode 100644
index cab2f9d..0000000
--- a/src/view/title2.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="title2">
-  	这里是title2的内容
-  </div>
-</template>
-<script>
-export default {
-}
-
-</script>
-<style scoped></style>
diff --git a/static/carousel1.png b/static/carousel1.png
new file mode 100644
index 0000000..1c06c5b
Binary files /dev/null and b/static/carousel1.png differ
diff --git a/static/carousel2.png b/static/carousel2.png
new file mode 100644
index 0000000..a44a9a3
Binary files /dev/null and b/static/carousel2.png differ
diff --git a/static/carousel3.png b/static/carousel3.png
new file mode 100644
index 0000000..e4770f3
Binary files /dev/null and b/static/carousel3.png differ