Skip to content
This repository was archived by the owner on Feb 21, 2022. It is now read-only.

Commit f998add

Browse files
cklwblovecklwblove
committed
feat(layout): 添加新的布局方案 vw
1 parent f79c1db commit f998add

File tree

12 files changed

+107
-44
lines changed

12 files changed

+107
-44
lines changed

‎docs/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ vue create --preset my-preset.json my-project
9494
## 项目特性
9595
- CSS 预编译语言：[less](http://lesscss.org/)
9696

97-
- 移动 web 的适配方案：引入了 `postcss-pxtorem` 及 `lib-flexible`，可以自由地用 px 去开发
97+
- 移动 web 的适配方案：引入了 `postcss-pxtorem` 及 `amfe-flexible`，可以自由地用 px 去开发
9898

9999
- 常用的 js 工具类： [cloud-utils](https://cklwblove.github.io/cloud-utils/)
100100

‎generator/index.js

+71-26
Original file line numberDiff line numberDiff line change
@@ -324,12 +324,6 @@ module.exports = (api, options, rootOptions) => {
324324
// application 应用类型为 mobile
325325
if (options.application === 'mobile' || options.application === 'offline') {
326326
api.extendPackage({
327-
dependencies: {
328-
'lib-flexible': '0.3.2'
329-
},
330-
devDependencies: {
331-
'postcss-pxtorem': '^4.0.1'
332-
},
333327
postcss: {
334328
plugins: {
335329
autoprefixer: {
@@ -340,30 +334,81 @@ module.exports = (api, options, rootOptions) => {
340334
'ff > 34',
341335
'ie >= 10'
342336
]
343-
},
344-
'postcss-pxtorem': {
345-
rootValue: 37.5,
346-
unitPrecision: 2,
347-
propList: [
348-
'height',
349-
'line-height',
350-
'width',
351-
'padding',
352-
'margin',
353-
'top',
354-
'left',
355-
'right',
356-
'bottom',
357-
'font-size'
358-
],
359-
selectorBlackList: [],
360-
replace: true,
361-
mediaQuery: false,
362-
minPixelValue: 1
363337
}
364338
}
365339
}
366340
});
341+
// 移动端适配方案
342+
if (options['layout-adapter'] === 'vw') {
343+
api.extendPackage({
344+
devDependencies: {
345+
'postcss-px-to-viewport': '^1.1.1'
346+
},
347+
postcss: {
348+
plugins: {
349+
'postcss-px-to-viewport': {
350+
unitToConvert: 'px', // 要转化的单位
351+
viewportWidth: 375, // UI设计稿的宽度
352+
unitPrecision: 6, // 转换后的精度，即小数点位数
353+
propList: [
354+
'height',
355+
'line-height',
356+
'width',
357+
'padding*',
358+
'margin*',
359+
'top',
360+
'left',
361+
'right',
362+
'bottom',
363+
'border*'
364+
], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
365+
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
366+
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
367+
selectorBlackList: ['wrap', '.ignore-', '.hairlines'], // 指定不转换为视窗单位的类名，
368+
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
369+
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
370+
replace: true, // 是否转换后直接更换属性值
371+
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
372+
landscape: false, // 是否处理横屏情况,是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
373+
landscapeUnit: 'vw', //横屏时使用的单位
374+
landscapeWidth: 1134 //横屏时使用的视口宽度
375+
}
376+
}
377+
}
378+
});
379+
} else {
380+
api.extendPackage({
381+
dependencies: {
382+
'amfe-flexible': '2.2.1'
383+
},
384+
devDependencies: {
385+
'postcss-pxtorem': '^4.0.1'
386+
},
387+
postcss: {
388+
plugins: {
389+
'postcss-pxtorem': {
390+
rootValue: 37.5,
391+
unitPrecision: 2,
392+
propList: [
393+
'height',
394+
'line-height',
395+
'width',
396+
'padding',
397+
'margin',
398+
'top',
399+
'left',
400+
'right',
401+
'bottom'
402+
],
403+
selectorBlackList: [],
404+
replace: true,
405+
mediaQuery: false,
406+
minPixelValue: 1
407+
}
408+
}
409+
}
410+
});
411+
}
367412
}
368413

369414
// application 应用类型为 H5离线包

‎generator/template-base/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
- SVG 雪碧图：采用 `webpack` 插件 `svg-sprite-loader`,及 `svg` 精简压缩工具 `svgo`
1212

13-
- 移动 web 的适配方案：引入了 `postcss-pxtorem` 及 `lib-flexible`，可以自由地用 px 去开发
13+
- 移动 web 的适配方案：目前提供了两种方案，`rem` 及 `vw`。分别引入了 `postcss-pxtorem` 及 `amfe-flexible` 和 `postcss-px-to-viewport`，可以自由地用 px 去开发
1414

1515
- 常用的 js 工具类： [cloud-utils](https://cklwblove.github.io/cloud-utils/)
1616

@@ -206,7 +206,7 @@ export default {
206206
"@winner-fed/magicless": "*",
207207
"axios": "0.19.2",
208208
"core-js": "^3.6.5",
209-
"lib-flexible": "0.3.2",
209+
"amfe-flexible": "0.3.2",
210210
"normalize.css": "8.0.1",
211211
"vue": "^2.6.11",
212212
"vue-router": "3.5.1",

‎generator/template-base/public/console.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ if (window.LOCAL_CONFIG.IS_OPEN_VCONSOLE) {
5757
return;
5858
}
5959
try {
60-
var vconsole = new VConsole();
61-
vconsole.setOption({ maxLogNumber: 5000 });
60+
var vConsole = new VConsole();
61+
vConsole.setOption({ maxLogNumber: 5000 });
6262
console.log('当前 url', window.location.href);
6363
} catch (err) {
6464
console.error('new VConsole() 出现异常');

‎generator/template-base/src/assets/style/main.less

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
width: 100%;
1717
height: 100%;
1818
overflow: hidden;
19+
font-size: @fontSizeH3;
1920
}
2021

2122
.page {

‎generator/template-vue2-ts-vite/src/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'core-js/stable';
22
import 'regenerator-runtime/runtime';
3-
<%_ if (options.application === 'mobile' || options.application === 'offline') { _%>
4-
import 'lib-flexible';
3+
<%_ if ((options.application === 'mobile' || options.application === 'offline') && options['layout-adapter'] !== 'vw') { _%>
4+
import 'amfe-flexible';
55
<%_ } _%>
66
import Vue from 'vue';
77
import Component from 'vue-class-component';

‎generator/template-vue2-ts/src/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'core-js/stable';
22
import 'regenerator-runtime/runtime';
3-
<%_ if (options.application === 'mobile' || options.application === 'offline') { _%>
4-
import 'lib-flexible';
3+
<%_ if ((options.application === 'mobile' || options.application === 'offline') && options['layout-adapter'] !== 'vw') { _%>
4+
import 'amfe-flexible';
55
<%_ } _%>
66
import Vue from 'vue';
77
import Component from 'vue-class-component';

‎generator/template-vue2-vite/src/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'core-js/stable';
22
import 'regenerator-runtime/runtime';
3-
<%_ if (options.application === 'mobile' || options.application === 'offline') { _%>
4-
import 'lib-flexible';
3+
<%_ if ((options.application === 'mobile' || options.application === 'offline') && options['layout-adapter'] !== 'vw') { _%>
4+
import 'amfe-flexible';
55
<%_ } _%>
66
import Vue from 'vue';
77
import App from './App.vue';

‎generator/template-vue2/src/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'core-js/stable';
22
import 'regenerator-runtime/runtime';
3-
<%_ if (options.application === 'mobile' || options.application === 'offline') { _%>
4-
import 'lib-flexible';
3+
<%_ if ((options.application === 'mobile' || options.application === 'offline') && options['layout-adapter'] !== 'vw') { _%>
4+
import 'amfe-flexible';
55
<%_ } _%>
66
import Vue from 'vue';
77
import App from './App.vue';

‎generator/template-vue3-ts/src/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'core-js/stable';
22
import 'regenerator-runtime/runtime';
3-
<%_ if (options.application === 'mobile' || options.application === 'offline') { _%>
4-
import 'lib-flexible';
3+
<%_ if ((options.application === 'mobile' || options.application === 'offline') && options['layout-adapter'] !== 'vw') { _%>
4+
import 'amfe-flexible';
55
<%_ } _%>
66
import { createApp } from 'vue';
77
import App from './App.vue';

‎generator/template-vue3/src/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'core-js/stable';
22
import 'regenerator-runtime/runtime';
3-
<%_ if (options.application === 'mobile' || options.application === 'offline') { _%>
4-
import 'lib-flexible';
3+
<%_ if ((options.application === 'mobile' || options.application === 'offline') && options['layout-adapter'] !== 'vw') { _%>
4+
import 'amfe-flexible';
55
<%_ } _%>
66
import { createApp } from 'vue';
77
import App from './App.vue';

‎prompts.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,23 @@ module.exports = [
133133
answers.preset !== 'mini' && answers.application === 'pc',
134134
default: 'none'
135135
},
136+
{
137+
name: 'layout-adapter',
138+
type: 'list',
139+
message: 'Choose a mobile layout adaptation plan(default:rem)',
140+
when: (answers) => answers.preset !== 'mini' && answers.application === 'mobile',
141+
choices: [
142+
{
143+
name: 'viewpoint',
144+
value: 'vw'
145+
},
146+
{
147+
name: 'rem',
148+
value: 'rem'
149+
}
150+
],
151+
default: 'rem'
152+
},
136153
{
137154
name: 'mobile-ui-framework',
138155
type: 'list',
@@ -155,7 +172,7 @@ module.exports = [
155172
{
156173
name: 'version-control',
157174
type: 'list',
158-
message: 'Choice the Version control tool(default:svn)?',
175+
message: 'Choose the Version control tool(default:svn)?',
159176
choices: [
160177
{
161178
name: 'SVN',

0 commit comments

Comments
 (0)