init project

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.5.17"
+    "element-ui": "^2.4.5",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.2.0",
@@ -17,6 +20,10 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0-0",
+    "node-sass": "^4.10.0",
+    "sass-loader": "^7.1.0",
+    "style-resources-loader": "^1.2.1",
+    "vue-cli-plugin-element": "^1.0.0",
     "vue-template-compiler": "^2.5.17"
   },
   "eslintConfig": {

src/App.vue

@@ -1,28 +1,21 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
   }
 }
 </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;
-}
+  html,body {
+    padding: 0;
+    margin: 0;
+  }
 </style>

src/components/HelloWorld.vue

@@ -35,6 +35,13 @@ export default {
   name: 'HelloWorld',
   props: {
     msg: String
+  },
+  data() {
+    return {
+      baseUrl: process.env.BASE_URL
+    }
+  },
+  mounted() {
   }
 }
 </script>

src/main.js

@@ -1,8 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import store from './store'
+import './plugins/element.js'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  router,
+  store,
+  render: h => h(App)
 }).$mount('#app')

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(Element)

src/router.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (about.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+    }
+  ]
+})

src/store.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+})

src/styles/about.scss

@@ -0,0 +1,4 @@
+$red: red;
+.about {
+  background: $blue;
+}

src/styles/imports.scss

@@ -0,0 +1 @@
+$blue: blue;

src/views/About.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1 class="green">This is an about page</h1>
+  </div>
+</template>
+<style lang="scss" scoped>
+  $red: red;
+  .about {
+    background: $blue;
+  }
+  .green {
+    color: green;
+  }
+  // @import "../styles/about.scss";
+</style>

src/views/Home.vue

@@ -0,0 +1,190 @@
+<template>
+  <el-container>
+    <el-header style="padding: 0;height: auto;">
+      <div>
+        <div class="logoDiv">
+          <img src="https://crypko.ai/static/images/logo-header.png" class="logo-icon">
+          <div class="myTab">
+            <el-button type="text">注册</el-button>
+            <el-button type="text">登录</el-button>
+          </div>
+        </div>
+        <div class="myMenu">
+          <el-menu mode="horizontal" style="border-bottom: none;">
+            <el-menu-item index="1">全部</el-menu-item>
+            <el-menu-item index="2">待出售</el-menu-item>
+            <el-menu-item index="3">可租赁</el-menu-item>
+            <el-menu-item index="4">最新</el-menu-item>
+          </el-menu>
+          <el-input style="width: 200px;" size="small" placeholder="编码、名称、#标签..." suffix-icon="el-icon-search"></el-input>
+        </div>
+      </div>
+    </el-header>
+    <el-main>
+      <div class="mainContainer">
+        <el-card v-for="(x, i) in cardList" :key="i" :body-style="{ padding: '0px' }" class="mycard">
+          <div class="imageContainer">
+            <img src="https://img.crypko.ai/daisy/03b2239f442b83f6516ead0461328346e1bf3422_sm.jpg" class="image">
+          </div>
+          <div class="card-below">
+            <div>
+              <span>{{x.name}}</span>
+            </div>
+            <div>
+              <span >{{x.gen}}</span>
+              <span>{{x.num}}</span>
+            </div>
+          </div>
+        </el-card>
+      </div>
+      <div style="margin-top: 4rem;margin-bottom: 2rem;">
+        <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="currentPage4"
+                :page-sizes="[100, 200, 300, 400]"
+                :page-size="100"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="400">
+        </el-pagination>
+      </div>
+    </el-main>
+    <el-footer style="border-top: solid 1px #e6e6e6;" class="myFooter">
+      <div>
+        <p>市场</p>
+        <p>常见问题</p>
+        <p>教程</p>
+      </div>
+      <div>
+        <p>关于</p>
+        <p>白皮书</p>
+        <p>关于</p>
+        <p>隐私政策</p>
+      </div>
+      <div>
+        <p>telegram</p>
+        <p>twitter</p>
+        <p>youtube</p>
+      </div>
+      <div>
+        <p>Copyright © 2018 Andoromeda</p>
+      </div>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  data() {
+    return {
+      currentDate: new Date(),
+      cardList: [
+          {
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          },{
+              name: 'Crypko #712044',
+              gen: '第14世代 · R',
+              num: '71'
+          }
+      ]
+    }
+  }
+}
+</script>
+<style scoped>
+  .myMenu {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid 1px #e6e6e6;
+    padding: 0 2rem;
+  }
+  .logo-icon {
+    width: 300px;
+  }
+  .logoDiv {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 2rem;
+  }
+  .myTab {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .imageContainer {
+    height: 140px;
+    width: 140px;
+    position: relative;
+  }
+  .image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    z-index: 1;
+    transition-duration: .3s;
+    transition-property: all;
+    transition-timing-function: ease-out;
+    transform: translateZ(0);
+  }
+  .mainContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+  .card-below {
+    padding: 6px 10px;
+    background-color: rgb(134, 205, 123);
+    font-size: 14px;
+    color: #fff;
+  }
+  .mycard {
+    margin-right: 4rem;
+    margin-bottom: 4rem;
+  }
+  .myFooter {
+    display: flex;
+    padding: 20px 20px 40px 20px;
+    flex-direction: row;
+    height: auto!important;
+    justify-content: space-between;
+    font-size: 14px;
+    color: #909399;
+  }
+  .myFooter p {
+    line-height: 14px;
+  }
+</style>

vue.config.js

@@ -0,0 +1,33 @@
+const path = require('path')
+module.exports = {
+    css: {
+        // loaderOptions: {
+        //     sass: {
+        //         data: `@import "@/styles/imports.scss";`
+        //     },
+        // },
+    },
+    configureWebpack: {},
+    chainWebpack: (config) => {
+        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
+        types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
+        config.module.rule('images').use('url-loader')
+            .loader('url-loader')
+            .tap(options => Object.assign(options, { limit: 10240 }));
+    },
+    pluginOptions: {},
+    devServer: {
+        host: '0.0.0.0',
+        port: 8081,
+    }
+};
+
+function addStyleResource(rule) {
+    rule.use('style-resource')
+        .loader('style-resources-loader')
+        .options({
+            patterns: [
+                path.resolve(__dirname, './src/styles/imports.scss'),
+            ],
+        })
+}