ui组件库

nutui-uniapp 组件库，基于Taro版NutUi 4.x版本修改而来，适配了uni-app, 使用 Vue 技术栈开发小程序应用，开箱即用，拥有丰富的业务组件。

页面模板

  1. <template>
  2.     <view class="nut-theme-dark">
  3.         <nut-button type="primary">按钮</nut-button>
  4.         <text>{{ $t('按钮') }}</text> // HTML国际化
  5.         <nut-button type="primary" @click="$linkTo('/pages/home/News')">跳转到详情页</nut-button> // 路由跳转
  6.     </view>
  7. </template>
  9. <script setup>
  10.     import { ref } from 'vue' // 无需引入vue3相关api，可以直接使用
  11.     import { useI18n } from 'vue-i18n'
  12.     import { useUserStore } from '@/store'
  14.     const store = useUserStore() // 全局管理状态，详见 /store/index.js
  15.     const { t } = useI18n()
  17.     const name = ref('')
  19.     console.log(t('最新')) // js代码内国际化
  20. </script>
  22. <style lang="scss" scoped>
  23.     uni.scss 下定义了ui组件的全局样式
  24. </style>

页面内的“nut-theme-dark”用来使用ui组件库的暗黑模式（本项目使用的暗黑模式）

通用样式

uni.scss定义了scss变量，还有引入uniapp-nutui的variables.scss，您也可以自定义项目需要使用的scss变量

uni.scss内的样式代码会被编译到每个page页面，如果样式过多，可能会导致代码包过大（微信小程序有影响）