feat: 优化整体代码

.prettierrc

@@ -4,14 +4,11 @@
   "singleQuote": true,
   "trailingComma": "none",
   "semi": false,
-  "wrap_line_length": 120,
-  "wrap_attributes": "auto",
   "proseWrap": "always",
   "arrowParens": "avoid",
   "bracketSpacing": true,
   "jsxBracketSameLine": true,
   "useTabs": false,
-  "eslintIntegration":true,
   "overrides": [
     {
       "files": ".prettierrc",

README.md

@@ -1,6 +1,10 @@
-# vue-h5-template
+# vue2-h5-template
 
-基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架
+基于 Vue 2.7 + Vue CLI 5 + Vant 2 + Sass + viewport 适配方案 + Axios 封装，构建手机端模板脚手架
+
+如果你想使用 Vue 3 版本，请查看 [vue-h5-template](https://github.com/sunniejs/vue-h5-template/tree/vue-h5-template)
+
+详细文档请查看 [在线文档](https://sunniejs.github.io/vue-h5-template/)
 
 掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7)
 
@@ -12,44 +16,43 @@
 
 ### Node 版本要求
 
-`Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或
+推荐 Node.js 14+（建议 16+），你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或
 [nvm-windows](https://github.com/coreybutler/nvm-windows) 在同一台电脑中管理多个 Node 版本。
 
-本示例 Node.js 12.14.1
-
 ### 启动项目
 
 ```bash
-
 git clone https://github.com/sunniejs/vue-h5-template.git
 
 cd vue-h5-template
 
-npm install
+# 切换到 vue2 分支
+git checkout vue2-h5-template
 
-npm run serve
+yarn install
+
+yarn serve
 ```
 
 <span id="top">目录</span>
 
-- √ Vue-cli4
 - [√ 配置多环境变量](#env)
 - [√ rem 适配方案](#rem)
-- [√ vm 适配方案](#vm)
+- [√ vw 适配方案](#vw)
 - [√ VantUI 组件按需加载](#vant)
 - [√ Sass 全局样式](#sass)
 - [√ Vuex 状态管理](#vuex)
 - [√ Vue-router](#router)
 - [√ Axios 封装及接口管理](#axios)
-- [√ Webpack 4 vue.config.js 基础配置](#base)
+- [√ vue.config.js 基础配置](#base)
 - [√ 配置 alias 别名](#alias)
 - [√ 配置 proxy 跨域](#proxy)
 - [√ 配置 打包分析](#bundle)
-- [√ 配置 externals 引入 cdn 资源 ](#externals)
-- [√ 去掉 console.log ](#console)
+- [√ 配置 externals 引入 cdn 资源](#externals)
+- [√ 去掉 console.log](#console)
 - [√ splitChunks 单独打包第三方模块](#chunks)
 - [√ 添加 IE 兼容 ](#ie)
-- [√ Eslint+Pettier 统一开发规范 ](#pettier)
+- [√ ESLint + Prettier 统一开发规范](#pettier)
 
 ### <span id="env">✅ 配置多环境变量 </span>
 

src/config/env.development.js

@@ -3,7 +3,6 @@ module.exports = {
   title: 'vue-h5-template',
   baseUrl: 'http://localhost:9018', // 项目地址
   baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
-  APPID: 'xxx',
-  APPSECRET: 'xxx',
+
   $cdn: 'https://www.sunniejs.cn/static'
 }

src/config/env.production.js

@@ -3,7 +3,5 @@ module.exports = {
   title: 'vue-h5-template',
   baseUrl: 'https://www.xxx.com/', // 正式项目地址
   baseApi: 'https://www.xxx.com/api', // 正式api请求地址
-  APPID: 'xxx',
-  APPSECRET: 'xxx',
   $cdn: 'https://www.sunniejs.cn/static'
 }

src/config/env.staging.js

@@ -2,7 +2,5 @@ module.exports = {
   title: 'vue-h5-template',
   baseUrl: 'https://test.xxx.com', // 测试项目地址
   baseApi: 'https://test.xxx.com/api', // 测试api请求地址
-  APPID: 'xxx',
-  APPSECRET: 'xxx',
   $cdn: 'https://www.sunniejs.cn/static'
 }

src/router/router.config.js

@@ -25,5 +25,10 @@ export const constantRouterMap = [
         meta: { title: '关于我', keepAlive: false }
       }
     ]
+  },
+  // 404 catch-all
+  {
+    path: '*',
+    redirect: '/home'
   }
 ]

src/store/getters.js

@@ -1,4 +1,5 @@
 const getters = {
-  userName: state => state.app.userName
+  userName: state => state.app.userName,
+  token: state => state.app.token
 }
 export default getters

src/store/modules/app.js

@@ -1,15 +1,27 @@
 const state = {
-  userName: ''
+  userName: '',
+  token: ''
 }
 const mutations = {
   SET_USER_NAME(state, name) {
     state.userName = name
+  },
+  SET_TOKEN(state, token) {
+    state.token = token
   }
 }
 const actions = {
   // 设置name
   setUserName({ commit }, name) {
     commit('SET_USER_NAME', name)
+  },
+  // 前端登出
+  fedLogOut({ commit }) {
+    return new Promise(resolve => {
+      commit('SET_TOKEN', '')
+      commit('SET_USER_NAME', '')
+      resolve()
+    })
   }
 }
 export default {

src/utils/request.js

@@ -21,7 +21,7 @@ service.interceptors.request.use(
       })
     }
     if (store.getters.token) {
-      config.headers['X-Token'] = ''
+      config.headers['X-Token'] = store.getters.token
     }
     return config
   },
@@ -39,7 +39,7 @@ service.interceptors.response.use(
     if (res.status && res.status !== 200) {
       // 登录超时,重新登录
       if (res.status === 401) {
-        store.dispatch('FedLogOut').then(() => {
+        store.dispatch('fedLogOut').then(() => {
           location.reload()
         })
       }

src/views/home/index.vue

@@ -10,28 +10,30 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-
-let list = ref([
-  'Vue-cli4',
-  '配置多环境变量',
-  'VantUI 组件按需加载',
-  'Sass 全局样式',
-  'Webpack 4',
-  'Vuex 状态管理',
-  'Axios 封装及接口管理',
-  'Vue-router',
-  'Webpack 4 vue.config.js 基础配置',
-  '配置 proxy 跨域',
-  '配置 alias 别名',
-  '配置 打包分析',
-  '配置 externals 引入 cdn 资源',
-  '去掉 console.log',
-  'splitChunks 单独打包第三方模块',
-  '添加 IE 兼容',
-  'Eslint+Pettier 统一开发规范'
-])
+<script>
+export default {
+  name: 'HomePage',
+  data() {
+    return {
+      list: [
+        'Vue 2.7 + Vue CLI 5',
+        '配置多环境变量',
+        'VantUI 组件按需加载',
+        'Sass 全局样式',
+        'Vuex 状态管理',
+        'Axios 封装及接口管理',
+        'Vue-router',
+        'vue.config.js 基础配置',
+        '配置 proxy 跨域',
+        '配置 alias 别名',
+        '配置 打包分析',
+        'postcss-px-to-viewport 适配',
+        'splitChunks 单独打包第三方模块',
+        'ESLint + Prettier 统一开发规范'
+      ]
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>