ray-template/README.md

Ray template

前言

模板按照个人习惯进行搭建, 可以根据个人喜好进行更改. 预设了一些组件库、国际化库的东西. 建议使用 naive-ui 作为组件库.

项目说明

项目采用 Vue 3 TypeScript TSX Vite 进行开发, 已经集成了一些常用的开发库, 进行了一些 Vite 相关配置, 例如全局自动引入、GZ 打包、按需引入打包、reactivityTransform等, 解放你的双手. 国际化插件, 按照项目需求自己取舍. 引入了比较火的 hook 库 @vueuse, 极大提高你的搬砖效率. 小提醒: 为了避免使用 @vueuse 时出现奇奇怪怪的错误(例如: useDraggable 在使用的时候, TSX 形式开发会失效), 建议采用 <script setup /> 形式进行开发. 可以根据自己项目实际需求进行配置 px 与 'rem' 转换比例(使用 postcss-pxtorem 与 autoprefixer 实现).

启动项目

yarn dev / npm run dev

项目打包

yarn build / npm run build

使用开源库

• pinia 全局状态管理器
• @vueuse vue3 hooks
• vue-router router
• axios ajax request
• vue-i18n 国际化
• scrollreveal.js 滚动加载动画
• crypto-js 加密
• vite-svg-loader svg组件化
• vite-plugin-svg-icons svg雪碧图

组件说明

RayScrollReveal 基于 ScrollReveal 进行开发, 可以实现滚动加载动画

RayTransitionComponent 路由过渡动画组件, 可根据自己喜好更改 src/styles/animate.scss 文件过渡效果

项目结构

- locales: 国际化多语言入口(本项目采用 `json` 格式)

- assets: 项目静态资源入口
  - images: 项目图片资源

- component: 全局共用组件

- icons: 项目svg图标资源，需要配合 RayIcon 组件使用

- language: 国际化

- router: 路由表

- store: 全局状态管理入口
  - modules
    - setting: demo

- styles: 全局公共样式入口

- types: 全局 type

- utils: 工具包
  - cache: 缓存方法
  - crypto: 常用的加密方法
  - element: dom 相关操作方法
  - hook: 常用 hook 方法

- vite-plugin: 插件注册

如果你采用的 naive-ui 作为组件库, 可能需要它

/* eslint-disable */
import {
  createDiscreteApi,
  NDialogProvider,
  NLoadingBarProvider,
  NMessageProvider,
  NNotificationProvider,
} from 'naive-ui'

/**
 *
 * 全局注入 `naive-ui` 组件: `dialog`、`message`、`loadingBar`、`notification`
 * 注意: 脱离上下文创建方式, 不会受 `n-xxx-provider` 控制
 */
const GlobalInject = defineComponent({
  name: 'GlovalInject',
  setup() {
    // 创建 `naive-ui` 组件, 并且让其可以在 `setup` 外使用
    const { message, notification, dialog, loadingBar } = createDiscreteApi(
      ['message', 'dialog', 'notification', 'loadingBar'],
      {},
    )

    window.$dialog = dialog // 注入 `dialog`
    window.$message = message // 注入 `message`
    window.$loadingBar = loadingBar // 注入 `loadingBar`
    window.$notification = notification // 注入 `notification`
  },
  render() {
    return <>{this.$slots.default?.()}</>
  },
})

const GlobalProvider = defineComponent({
  name: 'GlobalProvider',
  render() {
    return (
      <NDialogProvider>
        <NNotificationProvider>
          <NMessageProvider>
            <NLoadingBarProvider>
              {/* <GlobalInject>{this.$slots.default?.()}</GlobalInject> */}
              {this.$slots.default?.()}
            </NLoadingBarProvider>
          </NMessageProvider>
        </NNotificationProvider>
      </NDialogProvider>
    )
  },
})

export default GlobalProvider

如何使用

• 打开 App.tsx
• 引入组件
• 在 RouterView 组件外层包裹即可

import { defineComponent } from 'vue'
import { NConfigProvider, NGlobalStyle } from 'naive-ui'
import { RouterView } from 'vue-router'
import RayGlobalProvider from '@/components/RayGlobalProvider/index'

const App = defineComponent({
  name: 'App',
  render() {
    return (
      <NConfigProvider>
        <RayGlobalProvider>
          <RouterView />
          <NGlobalStyle />
        </RayGlobalProvider>
      </NConfigProvider>
    )
  },
})

export default App

祝大家搬砖愉快, 希望这个模板能帮你省很多时间