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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.1.8/dist/nutui.min.css">

在body中的app元素下引入js

至此，大功告成，没必要在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