vant部署_Vant引入及配置

1. vant 官网

2. 通 npm 安装

npm i vant -S

3.安装 babel-plugin-import 插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D

4.在 babel.config.js 中配置

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset'

plugins: [

['import', {

libraryName: 'vant',

libraryDirectory: 'es',

style: true

}, 'vant']

]

}

5.接着你可以在代码中直接引入 Vant 组件

主要按钮

信息按钮

默认按钮

警告按钮

危险按钮

import { Button } from 'vant';

export default {

name:"Myindex",

components: {

[Button.name]: Button

data() {

return {

}

.con{

text-align: center;

}

button{

display: block;

margin: 0 auto;

}

或者不在单个页面引用，在main.js全局引入

import Vue from 'vue'

import 'lib-flexible'

import App from './App.vue'

import {

Cell,

CellGroup,

Icon,

NavBar,

Search,

List,

Toast,

Button,

Tab, Tabs,

Col,

Row,

Calendar,

Dialog,

DropdownMenu, DropdownItem

} from 'vant';

Vue.use(Cell);

Vue.use(CellGroup);

Vue.use(Icon);

Vue.use(NavBar);

Vue.use(Search);

Vue.use(List);

Vue.use(Toast);

Vue.use(Button);

Vue.use(Tab);

Vue.use(Tabs);

Vue.use(Col);

Vue.use(Row);

Vue.use(Calendar);

Vue.use(Dialog);

Vue.use(DropdownMenu);

Vue.use(DropdownItem);

Vue.config.productionTip = false

new Vue({

render: h => h(App),

}).$mount('#app')

vant部署_Vant引入及配置相关推荐

vant部署_vant ui rem配置流程
参考地址 https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 n ...
vant按需引入_VueCli2 配置Vant主题
VueCli2 配置Vant主题官网 VueCli2不支持按需引入,只能全部引入安装依赖 npm install -D less@3 less-loader@5 "vant": ...
vant按需引入没样式_vue vant-ui样式出不来的问题
第一步:安装vant npm i vant -S // 或 yarn add vant 第二步:配置按需引入 // 在 babel.config.js 中配置 module.exports = {pl ...
SAGEMAKER上部署需要引入sagemakder的API from sagemaker.pytorch import PyTorchModel
SAGEMAKER上部署需要引入sagemakder的API from sagemaker.pytorch import PyTorch from sagemaker.pytorch import P ...
Exchange 2013部署系列之(七)配置SSL多域名证书
Exchange 2013部署系列之(七) 配置SSL多域名证书前面六篇博客我们详细讲解了Exchange Server 2013的部署和配置,Exchange一些服务,如 Outlook 无处不在 ...
Exchange Server 2016 独立部署/共存部署（五）—— 配置DAG（下）
Exchange Server 2016 独立部署/共存部署 (五)-- 配置DAG(下) https://blog.51cto.com/horse87/1749819 上一篇我们创建完了DAG的服务 ...
Exchange Server 2016 独立部署/共存部署（四）—— 配置DAG（上）
https://blog.51cto.com/horse87/1749480 Exchange Server 2016 独立部署/共存部署 (四)-- 配置DAG(上) horse87关注0人评论16 ...
Windows 10企业批量部署实战之WDS配置
上文我们成功安装了Windows部署服务角色,接下来我们需要对WDS进行简单的配置以满足后边环境的使用需求. 二.配置WDS: 2.1.打开Windows部署服务右键服务器选择配置服务器: 2.2.相 ...
Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...

vant部署_Vant引入及配置

vant部署_Vant引入及配置相关推荐

最新文章

热门文章