Skip to content

Commit 5f86dee

Browse files
linfengluolinfengluo
committed
update demo
1 parent 0794c6b commit 5f86dee

14 files changed

+309
-180
lines changed

‎.postcssrc.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ module.exports = {
44
"plugins": {
55
"postcss-import": {},
66
"postcss-url": {},
7-
// to edit target browsers: use "browserslist" field in package.json
87
"postcss-write-svg": {
9-
utf8: false
8+
utf8: true
109
},
1110
"postcss-cssnext": {},
1211
"postcss-px-to-viewport": {

‎README.md

+99-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,109 @@
11
# multi-vue-h5
22

3-
> A Vue.js project
3+
> 移动端vw多页面适配方案
44
5-
## Build Setup
5+
在看了大漠大大的[分享手淘过年项目中采用到的前端技术](https://www.w3cplus.com/css/taobao-2018-year.html)和[如何在Vue项目中使用vw实现移动端适配](https://www.w3cplus.com/mobile/vw-layout-in-vue.html)的讲解后，动手折腾了这个多页面的VW适配（支持vue-router）。
66

7+
[Demo](http://image.luolinfeng.com/vue-mutil-h5.png)：
8+
![demo](http://image.luolinfeng.com/vue-mutil-h5.png)
9+
10+
# 特点
11+
* 基于vue-cli
12+
* 多页面 or 单页面
13+
* VW布局
14+
* 支持DLLplugins
15+
16+
# 目录
717
``` bash
8-
# install dependencies
9-
npm install
18+
|--build # webpack
19+
|--config # 配置文件
20+
|--dist # 编译输入目录
21+
|--js
22+
|--css
23+
index.html # 根据pages中的目录名生成对应的html
24+
...morePage.html
25+
|--src # 开发目录
26+
|--assets
27+
|--components # 公用组件
28+
|--pages # 页面
29+
|--index # 默认首页（编译后的文件将根据该目录名生成）
30+
|--……morePage
31+
|--scss # sass目录
32+
|--units # 公用js
33+
|--libs
34+
|--static #静态文件
35+
.babelrc
36+
.eslintignore
37+
.postcssrc.js
38+
manifest.json
39+
package.json
40+
README.md
41+
```
1042

11-
# serve with hot reload at localhost:8080
12-
npm run dev
43+
# 使用vw
1344

14-
# build for production with minification
15-
npm run build
45+
```bash
46+
# 全局注册component
1647

17-
# build for production and view the bundle analyzer report
18-
npm run build --report
48+
import radioDiv from '../../components/radioDiv.vue'
49+
Vue.component('radioDiv', radioDiv)
1950
```
2051

21-
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
52+
``` bash
53+
# 在使用宽高比布局时，请务必使用radioDiv包裹
54+
<template>
55+
<radioDiv class="test">
56+
demo
57+
</radioDiv>
58+
</template>
59+
60+
61+
<style lang="scss" rel="stylesheet/scss">
62+
@import "../scss/vw";
63+
.test{
64+
#aspect-ratio(宽度px， 宽度比例， 高度比例)
65+
@include aspect-ratio(750 / 2, 1, 1)
66+
}
67+
</style>
68+
```
69+
70+
# DLL配置
71+
开启dll打包可以提高编译速度，同时可以更好的利用缓存
72+
```bash
73+
配置目录：./config/dll.conf.js
74+
75+
const path = require('path')
76+
const fileName = 'vendor_dll' #文件名
77+
const dllProdName = require(`../src/units/libs/${fileName}.json`) #记录文件hash
78+
module.exports = {
79+
isUsed: true, #是否开启DllPlugins
80+
fileName: fileName, #文件名
81+
devPath: path.resolve(__dirname, '../src/units/libs'), #保存目录
82+
filepath: path.resolve(__dirname, `../src/units/libs/${dllProdName[fileName].js}`), #文件路径
83+
outputPath: 'js', #输出目录
84+
publicPath: '/js/', #文件路径
85+
vendor: [ #打包的插件列表
86+
'vue',
87+
'vue-router'
88+
]
89+
}
90+
```
91+
92+
# 开发命令
93+
94+
``` bash
95+
npm install # 安装依赖
96+
npm run dev # 开发环境
97+
npm run build:dll # 打包dll
98+
npm run build # 生产环境(开启dll请务必先打包dll)
99+
```
100+
101+
# 注意
102+
* PC端会出现滚动，如需保证PC布局，请隐藏浏览器滚动条（```::-webkit-scrollbar{width:0}```）
103+
* 如需兼容iPhone X，请添加 ```<meta name="viewport" content="...,viewport-fit=cover">```
104+
105+
106+
# 参考
107+
* [如何在Vue项目中使用vw实现移动端适配](https://www.w3cplus.com/mobile/vw-layout-in-vue.html)
108+
* [webpack进阶——DllPlugin优化打包性能（基于vue-cli）](http://blog.csdn.net/u011649976/article/details/77076212)
109+
* [关于vue项目多页面的配置](https://www.jianshu.com/p/acbff04b4096)

‎src/components/HelloWorld.vue

+5-116
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,15 @@
11
<template>
2-
<div class="hello">
3-
<h1>{{ msg }}</h1>
4-
<h2>Essential Links</h2>
5-
<div style="display: flex;">
6-
<radioDiv class="test">
7-
<img src="../assets/logo.png" class="is-full-width">
8-
</radioDiv>
9-
<radioDiv class="test">
10-
<img src="../assets/logo.png" class="is-full-width">
11-
</radioDiv>
12-
</div>
13-
14-
<ul>
15-
<li>
16-
<a
17-
href="https://vuejs.org"
18-
target="_blank"
19-
>
20-
Core Docs
21-
</a>
22-
</li>
23-
<li>
24-
<a
25-
href="https://forum.vuejs.org"
26-
target="_blank"
27-
>
28-
Forum
29-
</a>
30-
</li>
31-
<li>
32-
<a
33-
href="https://chat.vuejs.org"
34-
target="_blank"
35-
>
36-
Community Chat
37-
</a>
38-
</li>
39-
<li>
40-
<a
41-
href="https://twitter.com/vuejs"
42-
target="_blank"
43-
>
44-
Twitter
45-
</a>
46-
</li>
47-
<br>
48-
<li>
49-
<a
50-
href="http://vuejs-templates.github.io/webpack/"
51-
target="_blank"
52-
>
53-
Docs for This Template
54-
</a>
55-
</li>
56-
</ul>
57-
<h2>Ecosystem</h2>
58-
<ul>
59-
<li>
60-
<a
61-
href="http://router.vuejs.org/"
62-
target="_blank"
63-
>
64-
vue-router
65-
</a>
66-
</li>
67-
<li>
68-
<a
69-
href="http://vuex.vuejs.org/"
70-
target="_blank"
71-
>
72-
vuex
73-
</a>
74-
</li>
75-
<li>
76-
<a
77-
href="http://vue-loader.vuejs.org/"
78-
target="_blank"
79-
>
80-
vue-loader
81-
</a>
82-
</li>
83-
<li>
84-
<a
85-
href="https://github.com/vuejs/awesome-vue"
86-
target="_blank"
87-
>
88-
awesome-vue
89-
</a>
90-
</li>
91-
</ul>
2+
<div>
3+
<radioDiv class="test">
4+
demo
5+
</radioDiv>
926
</div>
937
</template>
948

95-
<script>
96-
export default {
97-
name: 'HelloWorld',
98-
data () {
99-
return {
100-
msg: 'Welcome to Your Vue.js App'
101-
}
102-
}
103-
}
104-
</script>
105-
1069
<!-- Add "scoped" attribute to limit CSS to this component only -->
10710
<style lang="scss" rel="stylesheet/scss">
108-
@import "../scss/vw";
11+
@import "../scss/mixins/all";
10912
.test{
11013
@include aspect-ratio(750 / 2, 1, 1)
11114
}
112-
h1, h2 {
113-
font-weight: normal;
114-
}
115-
ul {
116-
list-style-type: none;
117-
padding: 0;
118-
}
119-
li {
120-
display: inline-block;
121-
margin: 0 10px;
122-
}
123-
a {
124-
color: #42b983;
125-
}
12615
</style>

‎src/pages/index/App.vue

+101-11
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,114 @@
11
<template>
22
<div id="app">
3-
<img src="../../assets/logo.png">
4-
<router-view/>
3+
<header>
4+
<radioDiv class="banner">
5+
<div class="placeholder placeholder--yellow"></div>
6+
</radioDiv>
7+
</header>
8+
<div class="goods">
9+
<radioDiv class="goods__item--11 ">
10+
<div class="placeholder placeholder--blue"></div>
11+
</radioDiv>
12+
<radioDiv class="goods__item--11 ">
13+
<div class="placeholder placeholder--green"></div>
14+
</radioDiv>
15+
<radioDiv class="goods__item--11 ">
16+
<div class="placeholder placeholder--purple"></div>
17+
</radioDiv>
18+
<radioDiv class="goods__item--11 ">
19+
<div class="placeholder placeholder--red"></div>
20+
</radioDiv>
21+
</div>
22+
<div class="goods">
23+
<radioDiv class="goods__item--21 ">
24+
<div class="placeholder placeholder--yellow"></div>
25+
</radioDiv>
26+
<radioDiv class="goods__item--22 ">
27+
<div class="placeholder placeholder--green"></div>
28+
</radioDiv>
29+
30+
</div>
31+
<div class="goods">
32+
<radioDiv class="goods__item--31 ">
33+
<div class="placeholder placeholder--purple"></div>
34+
</radioDiv>
35+
<radioDiv class="goods__item--31 ">
36+
<div class="placeholder placeholder--yellow"></div>
37+
</radioDiv>
38+
<radioDiv class="goods__item--31 ">
39+
<div class="placeholder placeholder--red"></div>
40+
</radioDiv>
41+
</div>
542
</div>
643
</template>
744

845
<script>
46+
import HelloWorld from '@/components/HelloWorld'
947
export default {
10-
name: 'App'
48+
name: 'App',
49+
components: {
50+
HelloWorld
51+
}
1152
}
1253
</script>
1354

1455
<style rel="stylesheet/scss" lang="scss">
1556
@import "../../scss/main";
16-
#app {
17-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
18-
-webkit-font-smoothing: antialiased;
19-
-moz-osx-font-smoothing: grayscale;
20-
text-align: center;
21-
color: #2c3e50;
22-
margin-top: 60px;
23-
}
57+
$space: 6px;
58+
.banner{
59+
@include aspect-ratio(750, 1280, 800)
60+
}
61+
62+
.goods{
63+
display: flex;
64+
flex-wrap: wrap;
65+
padding: $space;
66+
67+
&__item{
68+
&--11{
69+
margin: $space;
70+
@include aspect-ratio((750 - 36) / 2 , 1, 1)
71+
}
72+
73+
&--22{
74+
margin: $space;
75+
@include aspect-ratio((750 - 36) / 3 * 2, 2, 1)
76+
}
77+
78+
&--21{
79+
margin: $space;
80+
@include aspect-ratio((750 - 36) / 3 * 1, 1, 1)
81+
}
82+
&--31{
83+
margin: $space;
84+
@include aspect-ratio((750 - 48) / 3, 1, 1)
85+
}
86+
}
87+
}
88+
89+
.placeholder{
90+
width: 100%;
91+
height: 100%;
92+
93+
&--yellow{
94+
background-color: yellow;
95+
}
96+
97+
&--blue{
98+
background-color: blue;
99+
}
100+
101+
&--red{
102+
background-color: red;
103+
}
104+
105+
&--green{
106+
background-color: green;
107+
}
108+
109+
&--purple{
110+
background-color: purple;
111+
}
112+
}
113+
24114
</style>

‎src/pages/index/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
66
<title>multi-vue-h5</title>
77
</head>
88
<body>

0 commit comments

Comments
 (0)