vue2

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

README.md

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

package.json

@@ -9,12 +9,11 @@
   "dependencies": {
     "axios": "^0.24.0",
     "js-md5": "^0.7.3",
-    "pinia": "^2.0.14",
-    "vue": "^3.2.25",
-    "vue-router": "^4.0.13"
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.3",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.3.3",
     "eslint": "^8.15.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.26.0",
@@ -24,6 +23,7 @@
     "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,10 +1,8 @@
-import { createApp } from 'vue'
+import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
-import { createPinia } from 'pinia'
-const store = createPinia()
+import router from './router/index'
 
-const app = createApp(App)
-app.use(router)
-  .use(store)
-  .mount('#app')
+new Vue({
+  router,
+  render: (h) => h(App)
+}).$mount('#app')

src/pages/index/router/index.js

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

src/pages/index/store/user.js

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

src/pages/index/views/test.vue

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

src/pages/pageB/main.js

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

src/pages/pageB/router/index.js

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

vite.config.js

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { createVuePlugin } from 'vite-plugin-vue2'
 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: [ vue(), viteCompression({ disable: true }), eslint({ fix: true }) ],
+  plugins: [ createVuePlugin(), viteCompression({ disable: true }), eslint({ fix: true }) ],
   server: {
     host: 'localhost',
     port: 6547,