git

build/webpack.base.conf.js

@@ -46,6 +46,10 @@ module.exports = {
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
+      {
+        test: /\.scss$/,
+        loaders: ['style', 'css', 'sass']
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',

package.json

@@ -44,8 +44,12 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^7.3.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "style-loader": "^3.3.1",
+    "swiper": "^8.0.5",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",

src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
@@ -11,13 +10,3 @@ export default {
 }
 </script>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/components/Swiper/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <slot></slot>
+    </div>
+    <slot name="pagination"></slot>
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper'
+// import SwiperCore, { Autoplay, Pagination } from 'swiper/core'
+
+// SwiperCore.use([Autoplay, Pagination])
+
+export default {
+  name: 'Swiper',
+  props: {
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      swiper: undefined
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.swiper = new Swiper(this.$el, this.options)
+      this.$emit('inited', this.swiper)
+    })
+  }
+}
+</script>
+
+<style>
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/SwiperSlide/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="swiper-slide">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SwiperSlide'
+}
+</script>
+
+<style>
+.swiper-slide {
+  text-align: center;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+</style>

src/layouts/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+
+export default {
+  name: 'AppLayout',
+  data() {
+    return {}
+  }
+}
+</script>

src/main.js

@@ -3,9 +3,12 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import Swiper from './components/Swiper'
+import SwiperSlide from './components/SwiperSlide'
 
 Vue.config.productionTip = false
-
+Vue.component('swiper', Swiper)
+Vue.component('swiper-slide', SwiperSlide)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/pages/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>aaaaaaaaaaaaaaaa</h1>
+    <index-image></index-image>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    IndexImage: () => import('./IndexImage.vue')
+  }
+}
+</script>
+
+<style>
+</style>

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import ColmoIndex from '@/pages'
 
 Vue.use(Router)
 
@@ -8,8 +8,8 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'ColmoIndex',
+      component: ColmoIndex
     }
   ]
 })