vue 3 Refactor

Author: xusenlin

.browserslistrc

@@ -1,2 +1,3 @@
-NODE_ENV = 'production'
-VUE_APP_MODE = 'buildDev'
+VUE_APP_ENV='Dev'
+VUE_APP_REQ_URL='https://xusenlin.com'
+

.env.dev

@@ -0,0 +1,3 @@
+VUE_APP_ENV='Pre'
+VUE_APP_REQ_URL='http://localhost:8080'
+

.env.devtest

@@ -0,0 +1,2 @@
+VUE_APP_ENV='Pro'
+VUE_APP_REQ_URL='http://localhost:8080'

.env.pre

@@ -2,6 +2,7 @@
 node_modules
 /dist
 
+
 # local env files
 .env.local
 .env.*.local
@@ -10,6 +11,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea

.env.pro

@@ -2,57 +2,43 @@
 
 ## 一个 Vue 多页面应用,适用于移动端不需要单页应用（SPA）的场景
 
-### Project setup
-
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-
-```
-yarn dev
-```
-
-### Compiles and minifies
 
 ```
 yarn build:dev  //打包开发环境
-yarn build:devtest //打包开发测试环境
-yarn build:test //打包测试环境
+yarn build:pre //打包测试环境
 yarn build // 打包正式环境
 ```
 
-### Lints and fixes files
-
-```
-yarn lint
-```
+> 番外： [MareWood](https://github.com/xusenlin/MareWood) 是一个 Go 开发的轻量级前端部署工具,可以很灵活的配置各种打包部署环境并提供访问,特别是远程的时候，方便后端和测试使用,草鸡好用。
 
-### Customize configuration
+本人做了很多H5相关的项目，如 M站、微信活动页面、原生App内嵌H5页面（jsBridge交互），从实践过程中，真的不建议大家在这部分做单页应用（SPA），首先微信里面的H5页面
+在安卓和ios的url机制不一样，因此会导致两边的微信签名需要针对不同平台处理，当项目越来越大的时候，从其他应用跳转到这个应用的时候，即使你只使用其中一个页面，但是可能需要你去处理路由
+和权限，页面的复用性没有多页面的好。使用多页面的话每个页面之间没有多余的联系，我可以配置好每个页面的标题，每个页面的url必须携带的参数等，页面之间的跳转可以直接
+`window.location.href = `也可以通过 jsBridge(在原生app的环境)去跳转。
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# 更新日志
 
-这是一个做了大量移动端的 vue 多页面最佳实践(自我认为)。使用了全新依赖和 ESLint+Prettier 第二次重构(2020.01)。
+### 第三次重构（2022.08）最新vueCli v5.0.8  + Vue(<script setup>) v3.2 + vant v4.0
 
-### 说明
+在后台重构的时候我选择了vite,虽然vite现阶段带来了很棒的开发体验，但是它的多页面配置在开发阶段和打包上线阶段的不一致会
+导致页面跳转得不完美，即使目前有很多插件去支持多页面，但是都不是很完美，因此我选择继续使用vuecli,如果有一天vite有了更好的解决方式，
+我会第一时间重构到 vite + ts。
 
-- 使用 normalize.css 重置样式。(如果使用 vant 可以去掉)
 - 添加了 axios 请求库，并做了简单的拦截。
 - 添加了漂亮的移动端调试工具 eruda,方便在手机上调试（使用 npm run build 命令不会出现此工具）。
-- 添加了 Url 参数验证和初始化，`Vue.prototype.$pageParams` 保存了 Url 携带的参数对象。`let { id } = this.$pageParams;`
-- `window.PAGE_PATH(Vue.prototype.$pageName)` 表示当前页面的名字，如 index 目录生成 index.html，window.PAGE_PATH 就是 index
-- 想要添加自己 UI 库,安装好在 common.js 引用即可。（推荐 Vant）
-- 封装了微信 jsSdk 的常用签名分享等一堆堆常用的东西，食用前请先安装 weixin-js-sdk，并在 utils/wechat.js 引入。
-- 添加 postcss-px2rem 自动将 px 转换为 rem 适配移动端，目前为了和大部分 ui 库兼容，设置的设计稿宽度为 375，可自行修改。
-- 添加了 node 工具，在 src/utils/nodeTool 下，运行 node index.js -h 即可查看使用方法。
-- 添加页面请在 pages 文件夹下新建目录，在里面放置 index.js 和 Index.vue（建议使用提供的 node 工具生成页面，他会更新你的配置）。编译后，目录的名字即为网页的名字。至于为什么？请查看 page.config.js。
-- 如果页面太多，可以通过在 pages 下添加分组目录来分类页面,支持无限层级目录，只要目录里存在 index.js 和 Index.vue 即被认为是一个页面。
-- 没有路由（vue-route）,页面跳转请使用
-
-```javascript
-window.location.href = "./demo.html" + obj2StrParams(params);
-```
+- 修改了 Url 参数验证和初始化，`window.$pageParams` 保存了 Url 携带的参数对象。`let { id } = window.$pageParams;`
+- `window.$pageName` 表示当前页面的名字，如 demo 目录生成 demo.html，window.$pageName 就是 demo
+- 支持pages目录无限嵌套，只要一个目录里面包含`main.js`和`App.js`,就会认为当前目录是一个html页面。因此可以合理的通过目录来分类你的html页面。
+- 封装了微信 jsSdk 的常用签名分享等一堆堆常用的东西，食用前请先安装 weixin-js-sdk并引入。
+- 将postcss-px2rem重构为postcss-px-to-viewpor自动将px单位转换vw，更好的适配方案，目前为了和大部分 ui 库兼容，设置的设计稿宽度为 375，可自行修改。
+- 没有路由（vue-route）,页面跳转请使用`window.location.href = "./demo.html" + obj2StrParams(params);`
+- 所有的页面默认使用public/index.html作为模板，除非你在页面目录下添加index.html。
+- 每次添加页面目录需要重新运行 npm run dev
+
+
+### 第二次重构(2020.01) 全新依赖和ESLint+Prettier重构 v0.0.1
+此版本的说明请切换分支版本查看
+
 
 ### 其他
 
@@ -65,11 +51,11 @@ window.location.href = "./demo.html" + obj2StrParams(params);
 <meta name="viewport" content="width=device-width" />
 ```
 
-浏览器就会以这种方式假定您已使文本在移动设备上可读，因此无需双击。
+浏览器就会以这种方式假定您已使文本在移动设备上可读，因此无需fastclick。
 
 ---
 
 还有各种移动端奇形怪状的问题解决方案
 https://juejin.im/post/5d6e1899e51d453b1e478b29
 
-> 番外： [MareWood](https://github.com/xusenlin/MareWood) 是一个 Go 开发的轻量级前端部署工具,可以很灵活的配置各种打包部署环境并提供访问,特别是远程的时候，方便后端和测试使用,草鸡好用。
+

.env.test

@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

.eslintrc.js

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

.gitignore

@@ -1,35 +1,48 @@
 {
-  "name": "vuemultiplepages",
+  "name": "vue-multiple-pages",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build:dev": "vue-cli-service build  --mode dev",
-    "build:devtest": "vue-cli-service build  --mode devtest",
-    "build:test": "vue-cli-service build --mode test",
+    "dev": "vue-cli-service serve --mode dev",
+    "build": "vue-cli-service build  --mode pro",
+    "build:pre": "vue-cli-service build --mode pre",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "core-js": "^3.4.4",
-    "good-storage": "^1.1.0",
-    "normalize.css": "^8.0.1",
-    "vue": "^2.6.10"
+    "axios": "^0.27.2",
+    "good-storage": "^1.1.1",
+    "vant": "^4.0.0-beta.0",
+    "vue": "^3.2.13"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-plugin-eslint": "^4.1.0",
-    "@vue/cli-service": "^4.1.0",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.13.1",
-    "postcss-px2rem": "^0.3.0",
-    "prettier": "^1.19.1",
-    "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10"
-  }
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "core-js": "^3.8.3",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "postcss-px-to-viewport": "^1.1.1",
+    "sass": "^1.54.5",
+    "sass-loader": "^13.0.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true,
+      "vue/setup-compiler-macros": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
 }

README.md

@@ -5,7 +5,7 @@ let pageConfig = {};
 
 function addPageConfig(path, dir) {
   if (isPage(path + "/" + dir)) {
-    if (pageConfig.hasOwnProperty(dir)) {
+    if (pageConfig.dir) {
       throw new Error("有名字重复的页面:" + dir);
     }
     let template = "public/index.html";
@@ -14,10 +14,10 @@ function addPageConfig(path, dir) {
       template = path + "/" + dir + "/index.html";
     }
     pageConfig[dir] = {
-      entry: path + "/" + dir + "/index.js",
+      entry: path + "/" + dir + "/main.js",
       filename: dir + ".html",
       path: dir,
-      title: Config.hasOwnProperty(dir) ? Config[dir].title : "",
+      title: Config.dir ? Config[dir].title : "",
       template: template
     };
   }
@@ -31,7 +31,7 @@ function addPageConfig(path, dir) {
 }
 
 function isPage(dir) {
-  return fs.existsSync(dir + "/index.js") && fs.existsSync(dir + "/Index.vue");
+  return fs.existsSync(dir + "/main.js") && fs.existsSync(dir + "/App.vue");
 }
 
 addPageConfig("src", "pages");

babel.config.js

@@ -1,25 +1,26 @@
 <!DOCTYPE html>
 <html lang="zh-cn">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
-    <meta name="format-detection" content="telephone=yes" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <% if(!("production" == process.env.NODE_ENV && undefined == process.env.VUE_APP_MODE)){ %>
-    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
-    <script>eruda.init();</script>
-    <% } %>
-    <script>
-      window.PAGE_PATH = '<%= htmlWebpackPlugin.options.path %>';
-    </script>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but vueMultiplePages doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
+  <meta name="format-detection" content="telephone=yes"/>
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <% if("Pro" != process.env.VUE_APP_ENV){ %>
+  <script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.5.0/eruda.min.js"></script>
+  <script>eruda.init({tool: ['console','network','info','resource']});</script>
+  <% } %>
+  <script>
+    window.PAGE_PATH = '<%= htmlWebpackPlugin.options.path %>';
+  </script>
+</head>
+<body>
+<noscript>
+  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+    Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>

jsconfig.json

@@ -0,0 +1,5 @@
+
+
+export function wechatSignatureApi(){
+
+}