0%

vue-components

本文介绍使用@vant/cli构建vue2组件库

快速开始

执行命令构建项目

1
yarn create vant-cli-app

手动安装

1
2
3
4
5
# 通过 npm 安装
npm i @vant/cli -D

# 通过 yarn 安装
yarn add @vant/cli --dev

安装完成后,请将以下配置添加到 package.json 文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
{
"name": "video-point",
"version": "1.0.1",
"description": "",
"main": "lib/video-point.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": "mingyangya",
"license": "MIT",
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "vant-cli commit-lint"
}
},
"lint-staged": {
"*.{ts,tsx,js,jsx,vue}": "eslint --fix",
"*.{vue,css,less,scss}": "stylelint --fix"
},
"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": [
"Chrome >= 51",
"Android >= 4.0",
"iOS >= 8"
]
}

更多细节参考:文档

组件编写

新建文件夹test-button,如下图:

vue代码编写于index.vue中
demo文件夹中用于编写预览页面
README用于编写组件说明文档
test用来校验(可选)

运行

1
2
3
4
5
6
7
8
9
10
11
12
# yarn
yarn run dev
# npm
npm run dev

# 启动后
# Site running at:

# Local: http://localhost:8080/

# ✔ Vant Cli
# Compiled successfully in 2.50s

预览

浏览器输入 http://localhost:8080