vue-cli3 使用mint-ui
关于vue-cli3.x按需引入mint-ui问题记录:
按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component: npm install babel-plugin-component -D
然后,将 babel.config.js修改为: module.exports = {
presets: ["@vue/app"],
plugins:[
[
"component",
{
"libraryName": "mint-ui",
"style": true
}
]
]
};
如果你只希望引入部分组件,比如 Button 和 Cell,那么需要在 main.js 中写入以下内容: import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue' Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
* Vue.use(Button)
* Vue.use(Cell)
*/ new Vue({
el: '#app',
components: { App }
})
参考文档:
vue-cli3.x https://cli.vuejs.org/config/#pluginoptions
mint-ui http://mint-ui.github.io/docs/#/zh-cn2/quickstart
vue-cli3 使用mint-ui的更多相关文章
- vue mint UI
vue 与mint UI 结合开发手机app html5页面 api 文档 http://mint-ui.github.io/#!/zh-cn
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- VUE:UI组件库(Mint UI & Elment)
VUE:UI组件库 常用 1)Mini UI: a 主页:http://mint-ui.github.io/#!/zh-cn b 说明:饿了么开源的基于vue的移动端UI组件库 2)Elment a ...
- vue cli3超详细创建多页面配置
1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
随机推荐
- Architecture And Framework
高屋建瓴 From Up to Down. Outside into inside. Interface-Oriented Framework with dynamic configuration. ...
- Flutter知识点:数据存储之sqflite
sqflite是一款轻量级的关系型数据库,类似SQLite. 在Flutter平台我们使用sqflite库来同时支持Android 和iOS. 使用介绍 1.首选需要在pubspec.yaml 导入库 ...
- python 描述符 上下文管理协议 类装饰器 property metaclass
1.描述符 #!/usr/bin/python env # coding=utf-8 # 数据描述符__get__ __set__ __delete__ ''' 描述符总结 描述符是可以实现大部分py ...
- [翻译] FLAnimatedImage
FLAnimatedImage FLAnimatedImage is a performant animated GIF engine for iOS: FLAnimatedImage是一个播放gif ...
- [翻译] GTAppMenuController
GTAppMenuController https://github.com/gianlucatursi/GTAppMenuController This is a simple project in ...
- ASProgressPopUpView
ASProgressPopUpView https://github.com/alskipp/ASProgressPopUpView 效果: -使用- 将源码拖入工程当中: // // RootVie ...
- ESS控制台发布新功能:创建多实例规格的伸缩配置
背景 原弹性伸缩ESS服务限定,生效的伸缩配置中只能对应一种实例规格,这样就会存在如果生效的配置中的实例规格的库存不足(高配实例规格通常更容易出现库存不足的情况)时, 用户配置好的伸缩规则以及伸缩组对 ...
- Web前端——jQuery----细节
jQuery终极思想:创建jQuery对象(当发现相同的选择器在你的代码里出现多次时,请用变量把它储存起来.一切面向对象) 认识jQuery 1.jQuery库可以做什么? HTML元素选取 HTML ...
- [BZOJ 1033][ZJOI2008]杀蚂蚁antbuster
1033: [ZJOI2008]杀蚂蚁antbuster Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1200 Solved: 507[Submi ...
- codeforces 809C Find a car
codeforces 809C Find a car 题意 有个\(1e9*1e9\)的矩阵,行 \(x\) 从上到下递增,列 \(y\) 从左到右递增.每个格子有一个正值.\((x, y)\) 的值 ...