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 跑一下,成功啦~~~

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DoubleNa

客官常来,谢谢客官抬爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值