vue引入nutUI
这段时间需要做一个移动端项目,我需要选着用哪个UI库,其它的UI库没多看,看了看mintUI和nutUI,感觉mintUI的功能要比nutUI的功能少点,mintUI是饿了么团队开发的,而nutUI是京东团队开发的,两个团队都是国内强悍的团队,我发现mintUI可以用CDN引入,从而减少项目体积,而nutUI我也想用cdn的形式引入
nutUI文档地址:http://nutui.jd.com/#/intro
新建好vue项目后,在public/index.html文件中引入css以及js即可,不过页面引入的方式不支持主题定制,
在header中引入css
<!-- nutUI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.1.8/dist/nutui.min.css">
在body中的app元素下引入js
<div id="app"></div> <!-- nutUI -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.1.8/dist/nutui.min.js"></script>
至此,大功告成,没必要在vue.config.js配置externals了,
然后再页面中写一些nutUI中的组件试试:
效果
然后引入个 Dialog 对话框 试试:
效果:
ok!!后续有什么使用经验会继续写!
上述通过CDN引入,项目打包文件为113k,如果是npm引入方式,打包大小是700多k,文件体积差别巨大,
但是,如果用CDN引入时无法更改主题颜色的,有些不爽,所以还是需要npm方式引入,但是需要按需加载,要不文件体积会很大。
安装nutUI
npm i @nutui/nutui -S
main.js引入
import Vue from 'vue';
import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css'; NutUI.install(Vue);
上面是不按需加载的方法,下面说一下按需加载
我们先选择使用官方推荐的webpack插件的方式实现按需加载,就是当项目中用到某个组件时,会自动加载此组件,比手动引入方便
1. 使用 webpack 插件 @nutui/babel-plugin-seperate-import (推荐)
npm i @nutui/babel-plugin-separate-import -D
配置babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
["@nutui/babel-plugin-separate-import", {
"libraryName": "@nutui/nutui",
"libraryDirectory": "dist/packages",
"style": "scss"
}]
]
}
然后引入scss:
安装scss及node-sass
npm install sass-loader node-sass --save
vue.config.js中配置
css: {
loaderOptions: {
// 给 sass-loader 传递选项
scss: {
// @/ 是 src/ 的别名
// 注意:在 sass-loader v7 中,这个选项名是 "data"
prependData: `
@import "@/assets/custom_theme.scss";
@import "@nutui/nutui/dist/styles/index.scss";
`,
}
},
}
然后再main.js中就可以按需引入组件了
import { Dialog,Picker,navbar,tabbar } from '@nutui/nutui';
navbar.install(Vue);
tabbar.install(Vue);
Dialog.install(Vue);
Picker.install(Vue);
组件库列表,方便搜索组件名称:https://github.com/jdf2e/nutui/tree/master/src/packages
然后我么你可以定制主题了,上面的配置上已经够了
在src/assets/目录里创建custom_theme.scss文件
// scss文件示例内容
$btn-gradient-bg: #043d6a;
$btn-gradient-active-bg: #053D7E;
$btn-gradient-color: #fff;
上面是简单的定制点主题样式
下面是可以定制的样式列表:
这是一个完整的样式表
vue引入nutUI的更多相关文章
- vue 引入通用 css
1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...
- vue引入jQuery、bootstrap
vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...
- vue学习记录:vue引入,validator验证,数据信息,vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- 解决Vue引入百度地图JSSDK:BMap is undefined 问题
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...
- Vue引入
Vue引入 概念: 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2. ...
- vue引入js文件时报This dependency was not found:错误
vue引入js文件时报This dependency was not found:错误 使用了很多方法,原来是这么小的问题,特此记录 解决办法 添加 ./
- 16、vue引入echarts,划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
随机推荐
- Kafka 生产者、消费者与分区的关系
背景 最近和海康整数据对接, 需要将海康产生的结构化数据拿过来做二次识别. 基本的流程: 海康大数据 --> kafka server --> 平台 Kafka 的 topic 正常过车 ...
- windows开机自启动的django服务
做了一个django项目,想部署在win10的笔记本电脑上,可以开机后台自动启动.找了很多的方法.最后成功了. 参考了这个博主的内容. https://blog.csdn.net/qq_3595961 ...
- 【夯实基础】- Java中的fail-fast机制
转载自:Java中的fail-fast机制 遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过普通的for删除删除符合条件 ...
- Java 之 Response 发送验证码案例
定义一个 Servlet 用来在内存中生成 二维码图片,并向浏览器页面输出. import javax.imageio.ImageIO; import javax.servlet.ServletExc ...
- 谷歌hack语法
搜索标题 intitle:"登入" //加引号是精确搜索 搜索正文 intext:"登入" 在URL中搜索 inurl:"/phpmyadmin&qu ...
- 在Spring中使用AspectJ实现AOP
在Spring中,最常用的AOP框架是AspectJ,使用AspectJ实现AOP有2种方式: 基于XML的声明式AspectJ 基于注解的声明式AspectJ 基于XML的声明式AspectJ 1. ...
- SAP错误消息调试之七种武器:让所有的错误消息都能被定位
目录 长生剑 - SAPGUI Where Used List 碧玉刀 - ABAP调试器观察点 霸王枪 - ABAP调试器动态断点 多情环 - ABAP代码静态扫描 孔雀翎 - SAT 离别钩 - ...
- 文件的内存读取 ,以及image图片(二进制)的读取
#在python2.x中导入模块方法: from StringIO import String #在python2.x中它还有个孪生兄弟,运行速度比它快,用c实现的 from cStringIO im ...
- saltstack安装使用
官网地址:https://docs.saltstack.com/en/latest/ 安装 saltstack 1. sudo yum install https://repo.saltstack ...
- jmeter源码环境(IDEA)
jmeter源码环境(IDEA) jmeter 1. 本地环境 2. 下载源码 3. 下载依赖包 4. 导入IDEA 5. 运行 1. 本地环境 Windows7 java版本:1.8.0_191 a ...