parent
6e0f4107f1
commit
a36de53202
47 changed files with 3516 additions and 210 deletions
@ -1,4 +1,6 @@ |
||||
{ |
||||
"singleQuote": false, |
||||
"semi": true |
||||
"semi": true, |
||||
"tabWidth": 4, |
||||
"useTabs": true |
||||
} |
||||
@ -1,18 +1,17 @@ |
||||
import { serverUrl } from "./request"; |
||||
|
||||
|
||||
export const extName = str => `【${str}】`; |
||||
export const extName = (str) => `【${str}】`; |
||||
|
||||
/** |
||||
* 处理返回数据中的url字段 |
||||
* @param {*} url 请求返回的图片url |
||||
*/ |
||||
export const dalImageUrl = url => { |
||||
export const dalImageUrl = (url) => { |
||||
if (url) { |
||||
if (url.startsWith('http')) { |
||||
if (url.startsWith("http")) { |
||||
return url; |
||||
} |
||||
return serverUrl + url; |
||||
} |
||||
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()] |
||||
}) |
||||
@ -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