提交 07b7ca9a 编写于 作者: Q qingwei.li

Init

上级
{
"presets": ["es2015-loose"],
"comments": false
}
{
"plugins": ["vue"],
"extends": ["elemefe"]
}
\ No newline at end of file
### Mint UI version
### Device model
<!-- e.g. iOS 9.3 Safari or Wechat webview -->
### Reproduction Link
<!-- A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug. -->
<!-- Mint UI CDN: https://npmcdn.com/mint-ui/lib/index.js -->
<!-- Mint UI CSS File CDN: https://npmcdn.com/mint-ui/lib/style.css -->
### What is Expected?
### What is actually happening?
\ No newline at end of file
*.log*
.cache
.DS_Store
.idea
packages/**/lib
lib/*
!lib/index.js
!lib/style.css
node_modules
\ No newline at end of file
# 2016.07.25 v0.1.23
- fixed lost style file
- fixed repeat packed font file
The MIT License (MIT)
Copyright (c) 2016 mint-ui
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
.PHONY: dist
default: help
install:
npm i --registry=https://registry.npm.taobao.org --ignore-scripts
./node_modules/.bin/lerna bootstrap
dev: install
npm run dev
dist:
npm run dist
dist-all:
node bin/build-all.js
deploy:
npm run deploy
pub:
./node_modules/.bin/kp $(filter-out $@,$(MAKECMDGOALS))
git push eleme master --tags
pub-all: dist-all
./node_modules/.bin/lerna publish
help:
@echo " \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
@echo " \033[35mmake install\033[0m\t\033[0m\t--- 安装依赖"
@echo " \033[35mmake dev\033[0m\t\033[0m\t--- 开发模式"
@echo " \033[35mmake dist\033[0m\t\033[0m\t--- 编译项目,生成目标文件"
@echo " \033[35mmake dist-all\033[0m\t--- 分别编译每个组件项目"
@echo " \033[35mmake deploy\033[0m\t\033[0m\t--- 部署 demo"
@echo " \033[35mmake pub\033[0m\t\033[0m\t--- 发布到 npm 上"
@echo " \033[35mmake pub-all\033[0m\t\033[0m\t--- 发布各组件到 npm 上"
# mint-ui
[![npm](https://img.shields.io/npm/v/mint-ui.svg?maxAge=3600)](https://www.npmjs.com/package/mint-ui)
![JS gzip size](https://badge-size.herokuapp.com/elemefe/mint-ui/master/lib/index.js.svg?compression=gzip&label=gzip%20size:%20JS)
![CSS gzip size](https://badge-size.herokuapp.com/elemefe/mint-ui/master/lib/style.css.svg?compression=gzip&label=gzip%20size:%20CSS)
> Mobile UI elements for vue.js
- [Homepage](http://mint-ui.github.io)
- [Documentation](http://mint-ui.github.io/docs)
## Installation
```shell
npm i mint-ui -S
```
## Usage
Import all components.
```javascript
import Vue from 'vue'
import Mint from 'mint-ui';
Vue.use(Mint);
```
Or import specified component. (Use [babel-plugin-component](https://www.npmjs.com/package/babel-plugin-component))
```javascript
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);
```
Equals to
```javascript
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);
// import specified component
import MtRadio from 'mint-ui/lib/radio';
import 'mint-ui/lib/radio/style.css';
Vue.component(MtRadio.name, MtRadio);
```
## babel-plugin-component
- Auto import css file
- Modular import component
Installation
```shell
npm i babel-plugin-component -D
```
Usage
.babelrc
```json
{
"plugins": ["other-plugin", ["component", [
{ "libraryName": "mint-ui", "style": true }
]]]
}
```
## CDN
RawGit
- https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/index.js
- https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/style.css
NPMCDN
- https://npmcdn.com/mint-ui/lib/index.js
- https://npmcdn.com/mint-ui/lib/style.css
## Development
```shell
npm i cooking -g
make dev
```
## License
MIT
'use strict';
const components = require('../components.json');
const execSync = require('child_process').execSync;
const existsSync = require('fs').existsSync;
const path = require('path');
let componentPaths = [];
delete components.font;
Object.keys(components).forEach(key => {
const filePath = path.join(__dirname, `../packages/${key}/cooking.conf.js`);
if (existsSync(filePath)) {
componentPaths.push(`packages/${key}/cooking.conf.js`)
}
});
const paths = componentPaths.join(',');
const cli = `cooking build -c ${paths} -p`;
execSync(cli, {
stdio: 'inherit',
});
var Components = require('../components.json')
var fs = require('fs')
var render = require('json-templater/string')
var uppercamelcase = require('uppercamelcase')
var path = require('path')
var OUTPUT_PATH = path.join(__dirname, '../src/index.js')
var IMPORT_TEMPLATE = `import {{name}} from '../packages/{{package}}/index.js';`
var ISNTALL_COMPONENT_TEMPLATE = ` Vue.component({{name}}.name, {{name}});`
var MAIN_TEMPLATE = `{{include}}
import '../src/assets/font/iconfont.css';
const install = function(Vue) {
if (install.installed) return;
{{install}}
Vue.use(InfiniteScroll);
Vue.use(Lazyload, {
loading: require('./assets/loading-spin.svg'),
try: 3
});
Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
Vue.$toast = Vue.prototype.$toast = Toast;
Vue.$indicator = Vue.prototype.$indicator = Indicator;
};
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
};
module.exports = {
install,
{{list}}
};
`
delete Components.font
var ComponentNames = Object.keys(Components)
var includeComponentTemplate = []
var installTemplate = []
var listTemplate = []
ComponentNames.forEach(name => {
var componentName = uppercamelcase(name)
includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
name: componentName,
package: name
}))
if ([
// directives
'InfiniteScroll',
'Lazyload',
// services
'MessageBox',
'Toast',
'Indicator'
].indexOf(componentName) === -1) {
installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
name: componentName,
component: name
}))
}
listTemplate.push(` ${componentName}`)
})
var template = render(MAIN_TEMPLATE, {
include: includeComponentTemplate.join('\n'),
install: installTemplate.join('\n'),
list: listTemplate.join(',\n')
})
fs.writeFileSync(OUTPUT_PATH, template)
console.log('[build entry] DONE:', OUTPUT_PATH)
{
"font": "./src/assets/font/iconfont.css",
"header": "./packages/header/index.js",
"button": "./packages/button/index.js",
"cell": "./packages/cell/index.js",
"field": "./packages/field/index.js",
"badge": "./packages/badge/index.js",
"switch": "./packages/switch/index.js",
"spinner": "./packages/spinner/index.js",
"tab-item": "./packages/tab-item/index.js",
"tab-container-item": "./packages/tab-container-item/index.js",
"tab-container": "./packages/tab-container/index.js",
"navbar": "./packages/navbar/index.js",
"tabbar": "./packages/tabbar/index.js",
"search": "./packages/search/index.js",
"checklist": "./packages/checklist/index.js",
"radio": "./packages/radio/index.js",
"loadmore": "./packages/loadmore/index.js",
"actionsheet": "./packages/actionsheet/index.js",
"popup": "./packages/popup/index.js",
"swipe": "./packages/swipe/index.js",
"swipe-item": "./packages/swipe-item/index.js",
"range": "./packages/range/index.js",
"picker": "./packages/picker/index.js",
"progress": "./packages/progress/index.js",
"toast": "./packages/toast/index.js",
"indicator": "./packages/indicator/index.js",
"message-box": "./packages/message-box/index.js",
"infinite-scroll": "./packages/infinite-scroll/index.js",
"lazyload": "./packages/lazyload/index.js",
"datetime-picker": "./packages/datetime-picker/index.js",
"index-list": "./packages/index-list/index.js",
"index-section": "./packages/index-section/index.js"
}
\ No newline at end of file
<template>
<div>
<router-link class="page-back" v-if="visible" :to="'/'">
<i class="mintui mintui-back"></i>
</router-link>
<router-view></router-view>
</div>
</template>
<style>
@reset-global mobile;
html, body {
background-color: #fafafa;
-webkit-overflow-scrolling: touch;
user-select: none;
}
a {
color: inherit;
}
.page-back {
display: inline-block;
position: absolute 12px * * 10px;
width: 40px;
height: 40px;
text-align: center;
i {
font-size: 24px;
line-height: 40px;
}
}
</style>
<script type="text/babel">
import 'src/assets/font/iconfont.css';
export default {
computed: {
visible() {
return ['/', '/header', '/search'].indexOf(this.$route.path) < 0;
}
}
};
</script>
<template>
<section class="page-demo">
<div v-for="group in navs">
<div class="page-title" v-text="group.title"></div>
<mt-cell
v-for="item in group.list"
:to="item.path"
is-link>
<div slot="title">
<i :class="['indexicon', 'icon-' + item.icon]"></i>
<span>{{ item.name }}</span>
</div>
</mt-cell>
</div>
</section>
</template>
<style>
.page-demo {
padding-bottom: 50px;
.indexicon {
font-size: 22px;
color: #26a2ff;
display: inline-block;
width: 30px;
vertical-align: middle;
&.icon-swipe {
font-size: 26px;
}
&.icon-checklist {
font-size: 18px;
}
}
}
@component-namespace page {
@component title {
font-size: 20px;
margin: 20px auto;
text-align: center;
display: block;
line-height: 1;
}
@component part {
margin-bottom: 15px;
}
}
</style>
<script type="text/babel">
import { navs } from './route';
export default {
data() {
return {
navs: []
};
},
created() {
this.navs = navs;
}
};
</script>
import Vue from 'vue';
import App from './app';
import routes from './route';
import Mint from 'src/index';
import VueRouter from 'vue-router';
document.addEventListener('DOMContentLoaded', function() {
if (window.FastClick) window.FastClick.attach(document.body);
}, false);
Vue.use(Mint);
Vue.use(VueRouter);
const router = new VueRouter({
base: __dirname,
routes
});
new Vue({ // eslint-disable-line
render: h => h(App),
router
}).$mount('#app');
let indexScrollTop = 0;
router.beforeEach((route, redirect, next) => {
if (route.path !== '/') {
indexScrollTop = document.body.scrollTop;
}
document.title = route.meta.title || document.title;
next();
});
router.afterEach(route => {
if (route.path !== '/') {
document.body.scrollTop = 0;
} else {
Vue.nextTick(() => {
document.body.scrollTop = indexScrollTop;
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Mint UI</title>
<!-- page -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1469597443_9221172.css">
<% if (process.env.NODE_ENV === 'production') { %>
<script src="//npmcdn.com/vue@1.0.24/dist/vue.js"></script>
<script src="//npmcdn.com/vue-router@0.7.13/dist/vue-router.js"></script>
<script src="//npmcdn.com/fastclick@1.0.6/lib/fastclick.js"></script>
<% } %>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
[
{
"title": "JS Components",
"list": [
{
"path": "/toast",
"name": "Toast",
"icon": "toast"
},
{
"path": "/indicator",
"name": "Indicator",
"icon": "indicator"
},
{
"path": "/pull-down",
"name": "Pull down",
"icon": "pull-down"
},
{
"path": "/pull-up",
"name": "Pull up",
"icon": "pull-up"
},
{
"path": "/infinite-scroll",
"name": "Infinite scroll",
"icon": "infinite-scroll"
},
{
"path": "/message-box",
"name": "Message box",
"icon": "message-box"
},
{
"path": "/action-sheet",
"name": "Action sheet",
"icon": "action-sheet"
},
{
"path": "/popup",
"name": "Popup",
"icon": "popup"
},
{
"path": "/swipe",