h5

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div class="app" id="app">
     <keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
@@ -13,10 +13,9 @@ import TabBar from '@/components/TabBar'
 
 export default {
   name: 'App',
-   components: {
+  components: {
     TabBar
-  },
+  }
 }
 </script>
-<style lang="scss">
+<style lang="scss"></style>
-</style>

src/api/user.js

@@ -8,8 +8,8 @@ export function login(params) {
   return request({
     url: '/user/login',
     method: 'post',
-    data: qs.stringify(params),
+    data: qs.stringify(params)
-   // hideloading: true
+    // hideloading: true
   })
 }
 // 用户信息
@@ -17,6 +17,7 @@ export function getUserInfo(params) {
   return request({
     url: '/user/userinfo',
     method: 'get',
-    data: qs.stringify(params)
+    data: qs.stringify(params),
+    hideloading: true
   })
 }

src/assets/css/index.scss

@@ -1,5 +1,14 @@
 @import './variables.scss';
 @import './mixin.scss';
+ 
+html,
+body
+.app {
+  color: #333333;
+  font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
+  background-color: $background-color;
+}
+ 
 .app-container{
-  padding-bottom:50px
+  padding-bottom:50px;
 }

src/main.js

@@ -5,7 +5,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 // 引入全局样式
-// import '@/assets/css/index.scss'
+import '@/assets/css/index.scss'
 
 // 全局引入按需引入UI库 vant
 import '@/plugins/vant'

src/views/home/about.vue

@@ -7,10 +7,12 @@
         A vue h5 template with Vant UI
       </h2>
       <div class="list">
+        <div class="author"></div>
         <div class="item">项目地址: <a href="https://github.com/sunniejs">https://github.com/sunniejs</a></div>
         <div class="item">项目作者: sunnie</div>
         <div class="item"></div>
-        <div class="author"></div>
+        <div class="wechat"></div>
+        <div>关注公众号：回复“加群”即可加 前端仙女群</div>
       </div>
     </div>
   </div>
@@ -18,19 +20,16 @@
 
 <script>
 // 请求接口
-import { getUserInfo } from '@/api/user.js'
+import {getUserInfo} from '@/api/user.js'
 
 export default {
   data() {
-    return {
+    return {}
-
-    }
   },
 
   computed: {},
 
   mounted() {
-
     this.initData()
   },
 
@@ -38,19 +37,20 @@ export default {
     // 请求数据案例
     initData() {
       // 请求接口数据，仅作为展示，需要配置src->config下环境文件
-      const params = { user: 'sunnie' }
+      const params = {user: 'sunnie'}
       getUserInfo(params)
-        .then(() => { })
+        .then(() => {})
-        .catch(() => { })
+        .catch(() => {})
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .app-container {
+  background: #fff;
+  height: 100%;
   .warpper {
     padding: 12px;
-    background: $background-color;
     .demo-home__title {
       margin: 0 0 6px;
       font-size: 32px;
@@ -75,6 +75,7 @@ export default {
     .list {
       display: flex;
       flex-direction: column;
+      align-items: center;
       color: #666;
       font-size: 14px;
       .item {
@@ -84,11 +85,15 @@ export default {
     }
 
     .author {
-      margin:10px auto;
       width: 200px;
       height: 200px;
       background: url($cdn+'/weapp/me.png') center / contain no-repeat;
     }
+    .wechat {
+      width: 200px;
+      height: 200px;
+      background: url($cdn+'/wx/640.gif') center / contain no-repeat;
+    }
   }
 }
 </style>

src/views/home/index.vue

@@ -12,19 +12,14 @@
 </template>
 
 <script>
-import TabBar from '@/components/TabBar'
-// 请求接口
-import { getUserInfo } from '@/api/user.js'
-
 export default {
-
   data() {
     return {
       list: [
         'Vue-cli4',
-        ' 配置多环境变量',
+        '配置多环境变量',
-        ' VantUI 组件按需加载',
+        'VantUI 组件按需加载',
-        ' Sass',
+        'Sass',
         'Webpack 4',
         'Vuex',
         ' Axios 封装及接口管理',
@@ -43,27 +38,16 @@ export default {
 
   computed: {},
 
-  mounted() {
+  mounted() {},
-    this.initData()
-  },
 
-  methods: {
+  methods: {}
-    // 请求数据案例
-    initData() {
-      // 请求接口数据，仅作为展示，需要配置src->config下环境文件
-      const params = { user: 'sunnie' }
-      getUserInfo(params)
-        .then(() => { })
-        .catch(() => { })
-    }
-  }
 }
 </script>
 <style lang="scss" scoped>
 .app-container {
   .warpper {
     padding: 12px;
-    background: $background-color;
+    background: #fff;
     .demo-home__title {
       margin: 0 0 6px;
       font-size: 32px;

vue.config.js

@@ -72,6 +72,8 @@ module.exports = {
         // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
         prependData: `
           @import "assets/css/index.scss";
+          @import "assets/css/mixin.scss";
+          @import "assets/css/variables.scss";
           $cdn: "${defaultSettings.$cdn}";
           `
       }