mogfee
/
vite-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add router

Browse Source
master
李伟乐 2 years ago
parent ed1b4f3e2d
commit 6e496b3817
20 changed files with 958 additions and 620 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      .prettierrc.json
  2. 12
      index.html
  3. 138
      package-lock.json
  4. 5
      package.json
  5. 9
      src/App.vue
  6. 38
      src/components/Header.vue
  7. 8
      src/components/HelloWorld.vue
  8. 1
      src/constants/index.js
  9. 8
      src/main.js
  10. 0
      src/permission.js
  11. 11
      src/router/index.js
  12. 3
      src/router/modules/mobile-routs.js
  13. 1
      src/router/modules/pc-routs.js
  14. 0
      src/store/getters.js
  15. 0
      src/store/index.js
  16. 8
      src/utils/flexble.js
  17. 0
      src/views/layout/index.vue
  18. 3
      src/views/main/index.vue
  19. 11
      vite.config.js
  20. 1307
      yarn.lock

5
.prettierrc.json
Unescape View File

@ -0,0 +1,5 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}

12
index.html
Unescape View File

@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

138
package-lock.json generated
Unescape View File

@ -8,12 +8,14 @@
"name": "vite",
"version": "0.0.0",
"dependencies": {
"@vueuse/core": "^9.12.0",
"vue": "^3.2.45"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"prettier": "2.8.3",
"sass": "^1.58.0",
"tailwindcss": "^3.2.4",
"vite": "^4.1.0"
@ -81,6 +83,11 @@
"node": ">= 8"
}
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
},
"node_modules/@vitejs/plugin-vue": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@ -196,6 +203,74 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
},
"node_modules/@vueuse/core": {
"version": "9.12.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.12.0.tgz",
"integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
"dependencies": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.12.0",
"@vueuse/shared": "9.12.0",
"vue-demi": "*"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "9.12.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.12.0.tgz",
"integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ=="
},
"node_modules/@vueuse/shared": {
"version": "9.12.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.12.0.tgz",
"integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
"dependencies": {
"vue-demi": "*"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
@ -853,6 +928,18 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true
},
"node_modules/prettier": {
"version": "2.8.3",
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.3.tgz",
"integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -1180,6 +1267,11 @@
"fastq": "^1.6.0"
}
},
"@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
},
"@vitejs/plugin-vue": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@ -1286,6 +1378,46 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
},
"@vueuse/core": {
"version": "9.12.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.12.0.tgz",
"integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
"requires": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.12.0",
"@vueuse/shared": "9.12.0",
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"@vueuse/metadata": {
"version": "9.12.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.12.0.tgz",
"integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ=="
},
"@vueuse/shared": {
"version": "9.12.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.12.0.tgz",
"integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
"requires": {
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
@ -1775,6 +1907,12 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true
},
"prettier": {
"version": "2.8.3",
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.3.tgz",
"integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
"dev": true
},
"queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",

5
package.json
Unescape View File

@ -9,12 +9,15 @@
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.45"
"@vueuse/core": "^9.12.0",
"vue": "^3.2.45",
"vue-router": "4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"prettier": "2.8.3",
"sass": "^1.58.0",
"tailwindcss": "^3.2.4",
"vite": "^4.1.0"

9
src/App.vue
Unescape View File

@ -1,10 +1,3 @@
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import Header from "./components/Header.vue";</script>
<template>
<Header/>
<HelloWorld msg="Vite + Vue"/>
<router-view />
</template>
<style scoped>
</style>

38
src/components/Header.vue
Unescape View File

@ -1,15 +1,35 @@
<template>
<div class="lg:bg-amber-100 md:mx-auto relative bg-white overflow-hidden border-b">
<div
class="lg:bg-amber-100 md:mx-auto relative bg-white overflow-hidden border-b"
>
<div class="h-12 md:ml-10 md:pr-4 md:space-x-8 flex justify-center">
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">Home</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">Product</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">Article</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">About</a>
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 flex items-center">Log in</a>
<a
href="#"
class="font-medium text-gray-500 hover:text-gray-900 flex items-center"
>Home</a
>
<a
href="#"
class="font-medium text-gray-500 hover:text-gray-900 flex items-center"
>Product</a
>
<a
href="#"
class="font-medium text-gray-500 hover:text-gray-900 flex items-center"
>Article</a
>
<a
href="#"
class="font-medium text-gray-500 hover:text-gray-900 flex items-center"
>About</a
>
<a
href="#"
class="font-medium text-indigo-600 hover:text-indigo-500 flex items-center"
>Log in</a
>
</div>
</div>
</template>
<style scoped>
</style>
<style scoped></style>

8
src/components/HelloWorld.vue
Unescape View File

@ -1,16 +1,14 @@
<script setup>
import {ref} from 'vue'
import { ref } from 'vue'
defineProps({
msg: String,
msg: String
})
const count = ref(0)
</script>
<template>
<h1 class="bg-red color-red">{{ msg }}</h1>
</template>
<style scoped>
</style>
<style scoped></style>

1
src/constants/index.js
Unescape View File

@ -0,0 +1 @@
export const PC_DEVICE_WITH = 1280

8
src/main.js
Unescape View File

@ -1,6 +1,8 @@
import {createApp} from 'vue'
import { createApp } from 'vue'
import App from './App.vue'
import 'tailwindcss/tailwind.css'
import router from '@/router/index.js'
import './styles/index.scss'
createApp(App).mount('#app')
createApp(App)
.use(router)
.mount('#app')

0
src/permission.js
Unescape View File

11
src/router/index.js
Unescape View File

@ -0,0 +1,11 @@
import { createRouter, createWebHistory } from 'vue-router'
import { isMobileTerminal } from '@/utils/flexble.js'
import mobileRouts from '@/router/modules/mobile-routs.js'
import pcRouts from '@/router/modules/pc-routs.js'
const router = createRouter({
history: createWebHistory(),
routes: isMobileTerminal.value ? mobileRouts : pcRouts
})
export default router

3
src/router/modules/mobile-routs.js
Unescape View File

@ -0,0 +1,3 @@
export default [
{ path: '/', name: 'home', component: () => import('@/views/main/index.vue') }
]

1
src/router/modules/pc-routs.js
Unescape View File

@ -0,0 +1 @@
export default []

0
src/store/getters.js
Unescape View File

0
src/store/index.js
Unescape View File

8
src/utils/flexble.js
Unescape View File

@ -0,0 +1,8 @@
import { computed } from 'vue'
import { PC_DEVICE_WITH } from '@/constants'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
export const isMobileTerminal = computed(() => {
return width.value < PC_DEVICE_WITH
})

0
src/views/layout/index.vue
Unescape View File

3
src/views/main/index.vue
Unescape View File

@ -0,0 +1,3 @@
<template>
main page
</template>

11
vite.config.js
Unescape View File

@ -1,7 +1,12 @@
import {defineConfig} from 'vite'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { join } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
});
resolve: {
alias: {
'@': join(__dirname, '/src')
}
}
})

1307
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save