npmrun
4 years ago
31 changed files with 1727 additions and 1444 deletions
@ -1,14 +0,0 @@ |
|||||
import {onMounted,ref} from "vue" |
|
||||
import {request_} from "./request"; |
|
||||
|
|
||||
const fuck = { |
|
||||
install(app){ |
|
||||
app.provide("$http",fuck) |
|
||||
// app.config.globalProperties.$http = fuck;
|
|
||||
}, |
|
||||
bannerData: (data)=>request_("GET",'https://gank.io/api/v2/banners',data), |
|
||||
articleData: (data)=>request_("GET",'https://gank.io/api/v2/data/category/GanHuo/type/frontend/page/1/count/10',data), |
|
||||
articleDetail: (data)=>request_("GET",'https://gank.io/api/v2/post/'+data) |
|
||||
} |
|
||||
|
|
||||
export default fuck |
|
||||
@ -0,0 +1,25 @@ |
|||||
|
import {onMounted,App} from "vue" |
||||
|
import {request_,EType} from "./request"; |
||||
|
|
||||
|
type func = (app: App)=>void |
||||
|
type data = (data: { })=>Promise<any> |
||||
|
|
||||
|
interface IApi { |
||||
|
install:func; |
||||
|
articleDetail:data; |
||||
|
bannerData:data; |
||||
|
articleData:data; |
||||
|
// [propsName: string]: data | func | void;
|
||||
|
} |
||||
|
|
||||
|
const fuck:IApi = { |
||||
|
install(app: App){ |
||||
|
app.provide("$http",fuck) |
||||
|
// app.config.globalProperties.$http = fuck;
|
||||
|
}, |
||||
|
bannerData: (data={})=>request_(EType.GET,'https://gank.io/api/v2/banners',data), |
||||
|
articleData: (data={})=>request_(EType.GET,'https://gank.io/api/v2/data/category/GanHuo/type/frontend/page/1/count/10',data), |
||||
|
articleDetail: (data={})=>request_(EType.GET,'https://gank.io/api/v2/post/'+data) |
||||
|
} |
||||
|
|
||||
|
export default fuck |
||||
@ -0,0 +1,48 @@ |
|||||
|
/* http://meyerweb.com/eric/tools/css/reset/ |
||||
|
v2.0 | 20110126 |
||||
|
License: none (public domain) |
||||
|
*/ |
||||
|
|
||||
|
html, body, div, span, applet, object, iframe, |
||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||
|
a, abbr, acronym, address, big, cite, code, |
||||
|
del, dfn, em, img, ins, kbd, q, s, samp, |
||||
|
small, strike, strong, sub, sup, tt, var, |
||||
|
b, u, i, center, |
||||
|
dl, dt, dd, ol, ul, li, |
||||
|
fieldset, form, label, legend, |
||||
|
table, caption, tbody, tfoot, thead, tr, th, td, |
||||
|
article, aside, canvas, details, embed, |
||||
|
figure, figcaption, footer, header, hgroup, |
||||
|
menu, nav, output, ruby, section, summary, |
||||
|
time, mark, audio, video { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
font-size: 100%; |
||||
|
font: inherit; |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
/* HTML5 display-role reset for older browsers */ |
||||
|
article, aside, details, figcaption, figure, |
||||
|
footer, header, hgroup, menu, nav, section { |
||||
|
display: block; |
||||
|
} |
||||
|
body { |
||||
|
line-height: 1; |
||||
|
} |
||||
|
ol, ul { |
||||
|
list-style: none; |
||||
|
} |
||||
|
blockquote, q { |
||||
|
quotes: none; |
||||
|
} |
||||
|
blockquote:before, blockquote:after, |
||||
|
q:before, q:after { |
||||
|
content: ''; |
||||
|
content: none; |
||||
|
} |
||||
|
table { |
||||
|
border-collapse: collapse; |
||||
|
border-spacing: 0; |
||||
|
} |
||||
@ -1,23 +1,23 @@ |
|||||
<template> |
<template> |
||||
<Mobile> |
<Mobile> |
||||
<router-view></router-view> |
<router-view></router-view> |
||||
</Mobile> |
</Mobile> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script lang="ts"> |
||||
import { getCurrentInstance,inject, onMounted } from "vue"; |
import {defineComponent, getCurrentInstance, inject, onMounted} from "vue"; |
||||
export default { |
|
||||
setup(props,context) { |
export default defineComponent({ |
||||
console.log(context); |
setup(props, context) { |
||||
// 上面这个context不包含全局变量，应该就是提供一些内置接口用的 |
console.log(context); |
||||
// 执行 setup 时，组件实例尚未被创建 |
// 上面这个context不包含全局变量，应该就是提供一些内置接口用的 |
||||
const $http = inject('$http') |
// 执行 setup 时，组件实例尚未被创建 |
||||
console.log($http); |
const $http = inject('$http') |
||||
const {ctx} = getCurrentInstance() |
console.log($http); |
||||
console.log(ctx); |
const instance = getCurrentInstance() |
||||
onMounted(() => { |
onMounted(() => { |
||||
console.log("ctx", ctx.name); // xianyu |
console.log("proxy", instance!.proxy!.$version); |
||||
}); |
}); |
||||
}, |
}, |
||||
}; |
}) |
||||
</script> |
</script> |
||||
|
|||||
@ -0,0 +1,55 @@ |
|||||
|
.box { |
||||
|
background-color: #090723; |
||||
|
height: 200px; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
header { |
||||
|
height: 50px; |
||||
|
line-height: 50px; |
||||
|
.logo { |
||||
|
float: left; |
||||
|
position: relative; |
||||
|
|
||||
|
.logo__name { |
||||
|
font-weight: bold; |
||||
|
font-size: 23px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.menus { |
||||
|
float: left; |
||||
|
padding-left: 20px; |
||||
|
font-size: 14px; |
||||
|
color: rgba(255, 255, 255, .5); |
||||
|
.menu { |
||||
|
float: left; |
||||
|
margin: 0 20px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
.dropdown { |
||||
|
position: absolute; |
||||
|
top: 100%; |
||||
|
left: 0; |
||||
|
overflow: hidden; |
||||
|
max-height: 0; |
||||
|
background-color: black; |
||||
|
line-height: 1.2; |
||||
|
transition: max-height .5s linear; |
||||
|
} |
||||
|
&:hover { |
||||
|
color: white; |
||||
|
.dropdown { |
||||
|
max-height: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.operation{ |
||||
|
float: right; |
||||
|
color: rgba(255, 255, 255, .5); |
||||
|
&:hover { |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,12 @@ |
|||||
|
import {App} from "vue"; |
||||
|
|
||||
|
export default { |
||||
|
install(app: App) { |
||||
|
app.directive('focus', { |
||||
|
mounted(el) { |
||||
|
el.focus() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
import {createApp, h ,onMounted} from "vue"; |
||||
|
|
||||
|
let toast = document.createElement("div") |
||||
|
toast.id = "toast"; |
||||
|
document.body.appendChild(toast); |
||||
|
|
||||
|
const toastData = createApp({ |
||||
|
setup(){ |
||||
|
return ()=> h("div",{ |
||||
|
onClick: ($event)=>{ |
||||
|
console.log(toastData) |
||||
|
}, |
||||
|
style: { |
||||
|
color: 'red' |
||||
|
}, |
||||
|
on:{ |
||||
|
|
||||
|
} |
||||
|
},"sadsa") |
||||
|
} |
||||
|
}).mount('#toast'); |
||||
@ -0,0 +1,12 @@ |
|||||
|
import { App } from "vue" |
||||
|
|
||||
|
declare module '@vue/runtime-core' { |
||||
|
interface ComponentCustomProperties { |
||||
|
$version: string |
||||
|
} |
||||
|
} |
||||
|
export default { |
||||
|
install(app: App) { |
||||
|
app.config.globalProperties.$version = 'xianyu' |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
// 文件路径 shims-vue.d.ts
|
||||
|
declare module '*.vue' { |
||||
|
import type { DefineComponent } from 'vue' |
||||
|
const component: DefineComponent<{}, {}, any> |
||||
|
export default component |
||||
|
} |
||||
|
|
||||
|
// 对vue进行类型补充说明
|
||||
|
// declare module '@vue/runtime-core' {
|
||||
|
// interface ComponentCustomProperties {
|
||||
|
// name: string
|
||||
|
// }
|
||||
|
// }
|
||||
|
//
|
||||
|
// declare module 'vue/types/vue' {
|
||||
|
// interface Vue {
|
||||
|
// $globalData: any;
|
||||
|
// }
|
||||
|
// interface ComponentInternalInstance {
|
||||
|
// proxy: any
|
||||
|
// }
|
||||
|
// }
|
||||
@ -0,0 +1,20 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"target": "esnext", |
||||
|
"module": "esnext", |
||||
|
"moduleResolution": "node", |
||||
|
"strict": true, |
||||
|
"jsx": "preserve", |
||||
|
"sourceMap": true, |
||||
|
"resolveJsonModule": true, |
||||
|
"esModuleInterop": true, |
||||
|
"lib": ["esnext", "dom", "node"], |
||||
|
"types": ["vite/client"], |
||||
|
"baseUrl": ".", |
||||
|
"paths": { |
||||
|
"@/*": ["./src/*"] |
||||
|
} |
||||
|
}, |
||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts"], |
||||
|
"exclude": ["node_modules"] |
||||
|
} |
||||
Loading…
Reference in new issue