这段时间需要做一个移动端项目,我需要选着用哪个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;

上面是简单的定制点主题样式

下面是可以定制的样式列表:

这是一个完整的样式表

variable.scss

vue引入nutUI的更多相关文章

  1. vue 引入通用 css

    1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...

  2. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  3. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  4. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  5. 解决Vue引入百度地图JSSDK:BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  6. Vue引入

    Vue引入 概念: 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2. ...

  7. vue引入js文件时报This dependency was not found:错误

    vue引入js文件时报This dependency was not found:错误 使用了很多方法,原来是这么小的问题,特此记录 解决办法 添加 ./

  8. 16、vue引入echarts,划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  9. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

随机推荐

  1. Kafka 生产者、消费者与分区的关系

    背景 最近和海康整数据对接, 需要将海康产生的结构化数据拿过来做二次识别. 基本的流程: 海康大数据 --> kafka server --> 平台 Kafka 的 topic 正常过车 ...

  2. windows开机自启动的django服务

    做了一个django项目,想部署在win10的笔记本电脑上,可以开机后台自动启动.找了很多的方法.最后成功了. 参考了这个博主的内容. https://blog.csdn.net/qq_3595961 ...

  3. 【夯实基础】- Java中的fail-fast机制

    转载自:Java中的fail-fast机制 遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过普通的for删除删除符合条件 ...

  4. Java 之 Response 发送验证码案例

    定义一个 Servlet 用来在内存中生成 二维码图片,并向浏览器页面输出. import javax.imageio.ImageIO; import javax.servlet.ServletExc ...

  5. 谷歌hack语法

    搜索标题 intitle:"登入" //加引号是精确搜索 搜索正文 intext:"登入" 在URL中搜索 inurl:"/phpmyadmin&qu ...

  6. 在Spring中使用AspectJ实现AOP

    在Spring中,最常用的AOP框架是AspectJ,使用AspectJ实现AOP有2种方式: 基于XML的声明式AspectJ 基于注解的声明式AspectJ 基于XML的声明式AspectJ 1. ...

  7. SAP错误消息调试之七种武器:让所有的错误消息都能被定位

    目录 长生剑 - SAPGUI Where Used List 碧玉刀 - ABAP调试器观察点 霸王枪 - ABAP调试器动态断点 多情环 - ABAP代码静态扫描 孔雀翎 - SAT 离别钩 - ...

  8. 文件的内存读取 ,以及image图片(二进制)的读取

    #在python2.x中导入模块方法: from StringIO import String #在python2.x中它还有个孪生兄弟,运行速度比它快,用c实现的 from cStringIO im ...

  9. saltstack安装使用

    官网地址:https://docs.saltstack.com/en/latest/ 安装 saltstack 1. ​ sudo yum install https://repo.saltstack ...

  10. jmeter源码环境(IDEA)

    jmeter源码环境(IDEA) jmeter 1. 本地环境 2. 下载源码 3. 下载依赖包 4. 导入IDEA 5. 运行 1. 本地环境 Windows7 java版本:1.8.0_191 a ...