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';
Vue.use(scroller);

 

 組件庫列表，方便搜索組件名稱：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