登录注册页面

主菜单框架
master
pan 4 years ago
commit af5c28a3aa
  1. 13
      .editorconfig
  2. 17
      .eslintrc.js
  3. 90
      .gitignore
  4. 4
      .prettierrc
  5. 20
      README.md
  6. 9
      app.html
  7. 7
      assets/README.md
  8. 0
      assets/type.ts
  9. 35
      components/Logo.vue
  10. 7
      components/README.md
  11. 31
      components/login.vue
  12. 35
      components/register.vue
  13. 18
      content/hello.md
  14. 7
      layouts/README.md
  15. 55
      layouts/default.vue
  16. 13
      layouts/error.vue
  17. 68
      layouts/mainmenu.vue
  18. 8
      middleware/README.md
  19. 117
      nuxt.config.js
  20. 51
      package.json
  21. 6
      pages/README.md
  22. 46
      pages/account/index.vue
  23. 11
      pages/index.vue
  24. 10
      pages/index/center.vue
  25. 9
      pages/index/document.vue
  26. 9
      pages/index/note.vue
  27. 41
      pages/index/upload.vue
  28. 7
      plugins/README.md
  29. 5
      plugins/element-ui.js
  30. 11
      static/README.md
  31. 3
      static/circle-star.svg
  32. BIN
      static/favicon.ico
  33. BIN
      static/icon.png
  34. 10
      store/README.md
  35. 6
      stylelint.config.js
  36. 37
      tsconfig.json
  37. 10821
      yarn.lock

@ -0,0 +1,13 @@
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

@ -0,0 +1,17 @@
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: [
'@nuxtjs/eslint-config-typescript',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: ['prettier'],
// add your custom rules here
rules: {},
}

90
.gitignore vendored

@ -0,0 +1,90 @@
# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# Nuxt generate
dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE / Editor
.idea
# Service worker
sw.*
# macOS
.DS_Store
# Vim swap files
*.swp

@ -0,0 +1,4 @@
{
"semi": false,
"singleQuote": true
}

@ -0,0 +1,20 @@
# cloud_note
## Build Setup
```bash
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generate
```
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

@ -0,0 +1,7 @@
# ASSETS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

@ -0,0 +1,35 @@
<template>
<svg
class="NuxtLogo"
width="245"
height="180"
viewBox="0 0 452 342"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
fill="#00C58E"
/>
<path
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
fill="#108775"
/>
<path
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
fill="#2F495E"
/>
</svg>
</template>
<style>
.NuxtLogo {
animation: 1s appear;
margin: auto;
}
@keyframes appear {
0% {
opacity: 0;
}
}
</style>

@ -0,0 +1,7 @@
# COMPONENTS
**This directory is not required, you can delete it if you don't want to use it.**
The components directory contains your Vue.js Components.
_Nuxt.js doesn't supercharge these components._

@ -0,0 +1,31 @@
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="帐号">
<el-input v-model="form.user" placeholder="请输入帐号"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onLogin(form.user,form.password)">登录</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
export default {
name: 'login',
data(){
return {
form:{
user:'',
password:''
}
}
},
props:{
onLogin:Function
}
}
</script>

@ -0,0 +1,35 @@
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item :label="$t('user')">
<el-input v-model="form.user" placeholder="请输入帐号"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码">
<el-input v-model="form.confirmPwd" type="password" placeholder="请确认密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onRegister(form.user,form.password)">注册</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
export default {
name: 'register',
data(){
return {
form:{
user:'',
password:'',
confirmPwd:''
}
}
},
props:{
onRegister:Function
}
}
</script>

@ -0,0 +1,18 @@
---
title: Getting started
description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
---
Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
## Writing content
Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
## Fetching content
Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
## Displaying content
Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.

@ -0,0 +1,7 @@
# LAYOUTS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Application Layouts.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

@ -0,0 +1,55 @@
<template>
<div>
<Nuxt />
</div>
</template>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>

@ -0,0 +1,13 @@
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">页面不存在</h1>
<h1 v-else>应用发生错误异常</h1>
<nuxt-link to="/"> </nuxt-link>
</div>
</template>
<script lang="ts">
export default {
props: ['error']
}
</script>

@ -0,0 +1,68 @@
<template>
<el-container>
<el-aside>
<el-row>
<el-col :span="12">
<el-image src="/circle-star.svg">
</el-image>
<h1 class="el-dialog--center"></h1>
<el-menu @select="selectItem" :router="true" default-active="/document">
<el-menu-item :index="localePath('/'+item,$i18n.locale)" v-for="item in menus" :key="item">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{$t("menus."+item)}}</span>
</template>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-container>
<el-header>
<el-row type="flex" justify="end">
<el-col>
<span class="title">{{ $t('app_name') }}</span>
</el-col>
<el-col>
<el-dropdown class="ml4">
<span class="el-dropdown-link">
{{$t('choose_lang')}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in ['zhCN', 'en']" :key="item">
<nuxt-link v-if="$i18n.locale !== item" :to="switchLocalePath(item)">
{{$t(item)}}
</nuxt-link>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-header>
<el-main><nuxt/></el-main>
</el-container>
</el-container>
</template>
<script lang="ts">
export default {
name: 'mainmenu',
methods:{
selectItem(index:string,indexPath:Array<String>){
console.info(index,indexPath)
}
},
data() {
return {
menus:['document','note','center','upload']
}
}
}
</script>
<style>
.title{
font-size: 25px;
font-weight: bold;
}
</style>

@ -0,0 +1,8 @@
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

@ -0,0 +1,117 @@
export default {
server: {
port: 5000,
},
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'spa',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'static',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }],
},
/*
** Global CSS
*/
css: ['element-ui/lib/theme-chalk/index.css'],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: ['@/plugins/element-ui'],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxt/typescript-build',
// Doc: https://github.com/nuxt-community/stylelint-module
'@nuxtjs/stylelint-module',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
// Doc: https://github.com/nuxt/content
'@nuxt/content',
'nuxt-i18n'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Content module configuration
** See https://content.nuxtjs.org/configuration
*/
content: {},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
transpile: [/^element-ui/],
},
i18n: {
locales: ['zhCN', 'en'],
defaultLocale: 'zhCN',
vueI18n: {
fallbackLocale: 'zhCN',
messages: {
zhCN: {
app_name:'云笔记',
choose_lang:'选择语言',
menus:{
document:'文档',
note:'笔记列表',
center:'个人中心',
upload:'本地上传论文'
},
zhCN: '简体中文',
en: '英文',
user: '帐号'
},
en: {
app_name:'cloudnote',
choose_lang:'language',
menus:{
document:'document',
note:'note list',
center:'个人中心',
upload:'本地上传论文'
},
zhCN: 'Simplified Chinese',
en: 'english',
user: '帐号'
}
}
}
}
}

@ -0,0 +1,51 @@
{
"name": "cloud_note",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt-ts build",
"start": "nuxt-ts start",
"export": "nuxt-ts export",
"serve": "nuxt-ts serve",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
"lint": "yarn lint:js && yarn lint:style"
},
"lint-staged": {
"*.{js,vue}": "eslint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@nuxt/content": "^1.3.2",
"@nuxt/typescript-runtime": "^0.4.10",
"@nuxtjs/axios": "^5.11.0",
"@nuxtjs/pwa": "^3.0.0-beta.20",
"element-ui": "^2.13.2",
"nuxt": "^2.13.0",
"nuxt-i18n": "^6.13.1"
},
"devDependencies": {
"@nuxt/typescript-build": "^1.0.3",
"@nuxtjs/eslint-config": "^3.0.0",
"@nuxtjs/eslint-config-typescript": "^2.0.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/stylelint-module": "^4.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-nuxt": "^1.0.0",
"eslint-plugin-prettier": "^3.1.4",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"stylelint": "^13.6.1",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-standard": "^20.0.0"
}
}

@ -0,0 +1,6 @@
# PAGES
This directory contains your Application Views and Routes.
The framework reads all the `*.vue` files inside this directory and creates the router of your application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

@ -0,0 +1,46 @@
<template>
<div class="container">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="登录" name="login">
<login :on-login="onLogin"/>
</el-tab-pane>
<el-tab-pane label="注册" name="register">
<register :on-register="onRegister"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Login from '../../components/login'
import Register from '../../components/register'
export default {
name: 'index',
components: { Register, Login },
data() {
return {
activeName: 'login'
};
},
methods: {
onLogin(user,password){
console.info(user,password)
},
onRegister(user,password){
console.info(user,password)
}
}
}
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>

@ -0,0 +1,11 @@
<template>
<nuxt-child/>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
layout:"mainmenu"
})
</script>

@ -0,0 +1,10 @@
<template>
<h1>个人中心</h1>
</template>
<script lang="ts">
export default {
name: 'center'
}
</script>

@ -0,0 +1,9 @@
<template>
<h1>文档</h1>
</template>
<script lang="ts">
export default {
name: 'document'
}
</script>

@ -0,0 +1,9 @@
<template>
<h1>笔记列表</h1>
</template>
<script lang="ts">
export default {
name: 'note'
}
</script>

@ -0,0 +1,41 @@
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="论文类型">
<el-select v-model="form.type">
<el-option v-for="item in options" :key="item.value" :value="item.value" placeholder="请输入论文类型">{{item.label}}</el-option>
</el-select>
</el-form-item>
<el-form-item label="论文作者">
<el-col :span="4">
<el-input v-model="form.author" placeholder="请输入论文作者"></el-input>
</el-col>
</el-form-item>
<el-form-item label="学科专业">
<el-col :span="4">
<el-input v-model="form.profession" placeholder="请输入学科专业"></el-input>
</el-col>
</el-form-item>
</el-form>
</template>
<script lang="ts">
export default {
name: 'upload',
data(){
return {
form:{
type:'',
author:'',
profession:''
},
options: [{
value: '选项1',
label: '硕士论文'
},{
value: '选项2',
label: '博士论文'
}]
}
}
}
</script>

@ -0,0 +1,7 @@
# PLUGINS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

@ -0,0 +1,5 @@
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })

@ -0,0 +1,11 @@
# STATIC
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your static files.
Each file inside this directory is mapped to `/`.
Thus you'd want to delete this README.md before deploying to production.
Example: `/static/robots.txt` is mapped as `/robots.txt`.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

@ -0,0 +1,3 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1594125736495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3885"
width="200" height="200"><defs><style type="text/css"></style></defs><path d="M413.372632 379.526737l74.536421-149.072842a26.947368 26.947368 0 0 1 48.181894 0l74.536421 149.072842 174.618948 24.953263a26.947368 26.947368 0 0 1 15.306105 45.756632l-123.957895 123.957894 50.176 200.757895a26.947368 26.947368 0 0 1-41.822315 28.456421L512 679.828211l-173.002105 123.580631a26.947368 26.947368 0 0 1-41.768421-28.456421l50.176-200.811789-123.957895-123.957895a26.947368 26.947368 0 0 1 15.25221-45.702737l174.618948-24.953263z m41.87621 36.75621a26.947368 26.947368 0 0 1-20.264421 14.605474l-135.275789 19.348211 96.633263 96.579368a26.947368 26.947368 0 0 1 7.06021 25.6l-36.109473 144.599579 129.024-92.16a26.947368 26.947368 0 0 1 31.366736 0l129.077895 92.16-36.163368-144.599579a26.947368 26.947368 0 0 1 7.06021-25.6l96.633263-96.579368-135.275789-19.348211a26.947368 26.947368 0 0 1-20.264421-14.605474L512 302.780632 455.248842 416.282947zM512 1024a512 512 0 1 1 0-1024 512 512 0 0 1 0 1024z m0-53.894737a458.105263 458.105263 0 1 0 0-916.210526 458.105263 458.105263 0 0 0 0 916.210526z" fill="#000000" p-id="3886"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

@ -0,0 +1,10 @@
# STORE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a file in this directory automatically activates the option in the framework.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

@ -0,0 +1,6 @@
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
// add your custom config here
// https://stylelint.io/user-guide/configuration
rules: {},
}

@ -0,0 +1,37 @@
{
"compilerOptions": {
"target": "es2018",
"module": "esnext",
"moduleResolution": "node",
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types",
"nuxt-i18n"
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}

10821
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save