Kane/vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

做一些清理

Browse Source
This commit is contained in:
Kane Wang
2022-12-14 18:36:32 +08:00
parent 7c9e1a682b
commit 4cb90a5925
51 changed files with 767 additions and 1088 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
cli/hello-router/src/App.vue Normal file
View File

@@ -0,0 +1,35 @@
<!--
* @Author: Kane
* @Date: 2022-11-24 01:13:55
* @LastEditors: Kane
* @LastEditTime: 2022-11-25 16:35:46
* @FilePath: \hello-router\src\App.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<el-container>
<el-header><Header></Header></el-header>
<el-main><Main></Main></el-main>
</el-container>
</template>
<script>
import Header from "./components/页面组件/Header";
import Main from "./components/页面组件/Main";
export default {
name: "App",
components: { Header, Main },
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

BIN
cli/hello-router/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

58
cli/hello-router/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

25
cli/hello-router/src/components/功能页面/demo-1.vue Normal file
View File

@@ -0,0 +1,25 @@
<!--
* @Author: Kane
* @Date: 2022-11-24 01:18:18
* @LastEditors: Kane
* @LastEditTime: 2022-11-24 01:21:20
* @FilePath: \hello-router\src\components\功能页面\demo-1.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: "demo-1",
data() {
return {
title: "测试router-1",
};
},
};
</script>
<style scoped>
</style>

25
cli/hello-router/src/components/功能页面/demo-2.vue Normal file
View File

@@ -0,0 +1,25 @@
<!--
* @Author: Kane
* @Date: 2022-11-24 01:20:58
* @LastEditors: Kane
* @LastEditTime: 2022-11-24 01:22:30
* @FilePath: \hello-router\src\components\功能页面\demo-2.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: "demo-2",
data() {
return {
title: "测试页面-2",
};
},
};
</script>
<style scoped>
</style>

33
cli/hello-router/src/components/功能页面/路由守卫.vue Normal file
View File

@@ -0,0 +1,33 @@
<!--
* @Author: Kane
* @Date: 2022-11-24 09:42:35
* @LastEditors: Kane
* @LastEditTime: 2022-11-24 09:58:11
* @FilePath: \hello-router\src\components\功能页面\路由守卫.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<h1>路由守卫</h1>
<h1>{{ user.name }}</h1>
</template>
<script>
export default {
name: "route-guard",
data() {
return {
user: {
name: "",
age: 20,
},
};
},
beforeRouteUpdate(to) {
alert(to.params.username);
this.user.name = to.params.username;
},
};
</script>
<style scoped>
</style>

32
cli/hello-router/src/components/页面组件/Header.vue Normal file
View File

@@ -0,0 +1,32 @@
<!--
* @Author: Kane
* @Date: 2022-11-25 15:29:48
* @LastEditors: Kane
* @LastEditTime: 2022-11-25 15:36:18
* @FilePath: \hello-router\src\components\页面组件\header.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div class="container">
<h1>我来组成头部！</h1>
</div>
</template>
<script>
export default {
name: "header-part",
data() {
return {};
},
};
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
border: 1px solid red;
}
</style>

34
cli/hello-router/src/components/页面组件/Main.vue Normal file
View File

@@ -0,0 +1,34 @@
<!--
* @Author: Kane
* @Date: 2022-11-25 15:29:55
* @LastEditors: Kane
* @LastEditTime: 2022-11-25 15:37:49
* @FilePath: \hello-router\src\components\页面组件\main.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div class="container">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "main-part",
data() {
return {
title: "我来组成身体！",
};
},
};
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
border: 1px solid red;
}
</style>

26
cli/hello-router/src/main.js Normal file
View File

@@ -0,0 +1,26 @@
/*
* @Author: Kane
* @Date: 2022-11-24 09:08:41
* @LastEditors: Kane
* @LastEditTime: 2022-11-25 16:22:52
* @FilePath: \hello-router\src\main.js
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
import { createApp } from "vue";
// import { createRouter, createWebHashHistory } from "vue-router";
//引入组件
import App from "./App.vue";
// import { Header } from "./components/页面组件/Header.vue";
// import { Main } from "./components/页面组件/Main.vue";
// import { demo1 } from "./components/功能页面/demo-1.vue";
// import { demo2 } from "./components/功能页面/demo-2.vue";
const app = createApp(App);
// const routes = [
// {path}
// ];
app.mount("#app");