升级到Vue3+Vite，并修复几处Element UI升级到Element Plus后的BUG.

setube · Sep 3, 2024 · 4a8c4ff · 4a8c4ff
1 parent 67c0065
commit 4a8c4ff
Show file tree

Hide file tree

Showing 16 changed files with 1,300 additions and 975 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -8,12 +8,12 @@ RUN npm config set registry https://registry.npmmirror.com
 
 RUN cd /workspace
 
-RUN git clone https://mirror.ghproxy.com/https://github.com/setube/vue-XiuXianGame.git
+RUN git clone https://mirror.ghproxy.com/https://github.com/coolxitech/vue-XiuXianGame.git
 
 RUN mv ./vue-XiuXianGame/* . ; rm -rf ./vue-XiuXianGame/
 
-RUN npm i ; npm i element-ui
+RUN npm install -g yarn ; yarn install
 
 RUN npm run build
 
-CMD ["npm", "run", "serve"]
+CMD ["vite"]
diff --git a/README.md b/README.md
@@ -10,12 +10,13 @@
 
 ## 我的文字修仙全靠刷
 
-- 前端框架 [Vue.js](https://vuejs.org)
-- 前端UI [Element](https://element.eleme.cn)
+- 前端框架 [Vue.js](https://cn.vuejs.org)
+- 前端UI [Element Plus](https://element-plus.org/)
 
 Docker贡献者：
 
 - wuchenchina [无尘](https://github.com/wuchenchina)
+- CoolXiTech [酷曦科技](https://github.com/CoolXiTech)
 
 鸣谢以上开源项目及贡献者，排名不分先后.
 

diff --git a/babel.config.js b/babel.config.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="public/favicon.ico">
     <title>我的文字修仙全靠刷</title>
 </head>
 
@@ -15,5 +15,5 @@
     </noscript>
     <div id="app"></div>
 </body>
-
+<script type="module" src="/src/main.js"></script>
 </html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -15,5 +15,6 @@
             "dom.iterable",
             "scripthost"
         ]
-    }
+    },
+    "exclude": ["node_modules","dist"]
 }
diff --git a/package.json b/package.json
@@ -1,56 +1,51 @@
 {
     "name": "xiuxian-game",
-    "version": "0.1.0",
     "private": true,
+    "version": "0.1.0",
+    "type": "module",
     "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
     },
     "dependencies": {
-        "autoprefixer": "^10.4.19",
-        "babel-loader": "^9.1.3",
+        "autoprefixer": "^10.4.20",
         "core-js": "^3.8.3",
         "crypto-js": "^4.2.0",
+        "element-plus": "^2.8.1",
         "file-saver": "^2.0.5",
         "fs": "0.0.1-security",
+        "javascript-obfuscator": "^4.1.1",
         "path": "^0.12.7",
-        "postcss": "^8.4.39",
-        "vue": "^2.6.14",
-        "vue-router": "3.6.5",
-        "vuex": "^3.1.3",
+        "postcss": "^8.4.44",
+        "terser": "^5.31.6",
+        "unplugin-vue-components": "^0.27.4",
+        "vue": "^3.4.37",
+        "vue-router": "^4.4.3",
+        "vuex": "4",
         "vuex-persistedstate": "^4.1.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.12.16",
-        "@babel/eslint-parser": "^7.12.16",
-        "@types/file-saver": "^2.0.7",
-        "@vue/cli-plugin-babel": "~5.0.0",
-        "@vue/cli-plugin-eslint": "~5.0.0",
-        "@vue/cli-service": "~5.0.0",
-        "element-ui": "^2.15.14",
+        "@vitejs/plugin-vue": "^5.1.3",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
-        "vue-template-compiler": "^2.6.14",
-        "webpack": "^5.93.0",
-        "webpack-obfuscator": "^3.5.1"
+        "unplugin-auto-import": "^0.18.2",
+        "vite": "^5.4.3",
+        "terser": "^5.31.6"
     },
     "eslintConfig": {
         "root": true,
         "env": {
             "node": true
         },
         "extends": [
-            "plugin:vue/strongly-recommended",
+            "plugin:vue/vue3-strongly-recommended",
             "eslint:recommended"
-        ],
-        "parserOptions": {
-            "parser": "@babel/eslint-parser"
-        }
+        ]
     },
     "browserslist": [
         "> 1%",
         "last 2 versions",
         "not dead"
     ]
-}
+}
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/src/App.vue b/src/App.vue
@@ -1,42 +1,74 @@
 <template>
-    <div class="game-container-wrapper" draggable="true">
-        <div class="github-corner" v-if="ifProtocol">
-            <a href="https://github.com/setube/vue-XiuXianGame" target="_blank" aria-label="View source on GitHub">
-                <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 2;" aria-hidden="true">
-                    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
-                    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" />
-                    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" />
-                </svg>
-            </a>
-        </div>
-        <div class="game-container">
-            <keep-alive>
-                <router-view v-if="$route.meta.keepAlive" :key="key"></router-view>
-            </keep-alive>
-            <router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
-            <div class="bbh">
-                当前游戏版本{{ version }}
-            </div>
-        </div>
-        <div class="wm_bg_1" />
-        <div class="wm_bg_2" />
+  <div
+    class="game-container-wrapper"
+    draggable="true"
+  >
+    <div
+      class="github-corner"
+      v-if="ifProtocol"
+    >
+      <a
+        href="https://github.com/coolxitech/vue-XiuXianGame"
+        target="_blank"
+        aria-label="View source on GitHub"
+      >
+        <svg
+          width="80"
+          height="80"
+          viewBox="0 0 250 250"
+          style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 2;"
+          aria-hidden="true"
+        >
+          <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+          <path
+            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+            fill="currentColor"
+            style="transform-origin: 130px 106px;"
+          />
+          <path
+            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+            fill="currentColor"
+          />
+        </svg>
+      </a>
     </div>
+    <div class="game-container">
+      <keep-alive>
+        <router-view
+          v-if="$route.meta.keepAlive"
+          :key="key"
+        />
+      </keep-alive>
+      <router-view
+        v-if="!$route.meta.keepAlive"
+        :key="key"
+      />
+      <div class="bbh">
+        当前游戏版本{{ version }}
+      </div>
+    </div>
+    <div class="wm_bg_1" />
+    <div class="wm_bg_2" />
+  </div>
 </template>
 
 <script>
-
+    import {useRoute} from "vue-router";
     export default {
         data () {
             return {
                 version: 0.8,
             };
         },
         computed: {
+          $route() {
+            return useRoute()
+          },
             key () {
                 return this.$route.path;
             },
             ifProtocol () {
-                return window.location.protocol == 'file:' ? false : true;
+                return window.location.protocol !== 'file:';
             }
         },
         mounted () {

diff --git a/src/main.js b/src/main.js
@@ -1,27 +1,25 @@
-import Vue from 'vue'
-import Vuex from 'vuex';
+import {createApp} from 'vue'
 import App from './App.vue'
-import VueRouter from 'vue-router';
 import store from '@/plugins/store';
 import router from '@/plugins/router';
-import 'element-ui/lib/theme-chalk/index.css';
-import ElementUI, { Notification } from 'element-ui';
+import 'element-plus/dist/index.css';
+import ElementPlus from 'element-plus';
 
-Vue.use(Vuex).use(VueRouter).use(ElementUI);
+const app = createApp(App);
 
-Vue.config.productionTip = false;
+app.config.productionTip = false;
 
 // 通知
-Vue.prototype.$notify = (data) => {
+app.config.globalProperties.$notify = (data) => {
     Notification.closeAll();
-    Notification(data);
+    Notification.notify(data);
 }
 
 // 最高等级
-Vue.prototype.$maxLv = 144;
+app.config.globalProperties.$maxLv = 144;
 
 // 境界名称
-Vue.prototype.$levelNames = (level) => {
+app.config.globalProperties.$levelNames = (level) => {
     const levelsPerStage = 9;
     const stageIndex = Math.floor((level - 1) / levelsPerStage);
     const stageLevel = (level - 1) % levelsPerStage + 1;
@@ -52,21 +50,21 @@ const dropdownTypeObject = {
     dodge: '闪避'
 };
 
-Vue.prototype.$dropdownType = Object.entries(dropdownTypeObject).map(([type, name]) => {
+app.config.globalProperties.$dropdownType = Object.entries(dropdownTypeObject).map(([type, name]) => {
     return { type, name };
 });
 
 
 // 装备类型
-Vue.prototype.$genre = {
+app.config.globalProperties.$genre = {
     sutra: '法器',
     armor: '护甲',
     weapon: '神兵',
     accessory: '灵宝'
 };
 
 // 装备品阶
-Vue.prototype.$levels = {
+app.config.globalProperties.$levels = {
     info: '黄阶',
     pink: '仙阶',
     danger: '神阶',
@@ -77,7 +75,7 @@ Vue.prototype.$levels = {
 };
 
 // 道具名称
-Vue.prototype.$propItemNames = {
+app.config.globalProperties.$propItemNames = {
     money: {
         name: '灵石',
         desc: '可以通过分解获得装备获得',
@@ -109,7 +107,7 @@ Vue.prototype.$propItemNames = {
 };
 
 // 单位转换
-Vue.prototype.$formatNumberToChineseUnit = (number) => {
+app.config.globalProperties.$formatNumberToChineseUnit = (number) => {
     number = number > 0 ? Math.floor(number) : 0;
     // 中文单位数组，从小到大
     const units = ['', '万', '亿', '兆', '京', '垓', '秭', '穰', '沟', '涧', '正', '载', '极'];
@@ -130,12 +128,11 @@ Vue.prototype.$formatNumberToChineseUnit = (number) => {
         }
     }
     // 将数字转换为字符串，并加上对应的中文单位
-    let result = num.toString() + units[unitIndex] + additionalUnits;
-    return result;
+    return num.toString() + units[unitIndex] + additionalUnits;
 };
 
 // 平滑至底
-Vue.prototype.$smoothScrollToBottom = (element) => {
+app.config.globalProperties.$smoothScrollToBottom = (element) => {
     const start = element.scrollTop;
     const end = element.scrollHeight;
     const duration = 300;
@@ -153,8 +150,7 @@ Vue.prototype.$smoothScrollToBottom = (element) => {
     window.requestAnimationFrame(scroll);
 };
 
-new Vue({
-    store,
-    router,
-    render: h => h(App),
-}).$mount('#app');
+app.use(ElementPlus);
+app.use(store);
+app.use(router);
+app.mount('#app');