Skip to content

A
airport-app-new
提交 cab5432b 作者: zjt
操作

首页

父级 450e3d04
正在显示 包含 201 行增加 和 74 行删除
.gitignore 0 → 100644
.idea
.idea/
.DS_Store
node_modules/
.project
dist
dist/*
/dist
dist.zip
npm-debug.log
unpackage/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
Vue3-Vite-Vant-TS-H5-main/.gitignore
node_modules
*.local
*.sh
\ No newline at end of file
.idea
.idea/
.DS_Store
node_modules/
.project
dist
dist/*
/dist
dist.zip
npm-debug.log
unpackage/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
Vue3-Vite-Vant-TS-H5-main/package.json
......@@ -13,6 +13,7 @@
"axios": "^0.26.1",
"pinia": "^2.0.20",
"vant": "^3.4.6",
"vconsole": "^3.15.1",
"vue": "^3.2.25",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
......
Vue3-Vite-Vant-TS-H5-main/shims-vue.d.ts 0 → 100644
declare module "*.png" {
const value: any;
export default value;
}
Vue3-Vite-Vant-TS-H5-main/src/components/compass/compass.vue 0 → 100644
<script lang="ts">
export default {
name: "compass",
};
</script>
<script setup lang="ts">
import { reactive, ref, onMounted, unOnMounted } from "vue";
import compass from "@/assets/images/compass.png";
import { Dialog } from "vant";
const direction = ref(0);
function handleOrientation(event) {
console.log("event", event);
// direction.value = event.alpha;
}
onMounted(() => {
Dialog.confirm({
title: "提示",
message: "需要授权系统获取方向数据，请点击确认，否则无法使用此功能。",
})
.then(() => {
window.addEventListener(
"deviceorientation",
function (e) {
console.log("absolute: " + e.absolute);
console.log("alpha: " + e.alpha);
console.log("beta: " + e.beta);
console.log("gamma: " + e.gamma);
},
false
);
})
.catch(() => {
// on cancel
});
});
// unOnMounted(() => {
// window.removeEventListener("deviceorientation", handleOrientation);
// });
</script>
<template>
<div class="compassStart">
<van-image
width="47"
height="47"
:src="compass"
class="img"
:style="{ transform: 'rotate(' + direction + 'deg)' }"
/>
</div>
</template>
<style lang="scss" scoped>
.img {
width: 47px;
height: 47px;
border-radius: 50px;
}
.needle {
transform: rotate(0deg);
}
</style>
Vue3-Vite-Vant-TS-H5-main/src/components/mainPat/CustomHeader.vue
......@@ -64,7 +64,4 @@ const clickRight = () => {
</van-sticky>
</template>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<style lang="scss" scoped></style>
Vue3-Vite-Vant-TS-H5-main/src/layout/index.vue
......@@ -45,5 +45,4 @@ const handleChange = (value) => {
</div>
</template>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<style lang="scss" scoped></style>
Vue3-Vite-Vant-TS-H5-main/src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { vuexStore, piniaStore } from './store';
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { vuexStore, piniaStore } from "./store";
import VConsole from "vconsole";
const vConsole = new VConsole();
// 移动端适配
import 'lib-flexible/flexible.js';
import "lib-flexible/flexible.js";
// 引入全局样式
import '@/assets/scss/index.scss';
import "@/assets/scss/index.scss";
// 全局引入按需引入UI库 vant
import { vantPlugins } from './plugins/vant.js';
import { vantPlugins } from "./plugins/vant.js";
//全局公共组件
import components from './plugins/components.js';
import components from "./plugins/components.js";
createApp(App).use(vuexStore).use(piniaStore).use(router).use(vantPlugins).use(components).mount('#app');
\ No newline at end of file
createApp(App)
.use(vuexStore)
.use(piniaStore)
.use(router)
.use(vantPlugins)
.use(components)
.mount("#app");
Vue3-Vite-Vant-TS-H5-main/src/store/testPinia.ts
import { ref } from 'vue'
import { defineStore } from "pinia"
export const usePiniaState = defineStore('pinia', ()=>{
const userName = ref('')
import { ref } from "vue";
import { defineStore } from "pinia";
export const usePiniaState = defineStore("pinia", () => {
const userName = ref("");
const getUserNmae = (data) => {
userName.value = data
}
return { userName, getUserNmae}
})
userName.value = data;
};
return { userName, getUserNmae };
});
// export const usePiniaState = defineStore({
// id: 'textPinia',
......
Vue3-Vite-Vant-TS-H5-main/src/views/about/About.vue
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { storeToRefs } from 'pinia'
import { usePiniaState } from '@/store/testPinia'
import { computed } from "vue";
import { useStore } from "vuex";
import { storeToRefs } from "pinia";
import { usePiniaState } from "@/store/testPinia";
import logo from '@/assets/logo.png'
import logo from "@/assets/logo.png";
// vuex
// const vuexStore = useStore()
// pinia
const piniaStore = usePiniaState()
// vuex
// const vuexStore = useStore()
// vuex
// const userName = computed(() => vuexStore.state.userNmae)
// pinia
const piniaStore = usePiniaState();
// 通过storeToRefs方法将存储在pinia里的数据解构出来，保持state响应性
const { userName } = storeToRefs(piniaStore)
const { getUserNmae } = piniaStore
// vuex
// const userName = computed(() => vuexStore.state.userNmae)
// 通过storeToRefs方法将存储在pinia里的数据解构出来，保持state响应性
const { userName } = storeToRefs(piniaStore);
const { getUserNmae } = piniaStore;
const handleBtn = () =>{
const handleBtn = () => {
// vuex
// vuexStore.commit('userName','真乖，如果对您有帮助请在github上点个星星哦~')
// pinia
getUserNmae('真乖，如果对您有帮助请在github上点个星星哦~')
}
getUserNmae("真乖，如果对您有帮助请在github上点个星星哦~");
};
</script>
<template>
......@@ -41,20 +39,24 @@
<span class="logo fs-1 py-3 opacity-75">VUE3 H5开发模板</span>
<span class="fs-6 py-3 opacity-75">
项目地址：
<a href="https://github.com/talktao/Vue3-Vite-Vant-TS-H5">https://github.com/talktao/Vue3-Vite-Vant-TS-H5</a>
<a href="https://github.com/talktao/Vue3-Vite-Vant-TS-H5"
>https://github.com/talktao/Vue3-Vite-Vant-TS-H5</a
>
</span>
<span class="fs-3 py-3 opacity-75">项目作者：talktao</span>
<span class="fs-3 py-3 opacity-75">
{{ userName }}
<van-button v-if="userName == ''" color="#f50" size="small" @click="handleBtn">点我有魔法~</van-button>
<van-button
v-if="userName == ''"
color="#f50"
size="small"
@click="handleBtn"
>点我有魔法~</van-button
>
</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<style lang="scss" scoped></style>
Vue3-Vite-Vant-TS-H5-main/vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import styleImport, { VantResolve } from 'vite-plugin-style-import';
import styleImport, { VantResolve } from "vite-plugin-style-import";
import mkcert from "vite-plugin-mkcert";
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
// 检查process.cwd()路径下.env.develeport.local、.env.development、.env.local、.env这四个环境文件
loadEnv(mode, process.cwd());
return {
// 静态资源基础路径 base: './' || '',
base: '',
base: "",
resolve: {
alias: {
// 配置src目录
"@": path.resolve(__dirname, "src"),
// 导入其他目录
"components": path.resolve(__dirname, "components")
}
components: path.resolve(__dirname, "components"),
},
},
plugins: [
vue(),
mkcert(),
// 配置后，Vant各组件才生效
styleImport({
resolves: [VantResolve()],
......@@ -30,14 +30,14 @@ export default defineConfig(({ command, mode }) => {
// 跨域代理
server: {
host: '0.0.0.0',
host: "0.0.0.0",
proxy: {
'/api': {
target: 'https://api.inews.qq.com',
"/api": {
target: "https://api.inews.qq.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') // 将匹配到的api替换成''
}
}
}
rewrite: (path) => path.replace(/^\/api/, ""), // 将匹配到的api替换成''
},
},
},
};
});
Vue3-Vite-Vant-TS-H5-main/yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"devDependencies": {
"vite-plugin-mkcert": "^1.17.6"
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论