升级到vue3 语法兼容vue2 状态管理使用pinia

Signed-off-by: Caner <40012261+Canees@users.noreply.github.com>

README.md

@@ -1,10 +1,11 @@
-# vue多入口模板
+# vue3多入口模板
 ```
-html自动对应各自入口文件（router，store）互不影响，即单独加载，共享数据，建议使用yarn安装依赖
-eslint自动校验修正，无需IDE修正
+1. html自动对应各自入口文件（router，store）互不影响，即单独加载，共享数据，建议使用yarn安装依赖
+2. eslint自动校验修正，无需IDE修正
+
 ```
 
-    
+## use
 ```
 yarn
 
@@ -20,14 +21,14 @@ npm run build
 ## 目录结构
 ```
 | - `src`
-|   - `pages`                     全局html目录
-|       - `index`                 子html目录
+|   - `pages`                     全局html入口目录
+|       - `index`                 子html入口目录
 |           - `assets`            子静态文件
 |           - `components`        子组件
 |           - `router`            子路由
 |           - `store`             子存储
 |           - `App.vue`           子模板
-|           - `main.ts`           子入口文件
+|           - `main.js`           子入口文件
 |   - `components`                全局组件
 |   - `utils`                     全局插件
 |   - `assets`                    全局静态文件
@@ -44,7 +45,7 @@ npm run build
 5. 默认安装:
    1. aixos
    2. js-md5
-   3. vuex
+   3. pinia
    4. vue-router
    5. less
 6. eslintignore 增加排除文件

package.json

@@ -9,11 +9,12 @@
   "dependencies": {
     "axios": "^0.24.0",
     "js-md5": "^0.7.3",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.3",
-    "vuex": "^3.6.2"
+    "pinia": "^2.0.14",
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.13"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
     "eslint": "^8.15.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.26.0",
@@ -23,7 +24,6 @@
     "vite": "^2.9.9",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.6.1",
-    "vite-plugin-vue2": "^2.0.1",
     "vue-template-compiler": "^2.6.14"
   }
 }

src/pages/index/main.js

@@ -1,8 +1,10 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router/index'
+import router from './router'
+import store from './store'
 
-new Vue({
-  router,
-  render: (h) => h(App)
-}).$mount('#app')
+const app = createApp(App)
+app.use(router)
+app.use(store)
+
+app.mount('#app')

src/pages/index/router/index.js

@@ -1,16 +1,13 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
-Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
     component: () => import('../views/test.vue')
   }
 ]
-
-const router = new VueRouter({
-  routes,
-  mode: 'hash'
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
 })
 export default router

src/pages/index/store/index.js

@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia'
+
+const store = createPinia()
+
+export default store

src/pages/index/store/user.js

@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+
+const useUserStore = defineStore({
+  id: 'user', // id必填，且需要唯一
+  state: () => ({
+    name: '张三'
+  })
+})
+export default useUserStore

src/pages/index/views/test.vue

@@ -5,6 +5,7 @@
 </template>
 <script>
 import test from '@/components/1.vue'
+import useUserStore from '../store/user'
 export default {
   components: {
     test
@@ -13,6 +14,10 @@ export default {
     test() {
       console.log(123)
     }
+  },
+  mounted() {
+    const userStore = useUserStore()
+    console.log(66, userStore)
   }
 }
 </script>

src/pages/pageB/main.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router/index'
+import router from './router'
+const app = createApp(App)
+app.use(router)
 
-new Vue({
-  router,
-  render: (h) => h(App)
-}).$mount('#app')
+app.mount('#app')

src/pages/pageB/router/index.js

@@ -1,16 +1,13 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
-Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
     component: () => import('../views/test.vue')
   }
 ]
-
-const router = new VueRouter({
-  routes,
-  mode: 'hash'
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
 })
 export default router

vite.config.js

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import { createVuePlugin } from 'vite-plugin-vue2'
+import vue from '@vitejs/plugin-vue'
 import viteCompression from 'vite-plugin-compression'
 import eslint from 'vite-plugin-eslint'
 import path from 'path'
@@ -40,7 +40,7 @@ export default ({ mode }) => defineConfig({
       '@': path.resolve(__dirname, './src')
     }
   },
-  plugins: [ createVuePlugin(), viteCompression({ disable: true }), eslint({ fix: true }) ],
+  plugins: [ vue(), viteCompression({ disable: true }), eslint({ fix: true }) ],
   server: {
     host: 'localhost',
     port: 6547,