Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
842a3eb0
authored
2020-06-01 18:19:35 +0800
by
sunnie
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
提取layout,,统一代码风格,优化路由
1 parent
367c2519
Show whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
24 additions
and
53 deletions
src/api/user.js
src/assets/css/index.scss
src/layouts/AppLayout.vue
src/main.js
src/router/index.js
src/config/router.config.js → src/router/router.config.js
src/views/home/about.vue
src/views/home/index.vue
src/layouts/TabBarLayout.vue → src/views/layouts/index.vue
vue.config.js
src/api/user.js
View file @
842a3eb
import
api
from
'./index'
// axios
import
request
from
'@/utils/request'
...
...
src/assets/css/index.scss
View file @
842a3eb
...
...
@@ -2,13 +2,12 @@
@import
'./mixin.scss'
;
html
,
body
.app
{
body
.app
{
color
:
#333333
;
font-family
:
Arial
,
Helvetica
,
'STHeiti STXihei'
,
'Microsoft YaHei'
,
Tohoma
,
sans-serif
;
background-color
:
$background-color
;
}
.app-container
{
padding-bottom
:
50px
;
.app-container
{
padding-bottom
:
50px
;
}
...
...
src/layouts/AppLayout.vue
deleted
100644 → 0
View file @
367c251
<
template
>
<div
class=
"app-containter"
>
<keep-alive
v-if=
"$route.meta.keepAlive"
>
<router-view></router-view>
</keep-alive>
<router-view
v-else
></router-view>
</div>
</
template
>
<
script
>
export
default
{
name
:
'AppLayout'
}
</
script
>
src/main.js
View file @
842a3eb
...
...
@@ -8,15 +8,14 @@ import App from './App.vue'
import
router
from
'./router'
import
store
from
'./store'
// 引入全局样式
import
'@/assets/css/index.scss'
// 设置 js中可以访问 $cdn
import
{
$cdn
}
from
'@/config'
Vue
.
prototype
.
$cdn
=
$cdn
// 全局引入按需引入UI库 vant
import
'@/plugins/vant'
// 引入全局样式
import
'@/assets/css/index.scss'
// 移动端适配
import
'lib-flexible/flexible.js'
...
...
src/router/index.js
View file @
842a3eb
import
Vue
from
'vue'
import
Router
from
'vue-router'
import
{
constantRouterMap
}
from
'
@/config/router.config
'
import
{
constantRouterMap
}
from
'
./router.config.js
'
// hack router push callback
const
originalPush
=
Router
.
prototype
.
push
Router
.
prototype
.
push
=
function
push
(
location
,
onResolve
,
onReject
)
{
Router
.
prototype
.
push
=
function
push
(
location
,
onResolve
,
onReject
)
{
if
(
onResolve
||
onReject
)
return
originalPush
.
call
(
this
,
location
,
onResolve
,
onReject
)
return
originalPush
.
call
(
this
,
location
).
catch
(
err
=>
err
)
}
Vue
.
use
(
Router
)
const
createRouter
=
()
=>
new
Router
({
const
createRouter
=
()
=>
new
Router
({
mode
:
'history'
,
base
:
process
.
env
.
BASE_URL
,
scrollBehavior
:
()
=>
({
y
:
0
}),
routes
:
constantRouterMap
})
})
const
router
=
createRouter
()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export
function
resetRouter
()
{
export
function
resetRouter
()
{
const
newRouter
=
createRouter
()
router
.
matcher
=
newRouter
.
matcher
// reset router
}
...
...
src/
config
/router.config.js
→
src/
router
/router.config.js
View file @
842a3eb
...
...
@@ -5,17 +5,7 @@
export
const
constantRouterMap
=
[
{
path
:
'/'
,
name
:
'index'
,
component
:
()
=>
import
(
'@/layouts/AppLayout'
),
redirect
:
'/home'
,
meta
:
{
title
:
'首页'
,
keepAlive
:
false
},
children
:
[
{
path
:
'/'
,
component
:
()
=>
import
(
'@/layouts/TabBarLayout'
),
component
:
()
=>
import
(
'@/views/layouts/index'
),
redirect
:
'/home'
,
meta
:
{
title
:
'首页'
,
...
...
@@ -36,6 +26,4 @@ export const constantRouterMap = [
}
]
}
]
}
]
...
...
src/views/home/about.vue
View file @
842a3eb
<!-- home -->
<
template
>
<div
class=
"a
pp
-container"
>
<div
class=
"a
bout
-container"
>
<div
class=
"warpper"
>
<div
class=
"list"
>
<div
class=
"logo"
></div>
...
...
@@ -46,8 +46,8 @@ export default {
// 请求接口数据,仅作为展示,需要配置src->config下环境文件
const
params
=
{
user
:
'sunnie'
}
getUserInfo
(
params
)
.
then
(()
=>
{})
.
catch
(()
=>
{})
.
then
(()
=>
{
})
.
catch
(()
=>
{
})
},
// Action 通过 store.dispatch 方法触发
doDispatch
()
{
...
...
@@ -60,7 +60,7 @@ export default {
}
</
script
>
<
style
lang=
"scss"
scoped
>
.a
pp
-container
{
.a
bout
-container
{
background
:
#fff
;
height
:
100vh
;
box-sizing
:
border-box
;
...
...
src/views/home/index.vue
View file @
842a3eb
<!-- home -->
<
template
>
<div
class=
"
app
-container"
>
<div
class=
"
index
-container"
>
<div
class=
"warpper"
>
<h1
class=
"demo-home__title"
><img
src=
"https://imgs.solui.cn/weapp/logo.png"
/><span>
VUE H5开发模板
</span></h1>
<h2
class=
"demo-home__desc"
>
...
...
@@ -39,13 +39,13 @@ export default {
computed
:
{},
mounted
()
{},
mounted
()
{
},
methods
:
{}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.
app
-container
{
.
index
-container
{
.warpper
{
padding
:
12px
;
background
:
#fff
;
...
...
src/
layouts/TabBarLayout
.vue
→
src/
views/layouts/index
.vue
View file @
842a3eb
<
template
>
<div
class=
"
tabbar-layout-containt
er"
>
<div
class=
"
tabbar-
layout-content"
>
<div
class=
"
app-contain
er"
>
<div
class=
"layout-content"
>
<keep-alive
v-if=
"$route.meta.keepAlive"
>
<router-view></router-view>
</keep-alive>
<router-view
v-else
></router-view>
</div>
<div
class=
"
tabbar-
layout-footer"
>
<div
class=
"layout-footer"
>
<TabBar
:data=
"tabbars"
@
change=
"handleChange"
/>
</div>
</div>
...
...
@@ -15,7 +15,7 @@
<
script
>
import
TabBar
from
'@/components/TabBar'
export
default
{
name
:
'
TabBar
Layout'
,
name
:
'
App
Layout'
,
data
()
{
return
{
tabbars
:
[
...
...
vue.config.js
View file @
842a3eb
...
...
@@ -64,14 +64,13 @@ module.exports = {
// }
},
css
:
{
extract
:
IS_PROD
,
extract
:
IS_PROD
,
//是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
sourceMap
:
false
,
loaderOptions
:
{
scss
:
{
// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData
:
`
@import "assets/css/index.scss";
@import "assets/css/mixin.scss";
@import "assets/css/variables.scss";
$cdn: "
${
defaultSettings
.
$cdn
}
";
...
...
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment