alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[breaking change] rebuild style struct (#2021)

Browse Source
This commit is contained in:
neverland
2018-11-03 21:08:06 +08:00
committed by GitHub
parent a5576762d8
commit 11ce2a602f
165 changed files with 1371 additions and 4729 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/markdown/changelog.en-US.md
+3 -3
View File
@@ -339,7 +339,7 @@
- fix Progress text empty [\#1411](https://github.com/youzan/vant/pull/1411)
- fix Tab random insert order [\#1429](https://github.com/youzan/vant/pull/1429)
- fix error when use Vue.use in typescript [\#1410](https://github.com/youzan/vant/pull/1410)
- fix vant-css missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426)
- fix style missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426)
## [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11)
@@ -1332,7 +1332,7 @@
**Breaking changes**
* remove reset.css in vant-css [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
* remove reset.css in style [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
* reconstruct Swipe component, adjust some API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200)
* optimize Search component，adjust struct [\#198](https://github.com/youzan/vant/pull/198)
@@ -1388,7 +1388,7 @@
* fix Button active border color [\#150](https://github.com/youzan/vant/issues/150)
* fix Stepper input style [\#159](https://github.com/youzan/vant/pull/159)
* fix Waterfall disable props not work when display none [\#166](https://github.com/youzan/vant/pull/166)
* fix vant-css not compile calc property after build
* fix style not compile calc property after build
* fix npm run dev error in MacOS [\#152](https://github.com/youzan/vant/issues/152)
* fix document router not work in some browsers [\#158](https://github.com/youzan/vant/pull/158)
docs/markdown/changelog.zh-CN.md
+3 -3
View File
@@ -339,7 +339,7 @@
- 修复 Progress 文字为空时样式错误的问题 [\#1411](https://github.com/youzan/vant/pull/1411)
- 修复 Tab 同时进行插入和删除时顺序错误的问题 [\#1429](https://github.com/youzan/vant/pull/1429)
- 修复 Vue.use 方法 TypeScript 类型错误 [\#1410](https://github.com/youzan/vant/pull/1410)
- 修复 vant-css 依赖丢失 [\#1426](https://github.com/youzan/vant/pull/1426)
- 修复 style 依赖丢失 [\#1426](https://github.com/youzan/vant/pull/1426)
## [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11)
@@ -1325,7 +1325,7 @@
**Breaking changes**
* 移除 vant-css 中对 reset.css 的默认引用 [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
* 移除 style 中对 reset.css 的默认引用 [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196)
* 重写 Swipe 组件，调整部分 API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200)
* 优化 Search 组件，修改原有结构 [\#198](https://github.com/youzan/vant/pull/198)
@@ -1381,7 +1381,7 @@
* 修复 Button active 状态下边框样式问题 [\#150](https://github.com/youzan/vant/issues/150)
* 修复 Stepper 组件输入框样式错误 [\#159](https://github.com/youzan/vant/pull/159)
* 修复 Waterfall 未显示时 disable 属性无法生效的问题 [\#166](https://github.com/youzan/vant/pull/166)
* 修复 vant-css 构建过程中未编译 calc 属性的问题
* 修复 style 构建过程中未编译 calc 属性的问题
* 修复 MacOS 下 npm run dev 报错的问题 [\#152](https://github.com/youzan/vant/issues/152)
* 修复文档在部分低版本浏览器路由失效的问题 [\#158](https://github.com/youzan/vant/pull/158)
* 修复文档中遗漏 SwipeItem 组件引入方式的问题 [\#167](https://github.com/youzan/vant/pull/167)
docs/markdown/contribution.zh-CN.md
+4 -4
View File
@@ -34,7 +34,6 @@ npm run dev
### 目录结构
- 仓库的组件代码位于 packages 下，每个组件一个文件夹
- 组件样式代码位于 packages/vant-css/src 下，vant-css 也会在发布时单独发包
- docs 目录下是文档网站的代码，本地开发时可以在目录下运行 npm run dev 开启文档网站
项目目录大致如下：
@@ -59,10 +58,11 @@ packages
| ├─ test # 单元测试
| ├─ zh-CN.md # 中文文档
| ├─ en-US.md # 英文文档
| ├─ index.less # 组件样式
| └─ index.vue # 组件入口
└─ vant-css
├─ index.css # 样式入口
└─ button.css # 组件样式
|
├─ index.js # 所有组件入口
└─ index.less # 所有组件样式
```
### 组件文档
docs/markdown/quickstart.en-US.md
+3 -4
View File
@@ -41,7 +41,7 @@ yarn add vant
```html
<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css" />
<!-- import script -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -94,8 +94,7 @@ import { Button } from 'vant';
```js
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/button/style';
```
#### 3. Import all components
@@ -103,7 +102,7 @@ import 'vant/lib/vant-css/button.css';
```js
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
import 'vant/lib/index.css';
Vue.use(Vant);
```
docs/markdown/quickstart.zh-CN.md
+3 -4
View File
@@ -47,7 +47,7 @@ yarn add vant
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -104,8 +104,7 @@ import { Button, Cell } from 'vant';
```js
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/button/style';
```
#### 方式三. 导入所有组件
@@ -113,7 +112,7 @@ import 'vant/lib/vant-css/button.css';
```js
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
import 'vant/lib/index.css';
Vue.use(Vant);
```
docs/markdown/theme.en-US.md
+6 -6
View File
@@ -7,14 +7,14 @@ You can import the postcss source code in your own project, then use [postcss-th
```javascript
// import base style
import 'vant/packages/vant-css/src/base.css';
import 'vant/packages/style/base.css';
// import component style
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
import 'vant/packages/button/index.css';
import 'vant/packages/checkbox/index.css';
```
Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css).
Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/style/var.less).
```javascript
module.exports = {
@@ -45,10 +45,10 @@ Vant also support local build to custom themes.
```bash
# Clone the repository
git clone git@github.com:youzan/vant.git
cd packages/vant-css
cd packages/style
```
In the local vant-css repository, modify the variables in src/common/var.css, then execute the following build command to generate the style file.
In the local style repository, modify the variables in src/var.less, then execute the following build command to generate the style file.
```bash
npm run build
```
docs/markdown/theme.zh-CN.md
+7 -7
View File
@@ -7,14 +7,14 @@
```javascript
// 引入基础样式
import 'vant/packages/vant-css/src/base.css';
import 'vant/packages/style/base.css';
// 引入组件对应的样式
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
import 'vant/packages/style/button/index.css';
import 'vant/packages/style/checkbox/index.css';
```
接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/style/var.less)
```javascript
module.exports = {
@@ -37,15 +37,15 @@ module.exports = {
```
### 方案二. 本地构建
可以通过在本地构建 vant-css 的方式生成所需的主题
可以通过在本地构建 style 的方式生成所需的主题
```bash
# 克隆仓库
git clone git@github.com:youzan/vant.git
cd packages/vant-css
cd packages/style
```
在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
在本地 style 仓库中，修改 src/var.less 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
```bash
npm run build
```
docs/src/DocsApp.vue
+1 -1
View File
@@ -46,7 +46,7 @@ export default {
};
</script>
<style lang="postcss">
<style lang="less">
.van-doc-intro {
text-align: center;
font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
docs/src/WapApp.vue
+1 -1
View File
@@ -38,7 +38,7 @@ export default {
};
</script>
<style lang="postcss">
<style lang="less">
body {
color: #333;
line-height: 1;
docs/src/components/DemoList.vue
+5 -5
View File
@@ -56,8 +56,8 @@ export default {
};
</script>
<style lang="postcss">
@import '../../../packages/vant-css/src/common/var.css';
<style lang="less">
@import '../../../packages/style/var';
.side-nav {
width: 100%;
@@ -103,9 +103,9 @@ export default {
top: 15px;
right: 15px;
font-size: 11px;
border: 1px solid $blue;
border: 1px solid @blue;
border-radius: 3px;
color: $blue;
color: @blue;
cursor: pointer;
span {
@@ -116,7 +116,7 @@ export default {
&.active {
color: #fff;
background-color: $blue;
background-color: @blue;
}
}
}
docs/src/components/DemoPages.vue
+1 -1
View File
@@ -84,7 +84,7 @@ export default {
};
</script>
<style lang="postcss">
<style lang="less">
.van-doc-demo-pages {
&__gallery {
margin-top: 30px;
docs/src/components/MobileNav.vue
+1 -1
View File
@@ -28,7 +28,7 @@ export default {
};
</script>
<style lang="postcss">
<style lang="less">
.mobile-nav {
&__item {
margin-bottom: 20px;
docs/src/demo-entry.js
+1 -1
View File
@@ -42,6 +42,7 @@ export default {
'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'),
'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'),
'steps': () => wrapper(import('../../packages/steps/demo'), 'steps'),
'style': () => wrapper(import('../../packages/style/demo'), 'style'),
'submit-bar': () => wrapper(import('../../packages/submit-bar/demo'), 'submit-bar'),
'swipe': () => wrapper(import('../../packages/swipe/demo'), 'swipe'),
'swipe-cell': () => wrapper(import('../../packages/swipe-cell/demo'), 'swipe-cell'),
@@ -53,6 +54,5 @@ export default {
'toast': () => wrapper(import('../../packages/toast/demo'), 'toast'),
'tree-select': () => wrapper(import('../../packages/tree-select/demo'), 'tree-select'),
'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader'),
'vant-css': () => wrapper(import('../../packages/vant-css/demo'), 'vant-css'),
'waterfall': () => wrapper(import('../../packages/waterfall/demo'), 'waterfall')
};
docs/src/doc.config.js
+2 -2
View File
@@ -40,7 +40,7 @@ module.exports = {
title: '更新日志'
},
{
path: '/vant-css',
path: '/style',
title: '内置样式'
},
{
@@ -344,7 +344,7 @@ module.exports = {
title: 'Changelog'
},
{
path: '/vant-css',
path: '/style',
title: 'Built-in style'
},
{
docs/src/docs-entry.js
+2 -2
View File
@@ -92,6 +92,8 @@ export default {
'stepper.zh-CN': () => import('../../packages/stepper/zh-CN.md'),
'steps.en-US': () => import('../../packages/steps/en-US.md'),
'steps.zh-CN': () => import('../../packages/steps/zh-CN.md'),
'style.en-US': () => import('../../packages/style/en-US.md'),
'style.zh-CN': () => import('../../packages/style/zh-CN.md'),
'submit-bar.en-US': () => import('../../packages/submit-bar/en-US.md'),
'submit-bar.zh-CN': () => import('../../packages/submit-bar/zh-CN.md'),
'swipe.en-US': () => import('../../packages/swipe/en-US.md'),
@@ -114,8 +116,6 @@ export default {
'tree-select.zh-CN': () => import('../../packages/tree-select/zh-CN.md'),
'uploader.en-US': () => import('../../packages/uploader/en-US.md'),
'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md'),
'vant-css.en-US': () => import('../../packages/vant-css/en-US.md'),
'vant-css.zh-CN': () => import('../../packages/vant-css/zh-CN.md'),
'waterfall.en-US': () => import('../../packages/waterfall/en-US.md'),
'waterfall.zh-CN': () => import('../../packages/waterfall/zh-CN.md')
};
docs/src/mobile.js
+1 -1
View File
@@ -1,4 +1,4 @@
import '../../packages/vant-css/src/index.css';
import '../../packages/index.less';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './WapApp';