readme

README.md

@@ -6,6 +6,10 @@
 
 [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
 
+<p>
+  <img src="./static/demo.png" width="256" style="display:inline;">
+</p>
+
 ### Node 版本要求
 
 `Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或
@@ -25,19 +29,17 @@ npm install
 
 npm run serve
 ```
-
 <span id="top">目录</span>
 
-- [√ Vue-cli4](https://cli.vuejs.org/zh/guide/)
+- [√ Vue-cli4](https://cli.vuejs.org/zh/guide/){:target="_blank"}
 - [√ 配置多环境变量](#env)
 - [√ rem 适配方案](#rem)
 - [√ VantUI 组件按需加载](#vant)
-- [√ Sass](#sass)
+- [√ Sass 全局样式](#sass)
-- [√ Webpack 4](#webpack)
+- [√ Vuex 状态管理](#vuex)
-- [√ Vuex](#vuex)
 - [√ Axios 封装及接口管理](#axios)
 - [√ Vue-router](#router)
-- [√ vue.config.js 基础配置](#base)
+- [√ Webpack 4 vue.config.js 基础配置](#base)
 - [√ 配置 proxy 跨域](#proxy)
 - [√ 配置 alias 别名](#alias)
 - [√ 配置 打包分析](#bundle)
@@ -45,12 +47,7 @@ npm run serve
 - [√ 去掉 console.log ](#console)
 - [√ splitChunks 单独打包第三方模块](#chunks)
 - [√ 添加 IE 兼容 ](#ie)
-
+- [√ Eslint+Pettier 统一开发规范 ](#pettier)
-* Vuex
-* Axios 封装
-* 生产环境 cdn 优化首屏加速
-* babel 低版本浏览器兼容
-* Eslint+Pettier 统一开发规范
 
 ### <span id="env">✅ 配置多环境变量 </span>
 
@@ -259,55 +256,138 @@ Vue.use(Tabbar).use(TabbarItem)
 
 [▲ 回顶部](#top)
 
-### <span id="sass">✅ Sass </span>
+### <span id="sass">✅ Sass 全局样式</span>
 
 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
 
-在 `src/assets/css/`文件夹下包含了三个文件
+目录结构，在 `src/assets/css/`文件夹下包含了三个文件
 
-- `index.scss` 主入口，主要引入其他两个 scss 文件，和公共样式
+```bash
-- `variables.scss` 定义变量
+├── assets
-- `mixin.scss` 定义 `mixin` 方法
+│   ├── css
+│   │   ├── index.scss               # 全局通用样式
+│   │   ├── mixin.scss               # 全局mixin
+│   │   └── variables.scss           # 全局变量
+```
 
-你可以直接在 vue 文件下写 sass 语法
+每个页面自己对应的样式都写在自己的 .vue 文件之中
 
 ```html
+<style lang="scss">
+  /* global styles */
+</style>
+
 <style lang="scss" scoped>
-  .demo {
+  /* local styles */
-    .title {
+</style>
-      font-size: 12px;
+```
+
+`vue.config.js` 配置注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址
+
+```javascript
+const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
+
+module.exports = {
+  css: {
+    extract: IS_PROD,
+    sourceMap: false,
+    loaderOptions: {
+      scss: {
+        // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
+        // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
+        prependData: `
+          @import "assets/css/mixin.scss";
+          @import "assets/css/variables.scss";
+          $cdn: "${defaultSettings.$cdn}";
+          `
+      }
     }
   }
+}
+```
+
+在 `main.js` 中引用全局样式（发现在上面的，prependData 里设置`@import "assets/css/index.scss";`并没有应用全局样式这里在
+main.js 引入）
+
+设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问
+
+```javascript
+// 引入全局样式
+import '@/assets/css/index.scss'
+
+// 设置 js中可以访问 $cdn
+// 引入cdn
+import {$cdn} from '@/config'
+Vue.prototype.$cdn = $cdn
+```
+
+在 css 中引用
+
+```html
+<script>
+  console.log(this.$cdn)
+</script>
+<style lang="scss" scoped>
+  .logo {
+    width: 120px;
+    height: 120px;
+    background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
+  }
 </style>
 ```
 
 [▲ 回顶部](#top)
 
-### <span id="sass">✅ Sass </span>
+### <span id="vuex">✅ Vuex 状态管理</span>
 
-首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
+目录结构
 
-在 `src/assets/css/`文件夹下包含了三个文件
+```bash
-
+├── store
-- `index.scss` 主入口，主要引入其他两个 scss 文件，和公共样式
+│   ├── modules
-- `variables.scss` 定义变量
+│   │   └── app.js
-- `mixin.scss` 定义 `mixin` 方法
+│   ├── index.js
-
+│   ├── getters.js
-你可以直接在 vue 文件下写 sass 语法
-
-```html
-<style lang="scss" scoped>
-  .demo {
-    .title {
-      font-size: 12px;
-    }
-  }
-</style>
 ```
 
+`main.js` 引入
+
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
+```
+
+使用 
+
+```html
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  computed: {
+    ...mapGetters([
+      'userName'
+    ])
+  },
+
+  methods: {
+    // Action 通过 store.dispatch 方法触发
+    doDispatch() {
+      this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
+    }
+  }
+}
+</script>
+```
 [▲ 回顶部](#top)
 
-### <span id="base">✅ Vue-router </span>
+### <span id="router">✅ Vue-router </span>
 
 本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
 
@@ -430,13 +510,13 @@ import qs from 'qs'
 import request from '@/utils/request'
 //user api
 
-// 登录
+// 用户信息
-export function login(params) {
+export function getUserInfo(params) {
   return request({
-    url: '/user/login', // 接口地址
+    url: '/user/userinfo',
-    method: 'post', //  method
+    method: 'get',
-    data: qs.stringify(params)
+    data: qs.stringify(params),
-    // hideloading: true
+    hideloading: true // 隐藏 loading 组件
   })
 }
 ```
@@ -448,14 +528,14 @@ export function login(params) {
 import {getUserInfo} from '@/api/user.js'
 
 const params = {user: 'sunnie'}
-getUserInfo()
+getUserInfo(params)
   .then(() => {})
   .catch(() => {})
 ```
 
 [▲ 回顶部](#top)
 
-### <span id="base">✅ vue.config.js 基础配置 </span>
+### <span id="base">✅ Webpack 4 vue.config.js 基础配置 </span>
 
 如果你的 `Vue Router` 模式是 hash
 
@@ -580,7 +660,7 @@ npm run build
 
 [▲ 回顶部](#top)
 
-### <span id="proxy">✅ 配置 externals 引入 cdn 资源 </span>
+### <span id="externals">✅ 配置 externals 引入 cdn 资源 </span>
 
 这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可
 以实际测试一下。

src/api/user.js

@@ -9,7 +9,6 @@ export function login(params) {
     url: '/user/login',
     method: 'post',
     data: qs.stringify(params)
-    // hideloading: true
   })
 }
 // 用户信息

src/components/TabBar.vue

@@ -25,9 +25,7 @@ export default {
     }
   },
   methods: {
-    // onChange(index) {
+  
-    //   if (index === 1) window.location.href = 'https://github.com/sunniejs/vue-h5-template'
-    // }
   }
 }
 </script>

src/main.js

@@ -4,9 +4,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+
 // 引入全局样式
 import '@/assets/css/index.scss'
-
+// 设置 js中可以访问 $cdn
+import {$cdn} from '@/config'
+Vue.prototype.$cdn = $cdn
+ 
 // 全局引入按需引入UI库 vant
 import '@/plugins/vant'
 

src/store/modules/app.js

@@ -13,7 +13,6 @@ const actions = {
   }
 }
 export default {
-  namespaced: true,
   state,
   mutations,
   actions

src/views/home/about.vue

@@ -2,17 +2,19 @@
 <template>
   <div class="app-container">
     <div class="warpper">
-      <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
-      <h2 class="demo-home__desc">
-        A vue h5 template with Vant UI
-      </h2>
       <div class="list">
-        <div class="author"></div>
+        <div class="logo"></div>
+        <div class="demo-home__title"> VUE H5开发模板</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="wechat"></div>
+        <div class="wechat">
-        <div>关注公众号：回复“加群”即可加 前端仙女群</div>
+          <img :src="this.wechat" alt="">
+        </div>
+        <div class="item">关注公众号：回复“加群”即可加 前端仙女群</div>
+        <div class="item">{{userName}} <van-button v-if="userName==''" type="warning" size="small" @click="doDispatch">快点我~</van-button>
+        </div>
       </div>
     </div>
   </div>
@@ -20,14 +22,20 @@
 
 <script>
 // 请求接口
-import {getUserInfo} from '@/api/user.js'
+import { getUserInfo } from '@/api/user.js'
-
+import { mapGetters } from 'vuex'
 export default {
   data() {
-    return {}
+    return {
+      wechat: `${this.$cdn}/wx/640.gif`
+    }
   },
 
-  computed: {},
+  computed: {
+    ...mapGetters([
+      'userName'
+    ])
+  },
 
   mounted() {
     this.initData()
@@ -37,10 +45,17 @@ export default {
     // 请求数据案例
     initData() {
       // 请求接口数据，仅作为展示，需要配置src->config下环境文件
-      const params = {user: 'sunnie'}
+      const params = { user: 'sunnie' }
       getUserInfo(params)
-        .then(() => {})
+        .then(() => { })
-        .catch(() => {})
+        .catch(() => { })
+    },
+    // Action 通过 store.dispatch 方法触发
+    doDispatch() {
+      this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
+    },
+    goGithub(index) {
+      window.location.href = 'https://github.com/sunniejs/vue-h5-template'
     }
   }
 }
@@ -48,51 +63,46 @@ export default {
 <style lang="scss" scoped>
 .app-container {
   background: #fff;
-  height: 100%;
+  height: 100vh;
+  box-sizing: border-box;
   .warpper {
-    padding: 12px;
+    padding: 50px 12px 12px 12px;
-    .demo-home__title {
-      margin: 0 0 6px;
-      font-size: 32px;
-      .demo-home__title img,
-      .demo-home__title span {
-        display: inline-block;
-        vertical-align: middle;
-      }
-      img {
-        width: 32px;
-      }
-      span {
-        margin-left: 16px;
-        font-weight: 500;
-      }
-    }
-    .demo-home__desc {
-      margin: 0 0 20px;
-      color: rgba(69, 90, 100, 0.6);
-      font-size: 14px;
-    }
     .list {
       display: flex;
       flex-direction: column;
       align-items: center;
       color: #666;
       font-size: 14px;
+      .demo-home__title {
+        margin: 0 0 6px;
+        font-size: 32px;
+        .demo-home__title img,
+        .demo-home__title span {
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
       .item {
         font-size: 14px;
-        line-height: 24px;
+        line-height: 34px;
+        a {
+          text-decoration: underline;
+        }
       }
-    }
 
-    .author {
+      .logo {
-      width: 200px;
+        width: 120px;
-      height: 200px;
+        height: 120px;
-      background: url($cdn+'/weapp/me.png') center / contain no-repeat;
+        background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
-    }
+      }
-    .wechat {
+      .wechat {
-      width: 200px;
+        width: 200px;
-      height: 200px;
+        height: 200px;
-      background: url($cdn+'/wx/640.gif') center / contain no-repeat;
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
     }
   }
 }

src/views/home/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="app-container">
     <div class="warpper">
-      <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
+      <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
       <h2 class="demo-home__desc">
         A vue h5 template with Vant UI
       </h2>
@@ -19,12 +19,12 @@ export default {
         'Vue-cli4',
         '配置多环境变量',
         'VantUI 组件按需加载',
-        'Sass',
+        'Sass 全局样式',
         'Webpack 4',
-        'Vuex',
+        'Vuex 状态管理',
-        ' Axios 封装及接口管理',
+        'Axios 封装及接口管理',
         'Vue-router',
-        'vue.config.js 基础配置',
+        'Webpack 4 vue.config.js 基础配置',
         '配置 proxy 跨域',
         '配置 alias 别名',
         '配置 打包分析',
@@ -36,7 +36,9 @@ export default {
     }
   },
 
-  computed: {},
+  computed: {
+    
+  },
 
   mounted() {},