手机商城设备分离方案配置信息完成

assets/README.md

@@ -1,8 +0,0 @@
-# ASSETS
-
-This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/assets#webpacked
-
-**This directory is not required, you can delete it if you don't want to use it.**

components/README.md

@@ -1,6 +0,0 @@
-# COMPONENTS
-
-The components directory contains your Vue.js Components.
-Nuxt.js doesn't supercharge these components.
-
-**This directory is not required, you can delete it if you don't want to use it.**

components/mobile/index.js

@@ -0,0 +1,4 @@
+import mobileHeader from './mobileHeader.vue'
+import mobileFooter from './mobileFooter.vue'
+
+export { mobileFooter, mobileHeader }

components/mobile/mobileFooter.vue

@@ -0,0 +1,33 @@
+<template>
+<div class="mobile-footer">
+  <div>
+    <nuxt-link to="/provider" class="fa fa-camera-retro fa-3x"></nuxt-link>
+  </div>
+  <div>
+    <nuxt-link to="/provider" class="fa fa-camera-retro fa-3x"></nuxt-link>
+  </div>
+  <div>
+    <nuxt-link to="/provider" class="fa fa-camera-retro fa-3x"></nuxt-link>
+  </div>
+</div>
+</template>
+<script>
+
+</script>
+<style scoped>
+  .mobile-footer{
+    position:fixed;
+    bottom:0;
+    width:100%;
+    height:60px;
+    display:flex;
+    text-align: center;
+    justify-content:space-between;
+    align-items:center;
+    border-top:1px solid #ccc;
+    background: #f8f8f8;
+  }
+  .mobile-footer div{
+    flex:1;
+  }
+</style>

components/mobile/mobileHeader.vue

@@ -0,0 +1,29 @@
+<template>
+<div class="mobile-header">
+  <nuxt-link class="fa fa-camera-retro fa-3x span" to="/news"></nuxt-link>
+  <p>优软商城</p>
+  <span class="fa fa-camera-retro fa-3x"></span>
+</div>
+</template>
+<script>
+
+</script>
+<style>
+.mobile-header{
+  position:fixed;
+  top:0;
+  width:100%;
+  height:60px;
+  display:flex;
+  padding:.9rem;
+  justify-content:space-around;
+  border-bottom:1px solid #ccc;
+  background: #f8f8f8;
+}
+  .mobile-header p{
+    flex:1;
+    font-size:2.4rem;
+    text-align: center;
+    margin-top:10px;
+  }
+</style>

layouts/main.vue

@@ -1,16 +1,19 @@
 <template>
   <div id="main">
-    <header-view></header-view>
-    <main-header></main-header>
-    <main-nav></main-nav>
+    <header-view v-if="!isMobile"></header-view>
+    <main-header v-if="!isMobile"></main-header>
+    <main-nav v-if="!isMobile"></main-nav>
+    <mobile-header v-if="isMobile"></mobile-header>
     <nuxt/>
-    <footer-view></footer-view>
-    <right-bar></right-bar>
+    <footer-view v-if="!isMobile"></footer-view>
+    <right-bar v-if="!isMobile"></right-bar>
+    <mobile-footer v-else></mobile-footer>
   </div>
 </template>
 <script>
   import { Header, Footer, RightBar } from '~components/default'
   import { MainHeader, MainNav } from '~components/main'
+  import { mobileHeader, mobileFooter } from '~components/mobile'
   export default {
     name: 'main',
     components: {
@@ -18,7 +21,14 @@
       FooterView: Footer,
       RightBar,
       MainHeader,
-      MainNav
+      MainNav,
+      mobileHeader,
+      mobileFooter
+    },
+    computed: {
+      isMobile: function () {
+        return this.$store.state.option.isMobile
+      }
     }
 //    data () {
 //      return {

nuxt.config.js

@@ -16,6 +16,9 @@ module.exports = {
       { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' },
       { name: 'render', content: 'webkit' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'apple-mobile-web-app-capable', content: 'yes' },
+      { name: 'MobileOptimized', content: '320' },
+      { name: 'HandheldFriendly', content: 'true' },
       { hid: 'description', name: 'description', content: '优软商城（usoftmall.com）是中国领先的IC电子元器件现货采购交易网上商城，提供上千万种电子元器件现货采购交易，采购电子元器件就上优软商城！' }
     ],
     link: [
@@ -36,7 +39,7 @@ module.exports = {
     extend (config, { dev, isClient, isServer }) {
       config.resolve.alias['~utils'] = path.join(__dirname, 'utils')
       config.module.rules.push({
-        test: /\.scss$/,
+        test: /\.(scss|css)$/,
         loader: 'vue-style-loader!css-loader!sass-loader'
       })
       config.module.rules.push({
@@ -72,9 +75,7 @@ module.exports = {
     ]
   },
   css: [
-    /* {
-    src: 'font-awesome/css/font-awesome.css'
-  }, */{src: '~assets/scss/app.scss', lang: 'scss'}
+     { src: '~assets/scss/app.scss', lang: 'scss' }
     /* {
       src: 'swiper/dist/css/swiper.css'
     } */ /* , {

package.json

@@ -39,6 +39,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.7",
     "eslint": "^3.15.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-loader": "^1.6.1",
@@ -46,6 +47,7 @@
     "eslint-plugin-promise": "^3.4.1",
     "eslint-plugin-standard": "^2.0.1",
     "node-sass": "^4.5.3",
-    "sass-loader": "^6.0.6"
+    "sass-loader": "^6.0.6",
+    "vue-loader": "^13.3.0"
   }
 }

pages/README.md

@@ -1,7 +0,0 @@
-# PAGES
-
-This directory contains your Application Views and Routes.
-The framework reads all the .vue files inside this directory and create the router of your application.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/routing

pages/index.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="index">
-    <carousel>
-      <kind-category @loadchild="loadProductKinds"></kind-category>
-    </carousel>
-    <advert></advert>
-    <floor-list></floor-list>
-    <news></news>
-    <partner></partner>
+    <div v-if="isMobile">
+
+    </div>
+    <div v-else>
+      <carousel>
+        <kind-category @loadchild="loadProductKinds"></kind-category>
+      </carousel>
+      <advert></advert>
+      <floor-list></floor-list>
+      <news></news>
+      <partner></partner>
+    </div>
   </div>
 </template>
 <script>
@@ -36,6 +41,11 @@
       loadProductKinds (id) {
         this.$store.dispatch('loadAllProductKinds', {id})
       }
+    },
+    computed: {
+      isMobile: function () {
+        return this.$store.state.option.isMobile
+      }
     }
   }
 </script>

plugins/README.md

@@ -1,8 +0,0 @@
-# PLUGINS
-
-This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/plugins
-
-**This directory is not required, you can delete it if you don't want to use it.**

static/README.md

@@ -1,11 +0,0 @@
-# STATIC
-
-This directory contains your static files.
-Each file inside this directory is mapped to /.
-
-Example: /static/robots.txt is mapped as /robots.txt.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/assets#static
-
-**This directory is not required, you can delete it if you don't want to use it.**

store/index.js

@@ -28,8 +28,7 @@ export const actions = {
   nuxtServerInit (store, { params, route, isDev, isServer, req }) {
     // 检查设备类型
     const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
-    const isMobile = /(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
-
+    const isMobile = /(iPhone|iPad|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
     const cookie = isServer ? req.headers['cookie'] : null
     store.commit('option/SET_MOBILE_LAYOUT', isMobile)
     store.commit('option/SET_USER_AGENT', userAgent)