blahba.com/flower-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

第一次提交项目

Browse Source
This commit is contained in:
yupan 2023-05-28 21:19:03 +08:00
parent fe2accc262
commit 8cb77d7999
28 changed files with 5836 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
.gitignore vendored
View File

@ -1,11 +1,24 @@
# ---> Vue
# gitignore template for Vue.js projects
#
# Recommended template: Node.gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
# TODO: where does this rule come from?
docs/_book
# TODO: where does this rule come from?
test/
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

18
README.md
View File

@ -1,2 +1,18 @@
# flower-app
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support For `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

24
components.d.ts vendored Normal file
View File

@ -0,0 +1,24 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
Footer: typeof import('./src/components/Footer.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanButton: typeof import('vant/es')['Button']
VanCellGroup: typeof import('vant/es')['CellGroup']
VanField: typeof import('vant/es')['Field']
VanForm: typeof import('vant/es')['Form']
VanIcon: typeof import('vant/es')['Icon']
VanTabbar: typeof import('vant/es')['Tabbar']
VanTabbarItem: typeof import('vant/es')['TabbarItem']
}
}

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<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 + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

5433
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
package.json Normal file
View File

@ -0,0 +1,27 @@
{
"name": "flower-story",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.4.0",
"sass": "^1.62.1",
"sass-loader": "^13.3.1",
"vant": "^4.4.0",
"vue": "^3.2.47",
"vue-router": "^4.2.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"typescript": "^5.0.2",
"unocss": "^0.52.4",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.3.2",
"vue-tsc": "^1.4.2"
}
}

1
public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

7
src/App.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<RouterView />
</template>
<style scoped></style>

5
src/api/user.ts Normal file
View File

@ -0,0 +1,5 @@
import { UserType } from "../types/user"
import request from "../utils/request"
export const userLogin = (account:UserType) => {
return request.post("api/user/auth",account)
}

1
src/assets/vue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

20
src/components/Footer.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div>
<van-tabbar v-model="active" active-color="#FD7753" router>
<van-tabbar-item icon="home-o" name="home" to="/">
<span>首页</span>
</van-tabbar-item>
<van-tabbar-item icon="search" to="/mine">
<span>我的</span>
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const active = ref("mine")
</script>
<style scoped></style>

38
src/components/HelloWorld.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Install
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

1
src/config/index.ts Normal file
View File

@ -0,0 +1 @@
export const BASE = "/"

12
src/main.ts Normal file
View File

@ -0,0 +1,12 @@
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { initRem } from './utils/rem'
import router from './router'
import "virtual:uno.css"
initRem()
const app = createApp(App)
app.use(router)
app.mount('#app')

21
src/router/index.ts Normal file
View File

@ -0,0 +1,21 @@
import { createRouter, createWebHashHistory } from "vue-router"
const router = createRouter({
history: createWebHashHistory(),
routes: [{
path: "/",
component: () => import("../views/main.vue"),
children: [{
path: "",
component: () => import("../views/home.vue")
}, {
path: "/mine",
component: () => import("../views/mine.vue")
}, {
path: "/login",
component: () => import("../views/login.vue")
}]
}]
})
export default router

0
src/style.css Normal file
View File

4
src/types/user.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export interface UserType{
id: string,
password:string
}

22
src/utils/rem.ts Normal file
View File

@ -0,0 +1,22 @@
// rem等比适配配置文件
// 基准大小
// rem等比适配配置文件
// 基准大小
// 设置 rem 函数
function setRem() {
const baseSize = 10;
// 当前页面宽度相对于 750宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750;
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
export const initRem = () => {
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};
};

7
src/utils/request.ts Normal file
View File

@ -0,0 +1,7 @@
import axios from "axios"
import { BASE } from "../config"
const instance = axios.create({
baseURL:BASE
})
export default instance

11
src/views/home.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div>
首页
</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>

53
src/views/login.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="box">
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field
v-model="account.id"
name="id"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-model="account.password"
type="password"
name="password"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
提交
</van-button>
</div>
</van-form>
</div>
</template>
<script setup lang="ts">
import { reactive} from 'vue';
import { UserType } from '../types/user';
import { userLogin } from '../api/user';
const account = reactive({
id: "blahblah",
password:"pwd123"
})
const onSubmit = (account:UserType) => {
console.log('submit', account);
userLogin(account).then(res => {
console.log("登陆成功",res);
})
};
</script>
<style lang="scss" scoped>
.box{
padding-top: 40px;
}
</style>

13
src/views/main.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div>
<RouterView />
<Footer></Footer>
</div>
</template>
<script setup lang="ts">
import Footer from '../components/Footer.vue';
</script>
<style scoped></style>

13
src/views/mine.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div>
个人主页
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

25
tsconfig.json Normal file
View File

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

13
uno.config.ts Normal file
View File

@ -0,0 +1,13 @@
import { defineConfig } from "unocss";
export default defineConfig({
// ...UnoCSS选项
rules: [
["fs-20", { "font-size": "2rem" }],
["fs-22", { "font-size": "2.2rem" }],
["fs-24", { "font-size": "2.4rem" }],
["fs-26", { "font-size": "2.6rem" }],
["fs-28", { "font-size": "2.8rem" }],
["fs-40", { "font-size": "4rem" }],
],
});

22
vite.config.ts Normal file
View File

@ -0,0 +1,22 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
import UnoCSS from "unocss/vite";
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://blahblaho.com/',
changeOrigin: true
}
}
},
plugins: [vue(),
Components({
resolvers: [VantResolver()]
}),
UnoCSS()
],
})