Nutui—移动端轻量级Vue组件库自己上手操作

跟着官文走了下还是采坑了，应该是自己的问题，记录下来这个实践过程~

什么是Nutui

NutUI（https://nutui.jd.com/#/intro）是一套京东风格的移动端组件库，开发和服务于移动Web界面的企业级前中后台产品。

虽然是基于京东的业务累计生成的UI库，但是由于移动端的视觉规范和交互效果大体类似，且这个组件库可以很好地做到按需引入，并不会引起资源浪费。目前，线上运行的稳定版本是2.*，正在开发基于Vue3.0版本，开发团队前端有50名成员组成，且开源，所以值得推荐。

整体来说，nutui是属于可以10分钟上手的组件库，官文也很简单易懂，大家可以进行碎片化学习。

快速上手

安装

在使用Vue CLI脚手架构建的Vue工程中安装nutui

npm i @nutui/nutui -S

加载

全量引入

在项目的主入口文件(main.js)加载nutui

import Vue from 'vue';
import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css';
 
NutUI.install(Vue);

上述方式会引入所有组件，如果你的工程体量很小，只需要按需引入即可，下面来说明

按需引入

1. 安装webpack插件

npm i @nutui/babel-plugin-separate-import -D

2. 配置babel的配置文件

{
  "plugins": [
    ["@nutui/babel-plugin-separate-import", {
        "style": "scss" // scss表示引入scss
    }]
  ]
}

如果是VueCLI3+，在package.config同级目录下的babel.config.js中添加编译配置

module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            scss: {
                // @/ 是 src/ 的别名
                // 注意：在 sass-loader v7 中，这个选项名是 "data"
                prependData: `
                @import "@/assets/css/custom_theme.scss";
                @import "@nutui/nutui/dist/styles/index.scss";
                `,
            }
        },
    }
}

3. 修改 webpack 配置文件的 sass-loader 配置

{
    loader: 'sass-loader',
    options: {
        data: `@import "@nutui/nutui/dist/styles/index.scss"; `
    }
}

如果是VueCLI3+，在package.config同级目录下创建 vue.config.js,配置scss的加载路径

"plugins": [
       ["@nutui/babel-plugin-separate-import", {
           "style": "scss"
       }]
   ]

4. 在项目中（main.js）只引入用到的组件

import Vue from 'vue';
import { Dialog,Picker } from '@nutui/nutui';
 
Dialog.install(Vue);
Picker.install(Vue);

组件使用

组件的使用方式和Vue中其他组件的使用方式一致，开心~

<template>
    <div>
        <nut-calendar :is-visible.sync="isVisible2"
                      :default-value="date2"
                      :is-auto-back-fill="true"
                      @close="switchPickerClose"
                      @choose="setChooseValue2"
        >
        </nut-calendar>
        <nut-cell :is-link="true" :show-icon="true" @click.native="switchPicker">
            <span slot="title">日期选择</span>
            <span slot="sub-title">有默认日期，选择后自动回填的~~~</span>
            <div slot="desc" class="selected-option">
                <span class="show-value">
                {{date2 ? date2 : '请选择日期'}}
                </span>
            </div>
        </nut-cell>

    </div>
</template>

<script>
    export default {
        name: 'Demo',
        data() {
            return {
                isVisible2: false,
                date2: '2020-12-22'
            };
        },
        methods: {
            setChooseValue2(param) {
                this.date2 = param[3];
            },
            switchPickerClose() {
                this.isVisible2 = !this.isVisible2;
            },
            switchPicker(){
                this.isVisible2 = !this.isVisible2;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

npm run serve / npm run dev 跑一下，成功啦~~~