vue3安装wot-design步骤

首先把vue项目创建好
安装wot-designcnpm i wot-design 我用npm安装报错了。。。见怪不怪了

接着在main.js中引入依赖

import WotDesign from 'wot-design'
import 'wot-design/lib/theme-default/index.css'
//全局引入，可以直接在组件中写wot-design官网的标签了
Vue.use(WotDesign)

wot-deign官网

直接在代码块中引入即可看到效果

<wd-button type="success">成功按钮</wd-button>

如果不想全局引入全部的标签，只想要引入某些标签可以借助babel-plugin-import

首先，安装 babel-plugin-import
cnpm i babel-plugin-import -D

然后，将 babel.config.js 文件修改为：

module.exports = {presets: ['@vue/app'], // 这三行是我创建项目就有的，下面是新加的"plugins": [["import", {"libraryName": "wot-design","style": true}]]
}

接下来，在main.js中引入需要使用的部分组件，如 Button：
```
import { Button } from 'wot-design'Vue.use(Button)
```

这就完成了配置wot-design，可以开始愉快的编代码了！

vue3安装wot-design步骤相关推荐

在 Linux安装Dataiku DSS步骤
在 Linux安装Dataiku DSS步骤 1.下载DSS wget https://cdn.downloads.dataiku.com/public/dss/6.0.1/dataiku-dss-6 ...
【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序
Vue3 安装在开始使用 Vue.js 3之前,需进行一些简单的设置和安装步骤.本教程将指导完成Vue3的安装过程. 步骤 1:引入 Vue.js 首先,在HTML文件中引入Vue.js库.可通过以 ...
windows vue3 安装及搭建
windows vue3 安装及搭建 1 安装node 1.1安装node.js 1.2 设置nodejs cache缓存路径 1.3 设置nodejs prefix全局路径 2 设置系统环境变量 2 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
Vue3安装配置.开发环境搭建(组件安装卸载)(图文详细) 本文目录: 一.vue的主要安装使用方式二.node.js安装和配置 1.支持运行 Node.js的平台 2.Node.js 版本开发发布 ...
【Ubuntu】虚拟机VirtualBox安装win7完整步骤
在Ubuntu16.04中使用VirtualBox安装win7,亲测可以完美使用; 完整步骤参见如下链接: 1.VirtualBox安装步骤:http://www.xitongcheng.com/ji ...
编译安装linux内核步骤
编译安装linux内核步骤: 一.获取内核源码源码网址:www.kernel.org 二.解压内核源码首先以root帐号登录,然后进入/usr/src子目录.如果用户在安装Linux时,安装了内核 ...
db2安装包v10.5_LINUX安装db2V10.5步骤
LINUX安装db2V10.5步骤 2017-04-01 10:08:35| 分类: db2 |举报 |字号订阅下载LOFTER 我的照片书 |转自:http://blog.csdn.net/ ...
linux tomcat 安装教程,关于Linux下配置安装Tomcat8的步骤
由于Centos6即将停止更新,本次就使用Centos7.5 X64位系统来演示,Tomcat版本就使用8.5,如果想使用9.0的版本也可以去官网进行下载,步骤都大同小异. 关于Tomcat9的新特性 ...
虚拟机在安装svn时认证密码一直报错_研路同行|安装虚拟机到安装GAMIT教程步骤汇总...
(一路遇见,一路再见) 全文共计2258字,图片共计1张用心阅读控制在10分钟 --今日图文-- Gamit/gLOBK软件是一款高精度GNSS数据处理软件,目前支持GPS/BDS/GLONASS/ ...

vue3安装wot-design步骤

如果不想全局引入全部的标签，只想要引入某些标签可以借助babel-plugin-import

vue3安装wot-design步骤相关推荐

最新文章

热门文章