6.1 KiB
配置指南
vant.config.js
vant.config.js中包含了vant-cli的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：
module.exports = {
// 组件库名称
name: 'demo-ui',
// 构建配置
build: {
site: {
publicPath: '/demo-ui/',
},
},
// 文档站点配置
site: {
// 标题
title: 'Demo UI',
// 图标
logo: 'https://img.yzcdn.cn/vant/logo.png',
// 描述
description: '示例组件库',
// 左侧导航
nav: [
{
title: '开发指南',
items: [
{
path: 'home',
title: '介绍',
},
],
},
{
title: '基础组件',
items: [
{
path: 'my-button',
title: 'MyButton 按钮',
},
],
},
],
},
};
name
- Type:
string - Default:
''
组件库名称，建议使用中划线分割，如demo-ui。
build.css
- Type:
object - Default:
{ preprocessor: 'less' }
CSS 预处理器配置，目前支持less和sass两种预处理器，默认使用less。
module.exports = {
build: {
css: {
preprocessor: 'sass',
},
},
};
build.site
- Type:
object - Default:
{ publicPath: '/' }
site.publicPath等价于 webpack 的output.publicPath配置。
一般来说，我们的文档网站会部署在一个域名的子路径上，如 https://my.github.io/demo-ui/，这时候publicPath需要跟子路径保持一致，即/demo-ui/。
module.exports = {
build: {
site: {
publicPath: '/demo-ui/',
},
},
};
build.srcDir
- Type:
string - Default:
src
module.exports = {
build: {
srcDir: 'myDir',
},
};
site.title
- Type:
string - Default:
''
文档站点的标题。
site.logo
- Type:
string - Default:
''
文档站点的 Logo。
site.description
- Type:
string - Default:
''
标题下方的描述文案。
site.nav
- Type:
object[] - Default:
undefined
文档站点的左侧导航，数组中的每个对象表示一个导航分组。
module.exports = {
site: {
nav: [
{
// 分组标题
title: '开发指南',
// 导航项
items: [
{
// 导航项路由
path: 'home',
// 导航项文案
title: '介绍',
},
],
},
],
},
};
site.versions
- Type:
object[] - Default:
undefined
文档站点多版本配置，当组件库存在多个版本的文档时，可以通过site.versions在顶部导航配置一个版本切换按钮。
module.exports = {
site: {
versions: [
{
label: 'v1',
link: 'https://youzan.github.io/vant/v1/',
},
],
},
};
site.baiduAnalytics
- Type:
object - Default:
undefied
文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
module.exports = {
site: {
baiduAnalytics: {
// 打开百度统计 ->『管理』->『代码获取』
// 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx"
// 将 `xxxxx` 填写在 seed 中即可
seed: 'xxxxx',
},
},
};
site.searchConfig
- Type:
object - Default:
undefined
文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。
配置内容参见 docsearch。
site.htmlPluginOptions
- Type:
object - Default:
undefined
html-webpack-plugin 的配置项，详见 Options。
Webpack
通过根目录下的webpack.config.js文件可以修改 Webpack 配置，配置内容会通过 webpack-merge 合并到最终的配置中。
比如修改 devServer 端口：
module.exports = {
devServer: {
port: 9000,
},
};
Babel
通过根目录下的babel.config.js文件可以对 Babel 进行配置。
默认配置
推荐使用vant-cli内置的 preset，配置如下：
module.exports = {
presets: ['@vant/cli/preset'],
};
@vant/cli/preset中默认包含了以下插件：
- @babel/preset-env（不含 core-js）
- @babel/preset-typescript
- @babel/plugin-transform-runtime
- @babel/plugin-transform-object-assign
- @babel/plugin-proposal-optional-chaining
- @babel/plugin-proposal-nullish-coalescing-operator
- @vue/babel-preset-jsx
依赖
由于使用了@babel/plugin-transform-runtime来优化 Babel 的 helper 函数，你需要将@babel/runtime添加到package.json的依赖项：
{
"dependencies": {
"@babel/runtime": "7.x"
}
}
如果使用了 JSX 的语法，还需要将@vue/babel-helper-vue-jsx-merge-props添加到依赖中：
{
"dependencies": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0"
}
}
Postcss
通过根目录下的postcss.config.js文件可以对 Postcss 进行配置。
默认配置
vant-cli中默认的 Postcss 配置如下：
module.exports = {
plugins: {
autoprefixer: {},
},
};
browserslist
推荐在package.json文件里添加 browserslist 字段，这个值会被@babel/preset-env和autoprefixer用来确定目标浏览器的版本，保证编译后代码的兼容性。
在移动端浏览器中使用，可以添加如下配置：
{
"browserslist": ["Android >= 4.0", "iOS >= 8"]
}