mirror of
https://github.com/xxxsf/vue3-h5-template.git
synced 2025-04-05 20:35:49 +08:00
Feat pure vue
This commit is contained in:
shunfa.xu
parent
bf9ff6cacd
commit
c49bc78cdc
15
index.html
15
index.html
@ -1,18 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-touch-fullscreen" content="yes">
|
||||
<meta name="full-screen" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="format-detection" content="address=no">
|
||||
<title>vue2spa</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
8677
package-lock.json
generated
Normal file
8677
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
src/App.vue
22
src/App.vue
@ -1,26 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 删除试试 顶部 -->
|
||||
<HeaderCompontent></HeaderCompontent>
|
||||
<!-- 渲染出口 -->
|
||||
<router-view></router-view>
|
||||
<!-- 删除试试 底部菜单 -->
|
||||
<FootComponent></FootComponent>
|
||||
Hello {{msg}}!
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HeaderCompontent from './components/header.vue'
|
||||
import FootComponent from './components/footer.vue'
|
||||
export default{
|
||||
components:{
|
||||
HeaderCompontent,
|
||||
FootComponent
|
||||
}
|
||||
data: () => ({
|
||||
msg: 'Vue',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body, ul, h4{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<footer class="fixed-bottom clearfix">
|
||||
<div class="col4">
|
||||
<router-link to="/index">index</router-link>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<router-link to="/second">menu3</router-link>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<router-link to="/third">menu4</router-link>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
msg: 'Hello vue'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
border-top: 1px solid #ccc;
|
||||
display: grid;
|
||||
text-align: center;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
}
|
||||
.fixed-bottom a {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #7a7a7a;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<img src="https://png2.cleanpng.com/sh/9f5efd7936dbbc0513a929a7809ebd10/L0KzQYm3V8E5N5pnR91yc4Pzfri0lwVmNZt4RdxqdnH2c8PwkQQudJpnitN7eT3kfrj8jPFzcqQyitdqY4SwhsbsTfp0NWZnTNdrZUHmQIq4Wck0NmkATaI7OEK8QYa6Ucg5P2I4SqI8N0OxgLBu/kisspng-vue-js-javascript-library-angularjs-react-vue-js-5b4ebe1c091993.8950282915318871320373.png" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.header{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header img{
|
||||
width: 50%;
|
||||
margin: 30px auto 30px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="second-wrap">
|
||||
<h4>这是子组件</h4>
|
||||
<p>这是<span>来自父组件</span>的数据：{{myMessage}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'child',
|
||||
props: [
|
||||
'myMessage',
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.second-wrap{
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
h4,p{
|
||||
color: #41b883;;
|
||||
font-size: 20px;
|
||||
}
|
||||
p{
|
||||
font-size: 12px;
|
||||
}
|
||||
span{
|
||||
color: #35495e;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="thirdComponent">
|
||||
<button v-on:click="increment">{{ counter }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'button-counter',
|
||||
data: () => ({
|
||||
counter: 0,
|
||||
}),
|
||||
methods: {
|
||||
increment: function () {
|
||||
this.counter += 1
|
||||
this.$emit('increment')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.thirdComponent{
|
||||
display: inline-block;
|
||||
}
|
||||
button{
|
||||
color: #41b883;
|
||||
border-color: #41b883;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,8 @@
|
||||
// 项目启动
|
||||
import Vue from "vue";
|
||||
import App from "./App";
|
||||
import router from "./router";
|
||||
|
||||
new Vue({
|
||||
router: router, // 注册路由
|
||||
// router: router, // 注册路由
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app"); // 渲染挂载
|
||||
|
||||
7
src/log.js
Normal file
7
src/log.js
Normal file
@ -0,0 +1,7 @@
|
||||
// export default () => {
|
||||
// console.log(1);
|
||||
// }
|
||||
|
||||
export const data = () => {
|
||||
console.log(1)
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
// mock data
|
||||
export const data = {
|
||||
success: true,
|
||||
data: [{
|
||||
name: "React",
|
||||
id: 1,
|
||||
},{
|
||||
name: "Vue",
|
||||
id: 2,
|
||||
},{
|
||||
name: "Angular",
|
||||
id: 3,
|
||||
},{
|
||||
name: "Flutter",
|
||||
id: 4,
|
||||
}]
|
||||
};
|
||||
@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button v-on:click="loadMore">click me</button>
|
||||
<ul>
|
||||
<li v-for="(item, index) in listArr" :key="index">
|
||||
<a href="">{{ index }} 《{{ item.name }}》</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
let mock = require('../mock'); // 模拟请求
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
listArr: [],
|
||||
page: 1,
|
||||
}),
|
||||
created() {
|
||||
this.loadList();
|
||||
},
|
||||
methods: {
|
||||
loadList(page) {
|
||||
const {data, success} = mock.data;
|
||||
if (this.page > 1) {
|
||||
console.log("page is:", this.page);
|
||||
return this.listArr = this.listArr.concat(data);
|
||||
}
|
||||
this.listArr = data;
|
||||
},
|
||||
loadMore() {
|
||||
this.loadList(this.page++);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 30px;
|
||||
border: 1px solid #ddd;
|
||||
color: #41b883;
|
||||
}
|
||||
a {
|
||||
color: #35495e;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 60px;
|
||||
padding: 20px;
|
||||
}
|
||||
li {
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
b {
|
||||
font-size: 12px;
|
||||
color: #35495e;
|
||||
}
|
||||
.loading {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
|
||||
<!-- 父组件内容 -->
|
||||
<h4>这是父组件</h4>
|
||||
<p>这是父组件正在渲染的数据：{{parentMsg}}</p>
|
||||
<input type="" v-model="parentMsg" autofocus="autofocus" placeholder="type something" />
|
||||
|
||||
<!-- 子组件内容 -->
|
||||
<child :my-message="parentMsg"></child>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Child from '../components/secondcomponent.vue'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
parentMsg: '',
|
||||
}),
|
||||
components: { // 挂载组件
|
||||
Child
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h4,p{
|
||||
color: #35495e;
|
||||
font-size: 20px;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
}
|
||||
input{
|
||||
margin: 4px;
|
||||
outline: none;
|
||||
border: 1px solid #ddd;
|
||||
line-height: 24px;
|
||||
min-width: 300px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
|
||||
<!-- 这是父组件内容 -->
|
||||
<h4>子组件数据传递给父组件</h4>
|
||||
<p>方式：用自定义事件</p>
|
||||
<p class="parent-title">这是父组件</p>
|
||||
|
||||
<!-- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 -->
|
||||
<h2 class="text-center">{{ total }}</h2>
|
||||
|
||||
|
||||
<!-- 这是子组件内容 -->
|
||||
<div class="text-center">
|
||||
<p>这是子组件</p>
|
||||
<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
|
||||
<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonCounter from '../components/thirdcomponent.vue'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
parentMsg: '子组件传递信息给父元素',
|
||||
total: 0,
|
||||
}),
|
||||
methods: {
|
||||
incrementTotal: function () {
|
||||
this.total += 1
|
||||
}
|
||||
},
|
||||
components: {
|
||||
buttonCounter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent-title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
h4{
|
||||
font-size: 20px;
|
||||
}
|
||||
h2{
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
.text-center p {
|
||||
color: #41b883;
|
||||
}
|
||||
</style>
|
||||
@ -1,29 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
/* 开启debug模式 */
|
||||
Vue.config.debug = true
|
||||
Vue.use(VueRouter);
|
||||
|
||||
import Index from '../pages/index'
|
||||
import SecondComponent from '../pages/otherPages'
|
||||
import ThirdComponent from '../pages/otherPages2'
|
||||
|
||||
export default new VueRouter({
|
||||
mode: 'hash', // 还有 history 等
|
||||
base: __dirname,
|
||||
routes: [
|
||||
{
|
||||
path: '/index',
|
||||
component: Index,
|
||||
},
|
||||
{
|
||||
path: '/second',
|
||||
component: SecondComponent,
|
||||
},
|
||||
{
|
||||
path: '/third',
|
||||
component: ThirdComponent,
|
||||
}
|
||||
]
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user