mirror of
https://github.com/youzan/vant.git
synced 2025-10-17 16:44:21 +00:00
chore(cli): extract create-vant-cli-app package
This commit is contained in:
陈嘉涵
@@ -0,0 +1,4 @@
|
||||
es
|
||||
lib
|
||||
dist
|
||||
node_modules
|
||||
17
packages/create-vant-cli-app/generators/templates/.gitignore
vendored
Normal file
17
packages/create-vant-cli-app/generators/templates/.gitignore
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
*.log*
|
||||
.cache
|
||||
.DS_Store
|
||||
.idea
|
||||
.vscode
|
||||
|
||||
# npm
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
# dist file
|
||||
es
|
||||
lib
|
||||
site
|
||||
|
||||
# test
|
||||
test/coverage
|
||||
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ['@vant/cli/preset']
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
# 介绍
|
||||
|
||||
### 关于
|
||||
|
||||
这是一段组件库的介绍
|
||||
|
||||
### 特性
|
||||
|
||||
- 特性一
|
||||
- 特性二
|
||||
- 特性三
|
||||
@@ -0,0 +1,11 @@
|
||||
# 快速上手
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
# 通过 npm 安装
|
||||
npm i vant -S
|
||||
|
||||
# 通过 yarn 安装
|
||||
yarn add vant
|
||||
```
|
||||
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "lib/<%= name %>.js",
|
||||
"style": "lib/index.css",
|
||||
"files": [
|
||||
"lib",
|
||||
"es"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vant-cli dev",
|
||||
"test": "vant-cli test",
|
||||
"lint": "vant-cli lint",
|
||||
"build": "vant-cli build",
|
||||
"release": "vant-cli release",
|
||||
"test:coverage": "open test/coverage/index.html",
|
||||
"build-site": "vant-cli build-site && gh-pages -d site"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged",
|
||||
"commit-msg": "vant-cli commit-lint"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js,jsx,vue}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{vue,css,less,scss}": [
|
||||
"stylelint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.6.11",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vant/cli": "^2.0.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"extends": [
|
||||
"@vant"
|
||||
]
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": [
|
||||
"@vant/stylelint-config"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true
|
||||
},
|
||||
"browserslist": [
|
||||
"Android >= 4.0",
|
||||
"iOS >= 8"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
# MyButton 按钮
|
||||
|
||||
### 介绍
|
||||
|
||||
MyButton 是一个示例按钮组件
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue';
|
||||
import { MyButton } from 'demo-ui';
|
||||
|
||||
Vue.use(MyButton);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<demo-button type="primary" />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| type | 按钮类型 | *string* | `primary` |
|
||||
| color `1.0.0` | 按钮颜色 | *string* | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 默认插槽 |
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block title="基础用法">
|
||||
<demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色">
|
||||
<demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
.test {
|
||||
color: red;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<button class="demo-button">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'demo-button',
|
||||
|
||||
props: {
|
||||
color: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-button {
|
||||
min-width: 120px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
background-color: #f44;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import DemoButton from '..';
|
||||
|
||||
test('render demo button', () => {
|
||||
const wrapper = mount(DemoButton);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "./var.less";
|
||||
|
||||
body {
|
||||
color: @text-color;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@primary-color: #f44;
|
||||
@text-color: #4a4a4a;
|
||||
@@ -0,0 +1,36 @@
|
||||
module.exports = {
|
||||
name: '<%= name %>',
|
||||
build: {
|
||||
site: {
|
||||
publicPath: '/<%= name %>/'
|
||||
}
|
||||
},
|
||||
site: {
|
||||
title: '<%= name %>',
|
||||
logo: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
nav: [
|
||||
{
|
||||
title: '开发指南',
|
||||
items: [
|
||||
{
|
||||
path: 'home',
|
||||
title: '介绍'
|
||||
},
|
||||
{
|
||||
path: 'quickstart',
|
||||
title: '快速上手'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
path: 'demo-button',
|
||||
title: 'DemoButton 按钮'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user