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
25
index.html
25
index.html
@ -1,18 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<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="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<title>Document</title>
|
||||||
<meta name="apple-touch-fullscreen" content="yes">
|
</head>
|
||||||
<meta name="full-screen" content="yes">
|
<body>
|
||||||
<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>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
</body>
|
||||||
</body>
|
</html>
|
||||||
</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
24
src/App.vue
24
src/App.vue
@ -1,26 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 删除试试 顶部 -->
|
Hello {{msg}}!
|
||||||
<HeaderCompontent></HeaderCompontent>
|
|
||||||
<!-- 渲染出口 -->
|
|
||||||
<router-view></router-view>
|
|
||||||
<!-- 删除试试 底部菜单 -->
|
|
||||||
<FootComponent></FootComponent>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import HeaderCompontent from './components/header.vue'
|
|
||||||
import FootComponent from './components/footer.vue'
|
|
||||||
export default{
|
export default{
|
||||||
components:{
|
data: () => ({
|
||||||
HeaderCompontent,
|
msg: 'Vue',
|
||||||
FootComponent
|
})
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</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 Vue from "vue";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import router from "./router";
|
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router: router, // 注册路由
|
// router: router, // 注册路由
|
||||||
render: (h) => h(App),
|
render: (h) => h(App),
|
||||||
}).$mount("#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