Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
c6bd6058 by 宋楠
Options

h5

1 parent 6c4a6a6f
Inline Side-by-side
Showing 7 changed files with 41 additions and 41 deletions
src/App.vue
1 <template> 1 <template>
2 <div id="app"> 2 <div class="app" id="app">
3 <keep-alive> 3 <keep-alive>
4 <router-view v-if="$route.meta.keepAlive"></router-view> 4 <router-view v-if="$route.meta.keepAlive"></router-view>
5 </keep-alive> 5 </keep-alive>
...@@ -15,8 +15,7 @@ export default { ...@@ -15,8 +15,7 @@ export default {
15 name: 'App', 15 name: 'App',
16 components: { 16 components: {
17 TabBar 17 TabBar
18 }, 18 }
19 } 19 }
20 </script> 20 </script>
21 <style lang="scss">
22 </style>
...\ No newline at end of file ...\ No newline at end of file
21 <style lang="scss"></style>
......
src/api/user.js
...@@ -8,7 +8,7 @@ export function login(params) { ...@@ -8,7 +8,7 @@ export function login(params) {
8 return request({ 8 return request({
9 url: '/user/login', 9 url: '/user/login',
10 method: 'post', 10 method: 'post',
11 data: qs.stringify(params), 11 data: qs.stringify(params)
12 // hideloading: true 12 // hideloading: true
13 }) 13 })
14 } 14 }
...@@ -17,6 +17,7 @@ export function getUserInfo(params) { ...@@ -17,6 +17,7 @@ export function getUserInfo(params) {
17 return request({ 17 return request({
18 url: '/user/userinfo', 18 url: '/user/userinfo',
19 method: 'get', 19 method: 'get',
20 data: qs.stringify(params) 20 data: qs.stringify(params),
21 hideloading: true
21 }) 22 })
22 } 23 }
......
src/assets/css/index.scss
1 @import './variables.scss'; 1 @import './variables.scss';
2 @import './mixin.scss'; 2 @import './mixin.scss';
3
4 html,
5 body
6 .app {
7 color: #333333;
8 font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
9 background-color: $background-color;
10 }
11
3 .app-container{ 12 .app-container{
4 padding-bottom:50px 13 padding-bottom:50px;
5 } 14 }
...\ No newline at end of file ...\ No newline at end of file
......
src/main.js
...@@ -5,7 +5,7 @@ import App from './App.vue' ...@@ -5,7 +5,7 @@ import App from './App.vue'
5 import router from './router' 5 import router from './router'
6 import store from './store' 6 import store from './store'
7 // 引入全局样式 7 // 引入全局样式
8 // import '@/assets/css/index.scss' 8 import '@/assets/css/index.scss'
9 9
10 // 全局引入按需引入UI库 vant 10 // 全局引入按需引入UI库 vant
11 import '@/plugins/vant' 11 import '@/plugins/vant'
......
src/views/home/about.vue
...@@ -7,10 +7,12 @@ ...@@ -7,10 +7,12 @@
7 A vue h5 template with Vant UI 7 A vue h5 template with Vant UI
8 </h2> 8 </h2>
9 <div class="list"> 9 <div class="list">
10 <div class="author"></div>
10 <div class="item">项目地址: <a href="https://github.com/sunniejs">https://github.com/sunniejs</a></div> 11 <div class="item">项目地址: <a href="https://github.com/sunniejs">https://github.com/sunniejs</a></div>
11 <div class="item">项目作者: sunnie</div> 12 <div class="item">项目作者: sunnie</div>
12 <div class="item"></div> 13 <div class="item"></div>
13 <div class="author"></div> 14 <div class="wechat"></div>
15 <div>关注公众号：回复“加群”即可加 前端仙女群</div>
14 </div> 16 </div>
15 </div> 17 </div>
16 </div> 18 </div>
...@@ -18,19 +20,16 @@ ...@@ -18,19 +20,16 @@
18 20
19 <script> 21 <script>
20 // 请求接口 22 // 请求接口
21 import { getUserInfo } from '@/api/user.js' 23 import {getUserInfo} from '@/api/user.js'
22 24
23 export default { 25 export default {
24 data() { 26 data() {
25 return { 27 return {}
26
27 }
28 }, 28 },
29 29
30 computed: {}, 30 computed: {},
31 31
32 mounted() { 32 mounted() {
33
34 this.initData() 33 this.initData()
35 }, 34 },
36 35
...@@ -38,19 +37,20 @@ export default { ...@@ -38,19 +37,20 @@ export default {
38 // 请求数据案例 37 // 请求数据案例
39 initData() { 38 initData() {
40 // 请求接口数据，仅作为展示，需要配置src->config下环境文件 39 // 请求接口数据，仅作为展示，需要配置src->config下环境文件
41 const params = { user: 'sunnie' } 40 const params = {user: 'sunnie'}
42 getUserInfo(params) 41 getUserInfo(params)
43 .then(() => { }) 42 .then(() => {})
44 .catch(() => { }) 43 .catch(() => {})
45 } 44 }
46 } 45 }
47 } 46 }
48 </script> 47 </script>
49 <style lang="scss" scoped> 48 <style lang="scss" scoped>
50 .app-container { 49 .app-container {
50 background: #fff;
51 height: 100%;
51 .warpper { 52 .warpper {
52 padding: 12px; 53 padding: 12px;
53 background: $background-color;
54 .demo-home__title { 54 .demo-home__title {
55 margin: 0 0 6px; 55 margin: 0 0 6px;
56 font-size: 32px; 56 font-size: 32px;
...@@ -75,6 +75,7 @@ export default { ...@@ -75,6 +75,7 @@ export default {
75 .list { 75 .list {
76 display: flex; 76 display: flex;
77 flex-direction: column; 77 flex-direction: column;
78 align-items: center;
78 color: #666; 79 color: #666;
79 font-size: 14px; 80 font-size: 14px;
80 .item { 81 .item {
...@@ -84,11 +85,15 @@ export default { ...@@ -84,11 +85,15 @@ export default {
84 } 85 }
85 86
86 .author { 87 .author {
87 margin:10px auto;
88 width: 200px; 88 width: 200px;
89 height: 200px; 89 height: 200px;
90 background: url($cdn+'/weapp/me.png') center / contain no-repeat; 90 background: url($cdn+'/weapp/me.png') center / contain no-repeat;
91 } 91 }
92 .wechat {
93 width: 200px;
94 height: 200px;
95 background: url($cdn+'/wx/640.gif') center / contain no-repeat;
96 }
92 } 97 }
93 } 98 }
94 </style> 99 </style>
......
src/views/home/index.vue
...@@ -12,19 +12,14 @@ ...@@ -12,19 +12,14 @@
12 </template> 12 </template>
13 13
14 <script> 14 <script>
15 import TabBar from '@/components/TabBar'
16 // 请求接口
17 import { getUserInfo } from '@/api/user.js'
18
19 export default { 15 export default {
20
21 data() { 16 data() {
22 return { 17 return {
23 list: [ 18 list: [
24 'Vue-cli4', 19 'Vue-cli4',
25 ' 配置多环境变量', 20 '配置多环境变量',
26 ' VantUI 组件按需加载', 21 'VantUI 组件按需加载',
27 ' Sass', 22 'Sass',
28 'Webpack 4', 23 'Webpack 4',
29 'Vuex', 24 'Vuex',
30 ' Axios 封装及接口管理', 25 ' Axios 封装及接口管理',
...@@ -43,27 +38,16 @@ export default { ...@@ -43,27 +38,16 @@ export default {
43 38
44 computed: {}, 39 computed: {},
45 40
46 mounted() { 41 mounted() {},
47 this.initData()
48 },
49 42
50 methods: { 43 methods: {}
51 // 请求数据案例
52 initData() {
53 // 请求接口数据，仅作为展示，需要配置src->config下环境文件
54 const params = { user: 'sunnie' }
55 getUserInfo(params)
56 .then(() => { })
57 .catch(() => { })
58 }
59 }
60 } 44 }
61 </script> 45 </script>
62 <style lang="scss" scoped> 46 <style lang="scss" scoped>
63 .app-container { 47 .app-container {
64 .warpper { 48 .warpper {
65 padding: 12px; 49 padding: 12px;
66 background: $background-color; 50 background: #fff;
67 .demo-home__title { 51 .demo-home__title {
68 margin: 0 0 6px; 52 margin: 0 0 6px;
69 font-size: 32px; 53 font-size: 32px;
......
vue.config.js
...@@ -72,6 +72,8 @@ module.exports = { ...@@ -72,6 +72,8 @@ module.exports = {
72 // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders 72 // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
73 prependData: ` 73 prependData: `
74 @import "assets/css/index.scss"; 74 @import "assets/css/index.scss";
75 @import "assets/css/mixin.scss";
76 @import "assets/css/variables.scss";
75 $cdn: "${defaultSettings.$cdn}"; 77 $cdn: "${defaultSettings.$cdn}";
76 ` 78 `
77 } 79 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!