mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
初始化组件脚本update
This commit is contained in:
niunai
parent
900b5d7063
commit
61415a16b6
20
.editorconfig
Normal file
20
.editorconfig
Normal file
@ -0,0 +1,20 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.js]
|
||||
indent_size = 2
|
||||
|
||||
[*.vue]
|
||||
indent_size = 2
|
||||
|
||||
[*.scss]
|
||||
indent_size = 4
|
||||
3
.eslintignore
Normal file
3
.eslintignore
Normal file
@ -0,0 +1,3 @@
|
||||
lib/
|
||||
dist/
|
||||
node_modules/
|
||||
25
.eslintrc
Normal file
25
.eslintrc
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"extends": "airbnb",
|
||||
"parser": "babel-eslint",
|
||||
"rules": {
|
||||
"semi": 0,
|
||||
"max-len": 0,
|
||||
"react/prefer-stateless-function": 0,
|
||||
"comma-dangle": 0,
|
||||
"func-names": 0,
|
||||
"prefer-const": 0,
|
||||
"arrow-body-style": 0,
|
||||
"react/sort-comp": 0,
|
||||
"react/no-multi-comp": 0,
|
||||
"react/prop-types": 0,
|
||||
"react/prefer-es6-class": 0,
|
||||
"react/jsx-closing-bracket-location": 0,
|
||||
"react/jsx-no-bind": 0,
|
||||
"no-param-reassign": 0,
|
||||
"no-return-assign": 0,
|
||||
"consistent-return": 0,
|
||||
"no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
|
||||
"no-use-before-define": ["error", { "functions": false }],
|
||||
"no-underscore-dangle": 0
|
||||
}
|
||||
}
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -2,6 +2,7 @@
|
||||
.cache
|
||||
.DS_Store
|
||||
.idea
|
||||
.vscode
|
||||
packages/**/lib
|
||||
lib/*
|
||||
!lib/index.js
|
||||
|
||||
13
Makefile
Normal file
13
Makefile
Normal file
@ -0,0 +1,13 @@
|
||||
usage = "\
|
||||
Usage: make <option> \n\n\
|
||||
init componentname 初始化一个新组件，请忽视makefile的报错 \n\n\
|
||||
\n"
|
||||
|
||||
|
||||
default:
|
||||
@echo $(usage)
|
||||
|
||||
init:
|
||||
node build/bin/init.js $(filter-out $@,$(MAKECMDGOALS))
|
||||
|
||||
|
||||
@ -8,21 +8,12 @@ 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
|
||||
|
||||
48
build/bin/init.js
Normal file
48
build/bin/init.js
Normal file
@ -0,0 +1,48 @@
|
||||
#!/usr/bin/env node
|
||||
const ch = require('child_process');
|
||||
const gulp = require('gulp');
|
||||
const runSequence = require('run-sequence');
|
||||
const gutil = require('gulp-util');
|
||||
const fileSave = require('file-save');
|
||||
const path = require('path');
|
||||
const exec = ch.exec;
|
||||
|
||||
if (!process.argv[2]) {
|
||||
console.error('[组件名]必填.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const name = process.argv[2];
|
||||
|
||||
|
||||
// 项目规范文件拷贝
|
||||
gulp.task('copy', function(callback) {
|
||||
gutil.log(gutil.colors.yellow('-------> 开始初始化'));
|
||||
|
||||
exec('cd packages && git clone git@gitlab.qima-inc.com:fe/vue-seed.git ' + name, function(err, stdout, stderr) {
|
||||
gutil.log('-------> 拉取 vue-seed');
|
||||
exec('rm -rf ./' + name + '/.git', function(err, stdout, stderr) {
|
||||
gutil.log('-------> ' + name + '组件初始化成功');
|
||||
callback();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 添加到 components.json
|
||||
gulp.task('addComponents', function(callback) {
|
||||
const componentsFile = require('../../components.json');
|
||||
if (componentsFile[name]) {
|
||||
console.error(`${name} 已存在.`);
|
||||
process.exit(1);
|
||||
}
|
||||
componentsFile[name] = `./packages/${name}/index.js`;
|
||||
fileSave(path.join(__dirname, '../../components.json'))
|
||||
.write(JSON.stringify(componentsFile, null, ' '), 'utf8')
|
||||
.end('\n');
|
||||
gutil.log('-------> components.json文件更新成功');
|
||||
gutil.log(gutil.colors.yellow('-------> 请无视下面的make报错'));
|
||||
});
|
||||
|
||||
runSequence('copy', 'addComponents');
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"cell": "./packages/cell/index.js"
|
||||
"sample": "./packages/sample/index.js",
|
||||
"pangxie": "./packages/pangxie/index.js",
|
||||
"pangxie1": "./packages/pangxie1/index.js",
|
||||
"pangxie2": "./packages/pangxie2/index.js"
|
||||
}
|
||||
|
||||
54
package.json
54
package.json
@ -10,13 +10,9 @@
|
||||
"packages"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "npm run bootstrap && npm run build:entry",
|
||||
"bootstrap": "npm i",
|
||||
"dist": "npm run clean && npm run build:entry",
|
||||
"deploy": "npm run build:entry",
|
||||
"build:entry": "node build/bin/build-entry",
|
||||
"pub": "sh build/release.sh",
|
||||
"pub:all": "node build/bin/build-all.js && lerna publish",
|
||||
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"dev": "npm run bootstrap && npm run build:file",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib"
|
||||
},
|
||||
"repository": {
|
||||
@ -35,28 +31,56 @@
|
||||
"wind-dom": "0.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^0.25.0",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.14.0",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-module-resolver": "^2.2.0",
|
||||
"babel-plugin-syntax-jsx": "^6.8.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"run-sequence": "^1.2.2",
|
||||
"cp-cli": "^1.0.2",
|
||||
"cross-env": "^3.1.3",
|
||||
"css-loader": "^0.24.0",
|
||||
"es6-promise": "^4.0.5",
|
||||
"eslint": "^3.10.2",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"fastclick": "^1.0.6",
|
||||
"file-loader": "^0.9.0",
|
||||
"file-save": "^0.2.0",
|
||||
"gh-pages": "^0.11.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-cssmin": "^0.1.7",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"highlight.js": "^9.3.0",
|
||||
"html-loader": "^0.4.3",
|
||||
"html-webpack-plugin": "^2.22.0",
|
||||
"inject-loader": "^3.0.0-beta2",
|
||||
"isparta-loader": "^2.0.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"json-templater": "^1.0.4",
|
||||
"lerna": "2.0.0-beta.31",
|
||||
"my-local-ip": "^1.0.0",
|
||||
"postcss": "^5.2.0",
|
||||
"postcss-loader": "^0.13.0",
|
||||
"lolex": "^1.5.1",
|
||||
"markdown-it": "^6.1.1",
|
||||
"markdown-it-anchor": "^2.5.0",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"postcss": "^5.1.2",
|
||||
"postcss-loader": "^0.11.1",
|
||||
"postcss-salad": "^1.0.5",
|
||||
"rimraf": "^2.5.4",
|
||||
"style-loader": "^0.13.1",
|
||||
"theaterjs": "^3.0.0",
|
||||
"transliteration": "^1.1.11",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "^2.1.7",
|
||||
"vue-loader": "^9.5.3",
|
||||
"vue": "^2.1.8",
|
||||
"vue-loader": "^10.0.2",
|
||||
"vue-markdown-loader": "^0.5.1",
|
||||
"vue-router": "^2.0.0",
|
||||
"vue-template-compiler": "^2.1.8",
|
||||
"vue-template-es2015-compiler": "^1.4.2",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-server": "^1.15.1",
|
||||
"webpack-shell-plugin": "^0.4.3"
|
||||
"webpack-node-externals": "^1.5.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
var config = require('../../build/config');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, 'index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'OxygenCell',
|
||||
extractCSS: 'style.css',
|
||||
extends: config.extends,
|
||||
alias: config.alias,
|
||||
externals: config.externals
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
@ -1,2 +0,0 @@
|
||||
import Cell from './src/cell.vue';
|
||||
module.exports = Cell;
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "oxygen-cell",
|
||||
"description": "",
|
||||
"version": "0.1.5",
|
||||
"main": "lib/index.js",
|
||||
"author": "elemefe",
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,204 +0,0 @@
|
||||
<template>
|
||||
<a class="oxygen-cell" :href="href">
|
||||
<span class="oxygen-cell-mask" v-if="isLink"></span>
|
||||
<div class="oxygen-cell-left">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
<div class="oxygen-cell-wrapper">
|
||||
<div class="oxygen-cell-title">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="oxygenui" :class="'oxygenui-' + icon"></i>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="oxygen-cell-text" v-text="title"></span>
|
||||
<span v-if="label" class="oxygen-cell-label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="oxygen-cell-value" :class="{ 'is-link' : isLink }">
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oxygen-cell-right">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
<i v-if="isLink" class="oxygen-cell-allow-right"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
if (process.env.NODE_ENV === 'component') {
|
||||
require('oxygen/packages/font/style.css');
|
||||
}
|
||||
|
||||
/**
|
||||
* o2-cell
|
||||
* @module components/cell
|
||||
* @desc 单元格
|
||||
* @param {string|Object} [to] - 跳转链接，使用 vue-router 的情况下 to 会传递给 router.push，否则作为 a 标签的 href 属性处理
|
||||
* @param {string} [icon] - 图标，提供 more, back，或者自定义的图标（传入不带前缀的图标类名，最后拼接成 .oxygenui-xxx）
|
||||
* @param {string} [title] - 标题
|
||||
* @param {string} [label] - 备注信息
|
||||
* @param {boolean} [is-link=false] - 可点击的链接
|
||||
* @param {string} [value] - 右侧显示文字
|
||||
* @param {slot} - 同 value, 会覆盖 value 属性
|
||||
* @param {slot} [title] - 同 title, 会覆盖 title 属性
|
||||
* @param {slot} [icon] - 同 icon, 会覆盖 icon 属性，例如可以传入图片
|
||||
*
|
||||
* @example
|
||||
* <o2-cell title="标题文字" icon="back" is-link value="描述文字"></o2-cell>
|
||||
* <o2-cell title="标题文字" icon="back">
|
||||
* <div slot="value">描述文字啊哈</div>
|
||||
* </o2-cell>
|
||||
*/
|
||||
export default {
|
||||
name: 'o2-cell',
|
||||
|
||||
props: {
|
||||
to: [String, Object],
|
||||
icon: String,
|
||||
title: String,
|
||||
label: String,
|
||||
isLink: Boolean,
|
||||
value: {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
href() {
|
||||
if (this.to && !this.added && this.$router) {
|
||||
const resolved = this.$router.match(this.to);
|
||||
if (!resolved.matched.length) return this.to;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.added = true;
|
||||
this.$el.addEventListener('click', this.handleClick);
|
||||
});
|
||||
return resolved.path;
|
||||
}
|
||||
return this.to;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick($event) {
|
||||
$event.preventDefault();
|
||||
this.$router.push(this.href);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
@import "../../../src/style/var.css";
|
||||
|
||||
@component-namespace oxygen {
|
||||
@component cell {
|
||||
background-color: $color-white;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
min-height: 48px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
&:first-child {
|
||||
.oxygen-cell-wrapper {
|
||||
background-origin: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background-image: linear-gradient(0deg, $color-grey, $color-grey 50%, transparent 50%);
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
@descendent wrapper {
|
||||
background-image:linear-gradient(180deg, $color-grey, $color-grey 50%, transparent 50%);
|
||||
background-size: 120% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top left;
|
||||
background-origin: content-box;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
min-height: inherit;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@descendent mask {
|
||||
&::after {
|
||||
background-color: #000;
|
||||
content: " ";
|
||||
opacity: 0;
|
||||
position: absolute 0;
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
opacity: .1;
|
||||
}
|
||||
}
|
||||
|
||||
@descendent text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@descendent label {
|
||||
color: #888;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@descendent title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@descendent value {
|
||||
color: $cell-value-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@when link {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@descendent left {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
@descendent right {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
@descendent allow-right::after {
|
||||
border: solid 2px $border-color;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0;
|
||||
content: " ";
|
||||
position: absolute 50% 20px * *;
|
||||
size: 5px;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
packages/sample
Submodule
1
packages/sample
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit 9bd455ccd018f524071148107df4859077a6afb7
|
||||
40
src/index.js
40
src/index.js
@ -1,33 +1,10 @@
|
||||
import Button from '../packages/button/index.js';
|
||||
import Cell from '../packages/cell/index.js';
|
||||
import Field from '../packages/field/index.js';
|
||||
import Popup from '../packages/popup/index.js';
|
||||
import Picker from '../packages/picker/index.js';
|
||||
import Toast from '../packages/toast/index.js';
|
||||
import Indicator from '../packages/indicator/index.js';
|
||||
import MessageBox from '../packages/message-box/index.js';
|
||||
import Lazyload from '../packages/lazyload/index.js';
|
||||
import Spinner from '../packages/spinner/index.js';
|
||||
import '../src/assets/font/iconfont.css';
|
||||
import Sample from '../packages/sample/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Cell.name, Cell);
|
||||
Vue.component(Field.name, Field);
|
||||
Vue.component(Popup.name, Popup);
|
||||
Vue.component(Picker.name, Picker);
|
||||
Vue.component(Spinner.name, Spinner);
|
||||
Vue.use(InfiniteScroll);
|
||||
Vue.use(Lazyload, {
|
||||
loading: require('./assets/loading-spin.svg'),
|
||||
try: 3
|
||||
});
|
||||
Vue.component(Sample.name, Sample);
|
||||
|
||||
Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
|
||||
Vue.$toast = Vue.prototype.$toast = Toast;
|
||||
Vue.$indicator = Vue.prototype.$indicator = Indicator;
|
||||
};
|
||||
|
||||
// auto install
|
||||
@ -37,15 +14,6 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
|
||||
module.exports = {
|
||||
install,
|
||||
version: '1.0.0',
|
||||
Button,
|
||||
Cell,
|
||||
Field,
|
||||
Popup,
|
||||
Picker,
|
||||
Toast,
|
||||
Indicator,
|
||||
MessageBox,
|
||||
Lazyload,
|
||||
Spinner
|
||||
version: '0.0.1',
|
||||
Sample
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user