parent
6e0f4107f1
commit
a36de53202
47 changed files with 3516 additions and 210 deletions
@ -1,4 +1,6 @@ |
|||||||
{ |
{ |
||||||
"singleQuote": false, |
"singleQuote": false, |
||||||
"semi": true |
"semi": true, |
||||||
} |
"tabWidth": 4, |
||||||
|
"useTabs": true |
||||||
|
} |
||||||
|
|||||||
@ -1,21 +1,21 @@ |
|||||||
import { get } from '../utils/request' |
import { get } from "../utils/request"; |
||||||
|
|
||||||
|
|
||||||
/** |
/** |
||||||
* 获取商品信息 |
* 获取商品信息 |
||||||
* @param {*} page 页号 |
* @param {*} page 页号 |
||||||
* @param {*} category 分类，为空表示不分类 |
* @param {*} category 分类，为空表示不分类 |
||||||
* @returns
|
* @returns |
||||||
*/ |
*/ |
||||||
export const loadProductAPI = (page = 1, category = '') => get('/api/v1/products/', { |
export const loadProductAPI = (page = 1, category = "") => |
||||||
page, |
get("/api/v1/products/", { |
||||||
category, |
page, |
||||||
// per, 每页最多多少数据
|
category, |
||||||
}); |
// per, 每页最多多少数据
|
||||||
|
}); |
||||||
|
|
||||||
/** |
/** |
||||||
* 返回商品详情 |
* 返回商品详情 |
||||||
* @param {*} id 商品id |
* @param {*} id 商品id |
||||||
* @returns
|
* @returns |
||||||
*/ |
*/ |
||||||
export const loadProductByIdAPI = id => get('/api/v1/products/'+ id); |
export const loadProductByIdAPI = (id) => get("/api/v1/products/" + id); |
||||||
|
|||||||
@ -1,18 +1,17 @@ |
|||||||
import { serverUrl } from "./request"; |
import { serverUrl } from "./request"; |
||||||
|
|
||||||
|
export const extName = (str) => `【${str}】`; |
||||||
export const extName = str => `【${str}】`; |
|
||||||
|
|
||||||
/** |
/** |
||||||
* 处理返回数据中的url字段 |
* 处理返回数据中的url字段 |
||||||
* @param {*} url 请求返回的图片url |
* @param {*} url 请求返回的图片url |
||||||
*/ |
*/ |
||||||
export const dalImageUrl = url => { |
export const dalImageUrl = (url) => { |
||||||
if (url) { |
if (url) { |
||||||
if (url.startsWith('http')) { |
if (url.startsWith("http")) { |
||||||
return url; |
return url; |
||||||
} |
} |
||||||
return serverUrl + url; |
return serverUrl + url; |
||||||
} |
} |
||||||
return "https://hugo.bnblogs.cc/images/img/20220215001349.png"; |
return "https://hugo.bnblogs.cc/images/img/20220215001349.png"; |
||||||
} |
}; |
||||||
|
|||||||
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"recommendations": ["Vue.volar"] |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
# 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) |
||||||
|
|
||||||
|
## Type Support For `.vue` Imports in TS |
||||||
|
|
||||||
|
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: |
||||||
|
|
||||||
|
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. |
||||||
|
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. |
||||||
|
|
||||||
|
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). |
||||||
@ -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> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,21 @@ |
|||||||
|
{ |
||||||
|
"name": "pinia-pre", |
||||||
|
"private": true, |
||||||
|
"version": "0.0.0", |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "vue-tsc --noEmit && vite build", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"pinia": "^2.0.22", |
||||||
|
"vue": "^3.2.37" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@vitejs/plugin-vue": "^3.1.0", |
||||||
|
"typescript": "^4.6.4", |
||||||
|
"vite": "^3.1.0", |
||||||
|
"vue-tsc": "^0.40.4" |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,40 @@ |
|||||||
|
<template> |
||||||
|
<h1>Hello</h1> |
||||||
|
<hr /> |
||||||
|
<button @click="onHandleSub">-</button> |
||||||
|
<span>{{ count }}</span> |
||||||
|
<button @click="onHandlePlus">+</button> |
||||||
|
<div class="padding-10"></div> |
||||||
|
<button @click="onHandleAsyncPlus">异步+</button> |
||||||
|
<HW /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { storeToRefs } from "pinia"; |
||||||
|
import useCounterStore from "./stores/counter"; |
||||||
|
import HW from "./components/HelloWorld.vue"; |
||||||
|
|
||||||
|
const store = useCounterStore(); |
||||||
|
const { count } = storeToRefs(store); |
||||||
|
const onHandlePlus = () => { |
||||||
|
store.plus(); |
||||||
|
}; |
||||||
|
|
||||||
|
const onHandleSub = () => { |
||||||
|
store.sub(); |
||||||
|
}; |
||||||
|
|
||||||
|
const onHandleAsyncPlus = () => { |
||||||
|
store.asyncPlus(); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
span { |
||||||
|
font-size: 20px; |
||||||
|
padding: 0 15px; |
||||||
|
} |
||||||
|
.padding-10 { |
||||||
|
padding-top: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,12 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { storeToRefs } from "pinia"; |
||||||
|
import useCounterStore from "../stores/counter"; |
||||||
|
const store = useCounterStore(); |
||||||
|
const {count} = storeToRefs(store); |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h3>这是Hello World组件数据: {{ count }}</h3> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import { createApp } from 'vue' |
||||||
|
import './style.css' |
||||||
|
import App from './App.vue' |
||||||
|
import { createPinia } from 'pinia' |
||||||
|
|
||||||
|
const pinia = createPinia(); |
||||||
|
|
||||||
|
createApp(App).use(pinia).mount('#app') |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import { defineStore } from "pinia"; |
||||||
|
import { ref } from 'vue' |
||||||
|
|
||||||
|
// 选项式api的写法
|
||||||
|
// export default defineStore('counter',{
|
||||||
|
// // 定义数据
|
||||||
|
// state: () => {
|
||||||
|
// return {
|
||||||
|
// count: 1,
|
||||||
|
// title: '标题',
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// // 数据操作
|
||||||
|
// actions: {
|
||||||
|
// plus() {
|
||||||
|
// this.count++;
|
||||||
|
// },
|
||||||
|
// sub() {
|
||||||
|
// this.count--;
|
||||||
|
// },
|
||||||
|
// asyncPlus() {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.count++;
|
||||||
|
// }, 1000);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
|
// 组合式api写法
|
||||||
|
|
||||||
|
export default defineStore('counter', () => { |
||||||
|
const count = ref(0); |
||||||
|
const plus = () => { |
||||||
|
count.value ++; |
||||||
|
}; |
||||||
|
const sub = () => { |
||||||
|
count.value --; |
||||||
|
}; |
||||||
|
const asyncPlus = () => { |
||||||
|
setTimeout(() => { |
||||||
|
count.value++; |
||||||
|
}, 1000); |
||||||
|
}; |
||||||
|
return { |
||||||
|
count,plus,sub,asyncPlus, |
||||||
|
} |
||||||
|
}); |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.vue' { |
||||||
|
import type { DefineComponent } from 'vue' |
||||||
|
const component: DefineComponent<{}, {}, any> |
||||||
|
export default component |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "ESNext", |
||||||
|
"useDefineForClassFields": true, |
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "Node", |
||||||
|
"strict": true, |
||||||
|
"jsx": "preserve", |
||||||
|
"sourceMap": true, |
||||||
|
"resolveJsonModule": true, |
||||||
|
"isolatedModules": true, |
||||||
|
"esModuleInterop": true, |
||||||
|
"lib": ["ESNext", "DOM"], |
||||||
|
"skipLibCheck": true |
||||||
|
}, |
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], |
||||||
|
"references": [{ "path": "./tsconfig.node.json" }] |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"composite": true, |
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "Node", |
||||||
|
"allowSyntheticDefaultImports": true |
||||||
|
}, |
||||||
|
"include": ["vite.config.ts"] |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { defineConfig } from 'vite' |
||||||
|
import vue from '@vitejs/plugin-vue' |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [vue()] |
||||||
|
}) |
||||||
@ -1,8 +1,8 @@ |
|||||||
<template> |
<template> |
||||||
<h1>用户页</h1> |
<h1>用户页</h1> |
||||||
<router-link :to="{name: 'userInfo'}">【个人信息】</router-link> |
<router-link :to="{ name: 'userInfo' }">【个人信息】</router-link> |
||||||
<router-link :to="{name: 'userScores'}">【我的订单】</router-link> |
<router-link :to="{ name: 'userScores' }">【我的订单】</router-link> |
||||||
<router-link :to="{name: 'userOrders'}">【我的积分】</router-link> |
<router-link :to="{ name: 'userOrders' }">【我的积分】</router-link> |
||||||
<hr /> |
<hr /> |
||||||
<router-view></router-view> |
<router-view></router-view> |
||||||
</template> |
</template> |
||||||
|
|||||||
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"recommendations": ["Vue.volar"] |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
# Vue 3 + Vite |
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 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) |
||||||
@ -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</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"></div> |
||||||
|
<script type="module" src="/src/main.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,21 @@ |
|||||||
|
{ |
||||||
|
"name": "vuex-app", |
||||||
|
"private": true, |
||||||
|
"version": "0.0.0", |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "vite build", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"router": "^1.3.7", |
||||||
|
"vue": "^3.2.37", |
||||||
|
"vue-router": "^4.1.5", |
||||||
|
"vuex": "^4.0.2" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@vitejs/plugin-vue": "^3.1.0", |
||||||
|
"vite": "^3.1.0" |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,26 @@ |
|||||||
|
<script setup> |
||||||
|
import { useStore } from "vuex"; |
||||||
|
const store = useStore(); |
||||||
|
|
||||||
|
const handlePlus = () => { |
||||||
|
store.commit("increment"); |
||||||
|
}; |
||||||
|
const handleSub = () => { |
||||||
|
store.commit("subtraction"); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h3>{{ store.state.title }}</h3> |
||||||
|
<button @click="handleSub">-</button> |
||||||
|
<span>{{ store.state.count }}</span> |
||||||
|
<button @click="handlePlus">+</button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
span { |
||||||
|
font-size: 20px; |
||||||
|
padding: 0 10px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,5 @@ |
|||||||
|
<script setup></script> |
||||||
|
|
||||||
|
<template></template> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { createApp } from "vue"; |
||||||
|
import "./style.css"; |
||||||
|
import App from "./App.vue"; |
||||||
|
import store from "./store"; |
||||||
|
|
||||||
|
|
||||||
|
createApp(App).use(store).mount("#app"); |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import { createStore } from "vuex"; |
||||||
|
|
||||||
|
const store = createStore({ |
||||||
|
state() { |
||||||
|
return { |
||||||
|
count: 0, |
||||||
|
title: "修改count值", |
||||||
|
}; |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
increment(state) { |
||||||
|
state.count++; |
||||||
|
}, |
||||||
|
subtraction(state) { |
||||||
|
state.count--; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default store; |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
:root { |
||||||
|
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 24px; |
||||||
|
font-weight: 400; |
||||||
|
|
||||||
|
color-scheme: light dark; |
||||||
|
color: rgba(255, 255, 255, 0.87); |
||||||
|
background-color: #242424; |
||||||
|
|
||||||
|
font-synthesis: none; |
||||||
|
text-rendering: optimizeLegibility; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
-webkit-text-size-adjust: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
font-weight: 500; |
||||||
|
color: #646cff; |
||||||
|
text-decoration: inherit; |
||||||
|
} |
||||||
|
a:hover { |
||||||
|
color: #535bf2; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
font-weight: 500; |
||||||
|
color: #646cff; |
||||||
|
text-decoration: inherit; |
||||||
|
} |
||||||
|
a:hover { |
||||||
|
color: #535bf2; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
display: flex; |
||||||
|
place-items: center; |
||||||
|
min-width: 320px; |
||||||
|
min-height: 100vh; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 3.2em; |
||||||
|
line-height: 1.1; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
border-radius: 8px; |
||||||
|
border: 1px solid transparent; |
||||||
|
padding: 0.6em 1.2em; |
||||||
|
font-size: 1em; |
||||||
|
font-weight: 500; |
||||||
|
font-family: inherit; |
||||||
|
background-color: #1a1a1a; |
||||||
|
cursor: pointer; |
||||||
|
transition: border-color 0.25s; |
||||||
|
} |
||||||
|
button:hover { |
||||||
|
border-color: #646cff; |
||||||
|
} |
||||||
|
button:focus, |
||||||
|
button:focus-visible { |
||||||
|
outline: 4px auto -webkit-focus-ring-color; |
||||||
|
} |
||||||
|
|
||||||
|
.card { |
||||||
|
padding: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
#app { |
||||||
|
max-width: 1280px; |
||||||
|
margin: 0 auto; |
||||||
|
padding: 2rem; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) { |
||||||
|
:root { |
||||||
|
color: #213547; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
a:hover { |
||||||
|
color: #747bff; |
||||||
|
} |
||||||
|
button { |
||||||
|
background-color: #f9f9f9; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { defineConfig } from 'vite' |
||||||
|
import vue from '@vitejs/plugin-vue' |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [vue()] |
||||||
|
}) |
||||||
Loading…
Reference in new issue