Skip to content
GitLab
Commit a2246892 authored by liyang li's avatar liyang li
Browse files

first edition

parents
Expand all Hide whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ a2246892
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.vscode/extensions.json 0 → 100644
View file @ a2246892
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}
README.md 0 → 100644
View file @ a2246892
# pasteBin00
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](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).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
index.html 0 → 100644
View file @ a2246892
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package-lock.json 0 → 100644
View file @ a2246892
This diff is collapsed.
package.json 0 → 100644
View file @ a2246892
{
"name": "pastebin00",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.2.38"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.3",
"naive-ui": "^2.33.3",
"vfonts": "^0.0.3",
"vite": "^3.0.9"
}
}
src/App.vue 0 → 100644
View file @ a2246892
<script setup>
import Header from './components/Header.vue'
import Main from './components/Main.vue'
import Setting from './components/Setting.vue'
import Uploaded from './components/Uploaded.vue'
</script>
<template>
<Header></Header>
<Main></Main>
<Setting></Setting>
<Uploaded></Uploaded>
<footer></footer>
</template>InputSetting
<style scoped>
footer{
position: relative;
height: 80px;
}
</style>
\ No newline at end of file
src/assets/reset.css 0 → 100644
View file @ a2246892
/* 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;
}
\ No newline at end of file
src/components/Header.vue 0 → 100644
View file @ a2246892
<script setup>
import { NDivider } from 'naive-ui'
</script>
<template>
<header>
<div class="title-wrapper">
<h1 class="title">PasteBin</h1>
<n-divider />
</div>
<p class="discription">
This is a PasteBin.
<br>
<span class="bold">Usage</span> : Code text or upload a file, click submit button, and get an <span class="gray">URL</span>.
<br>
With the <span class="gray">URL</span> you can share it.
</p>
</header>
</template>
<style scoped>
*{
box-sizing: border-box;
}
header{
position: relative;
height: 220px;
width: 100%;
/* background-color: aqua; */
}
.title-wrapper{
/* background-color: blue; */
height: 100px;
width: 70%;
position: absolute;
left: 50%; top: 50%;
margin: -75px 0 0 -35%;
}
.title-wrapper .title{
font-size: 50px;
}
.discription{
/* background-color: blueviolet; */
height: 90px;
width: 70%;
position: absolute;
left: 50%; top: 50%;
margin: 0 0 0 -35%;
line-height: 30px;
font-size: 18px;
}
.discription .bold{
font-weight: 900;
}
.discription .gray{
color: gray;
}
</style>
\ No newline at end of file
src/components/Main.vue 0 → 100644
View file @ a2246892
<script setup>
import {NButton} from 'naive-ui'
</script>
<template>
<div class="main-wrapper">
<div class="text-wrapper">
<div class="button-bar">
<n-button strong secondary type="tertiary">
&nbsp;Edit text&nbsp;
</n-button>
<n-button strong secondary type="tertiary">
Upload File
</n-button>
</div>
<div class="text-area">
<slot name='text'>
<!-- 插槽，留给代码输入&高亮 -->
</slot>
</div>
</div>
</div>
</template>
<style scoped>
.main-wrapper{
/* background-color: green; */
position: relative;
height: 600px;
}
.main-wrapper .text-wrapper{
/* background-color: hotpink; */
width: 70%;
height: 600px;
position: absolute;
left: 50%;
margin: 0 -35%;
}
.text-wrapper .text-area{
height: 565px;
border: 1px rgb(221, 221, 221) solid;
}
</style>
\ No newline at end of file
src/components/Setting.vue 0 → 100644
View file @ a2246892
<script setup>
</script>
<template>
<div class="Setting-wrapper">
<div class="Setting-center-wrapper">
<slot>
<!-- 插槽，留给设置选项 -->
</slot>
setting
</div>
</div>
</template>
<style scoped>
.Setting-wrapper{
/* background-color: blue; */
position: relative;
height: 365px;
}
.Setting-wrapper .Setting-center-wrapper{
/* background-color: hotpink; */
width: 70%;
height: 350px;
position: absolute;
left: 50%;
margin: 15px -35%;
border: 1px rgb(221, 221, 221) solid;
}
</style>
src/components/Uploaded.vue 0 → 100644
View file @ a2246892
<script setup>
</script>
<template>
<div class="Uploaded-wrapper">
<div class="Uploaded-center-wrapper">
<slot>
<!-- 插槽，留给设置选项 -->
</slot>
uploaded(hide initially)
</div>
</div>
</template>
<style scoped>
.Uploaded-wrapper{
/* background-color: blue; */
position: relative;
height: 315px;
}
.Uploaded-wrapper .Uploaded-center-wrapper{
/* background-color: hotpink; */
width: 70%;
height: 300px;
position: absolute;
left: 50%;
margin: 15px -35%;
border: 1px rgb(221, 221, 221) solid;
}
</style>
src/main.js 0 → 100644
View file @ a2246892
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import './assets/reset.css'
createApp(App).mount('#app')
vite.config.js 0 → 100644
View file @ a2246892
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment