Ruin/vue-frame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善

Browse Source
This commit is contained in:
Ruin
2022-03-10 12:30:05 +08:00
parent 602e9d2f87
commit db6e49ad10
14 changed files with 1524 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1780
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@@ -8,18 +8,20 @@
},
"dependencies": {
"axios": "^0.25.0",
"dayjs": "^1.10.7",
"dayjs": "^1.10.8",
"element-plus": "^1.3.0-beta.8",
"lodash": "^4.17.21",
"normalize.css": "^8.0.1",
"qs": "^6.10.3",
"vue": "^3.2.25",
"vue-router": "^4.0.12"
"vue": "^3.2.31",
"vue-router": "^4.0.13"
},
"devDependencies": {
"@types/node": "^17.0.12",
"@vitejs/plugin-vue": "^2.0.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"@types/node": "^17.0.21",
"@vitejs/plugin-vue": "^2.2.4",
"sass": "^1.49.9",
"typescript": "^4.6.2",
"vite": "^2.8.6",
"vue-tsc": "^0.29.8",
"vuex": "^4.0.2"
}

23
src/App.vue
View File

@@ -4,25 +4,20 @@
* @Author: Ruin 🍭
* @Date: 2022-01-25 16:22:24
* @LastEditors: 刘引
* @LastEditTime: 2022-02-07 12:43:43
* @LastEditTime: 2022-03-10 10:55:38
-->
<script setup lang="ts">
</script>
<template>
<Header></Header>
<router-view></router-view>
<div>修改后的效果</div>
<Footer></Footer>
</template>
<script setup lang="ts">
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</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;
}
@import "./assets/scss/index.scss";
</style>

9
src/assets/scss/index.scss
View File

@@ -1,4 +1,13 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
li {
list-style: none;
}
.w {
width: 80vw;
margin: 0 auto;
}
$fzt: 20px;

14
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,14 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-10 10:15:34
* @LastEditors: 刘引
* @LastEditTime: 2022-03-10 10:51:31
-->
<template>
<div class="header-root">我是足部组件</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped></style>

61
src/components/HelloWorld.vue
View File

@@ -1,61 +0,0 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-01-25 16:22:24
* @LastEditors: 刘引
* @LastEditTime: 2022-01-25 16:26:59
-->
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
</p>
<p>
See
<code>README.md</code> for more information.
</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<style scoped>
a {
color: #42b983;
}
label {
margin: 0 0.5em;
font-weight: bold;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
color: #304455;
}
</style>

14
src/components/header.vue Normal file
View File

@@ -0,0 +1,14 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-10 10:15:28
* @LastEditors: 刘引
* @LastEditTime: 2022-03-10 10:46:16
-->
<template>
<div class="root">我是头部组件</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped></style>

10
src/main.ts
View File

@@ -1,8 +1,16 @@
/*
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-01-25 16:22:24
* @LastEditors: 刘引
* @LastEditTime: 2022-03-10 10:46:51
*/
import { createApp } from "vue";
import router from "./router/index"; //引入vue-router
import store from "./store/index";
import App from "./App.vue";
import "normalize.css/normalize.css";
const app = createApp(App);
app.use(router); // 挂载到app上
app.use(store); // 挂载到app上

13
src/router/index.ts
View File

@@ -4,19 +4,20 @@
* @Author: Ruin 🍭
* @Date: 2022-01-25 16:57:54
* @LastEditors: 刘引
* @LastEditTime: 2022-01-25 17:35:58
* @LastEditTime: 2022-03-10 10:59:20
*/
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: "/",
component: () => import("../views/index.vue"),
component: () => import("../views/home/index.vue"),
// children: [{}]
// redirect: "/index",
},
// {
// path: "/index",
// component: () => import("../views/index.vue"),
// },
{
path: "/user",
component: () => import("../views/user/index.vue"),
},
];
const router = createRouter({

8
src/views/home/components/news.vue Normal file
View File

@@ -0,0 +1,8 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-10 10:11:16
* @LastEditors: 刘引
* @LastEditTime: 2022-03-10 10:11:17
-->

59
src/views/home/index.vue Normal file
View File

@@ -0,0 +1,59 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-10 10:11:06
* @LastEditors: 刘引
* @LastEditTime: 2022-03-10 11:56:34
-->
<template>
<div class="root-home">
<p>写一点demo玩一玩</p>
<el-button @click="getData()">{{ res }}</el-button>
<button @click="changeData()">更改值</button>
<div v-for="(item, index) in moreRes">{{ index }}==={{ item.title }}</div>
</div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
let res = ref('我是响应式数据')
let moreRes = reactive([{ title: '我是复杂数据' }, { title: '我是复杂数据' }, { title: '我是复杂数据' }])
const getData = () => {
console.log('出发一下');
moreRes[0].title = '123'
for (let i of moreRes) {
console.log(i);
}
// console.log(moreRes);
}
const changeData = () => {
res.value = '呵呵'
console.log(res.value);
console.log('触发');
}
// localStorage.setItem('key', res)
// dom结构还未完成渲染
onBeforeMount(() => {
console.log('触发');
})
// dom结构渲染完成
onMounted(() => {
console.log('dom渲染完毕');
})
// 在界面数据更改时会触发
onUpdated(() => {
console.log('触发');
})
onUnmounted(() => {
// res.value = '我的值被更改'
// console.log(res.value);
})
</script>
<style lang="scss" scoped>
</style>

28
src/views/index.vue
View File

@@ -1,28 +0,0 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-01-25 17:26:47
* @LastEditors: 刘引
* @LastEditTime: 2022-02-07 12:44:33
-->
<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import { ref } from 'vue';
const msg = ref('这是主页')
console.log('尝试打印一下as，这个效果非常的号');
</script>
<template>
<div class="home">{{ msg }}</div>
<div class="content">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Vue 3 + TypeScript + Vite + volar + vscode +element-plus" />
<el-button>Default</el-button>
</div>
</template>
<style lang="scss" scoped></style>

14
src/views/user/components/news.vue Normal file
View File

@@ -0,0 +1,14 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-10 10:11:16
* @LastEditors: 刘引
* @LastEditTime: 2022-03-10 10:56:27
-->
<template>
<div class="root">我是news组件</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped></style>

21
src/views/user/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2022-03-10 10:11:06
* @LastEditors: 刘引
* @LastEditTime: 2022-03-10 10:58:49
-->
<template>
<div class="root-home">
<news></news>
<h1>写一点demo玩一玩</h1>
</div>
</template>
<script setup lang="ts">
import news from "./components/news.vue"
</script>
<style lang="scss" scoped>
</style>