This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

• VS Code + Volar

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's Take Over mode by following these steps:

1. Run Extensions: Show Built-in Extensions from VS Code's command palette, look for TypeScript and JavaScript Language Features, then right click and select Disable (Workspace). By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running Developer: Reload Window from the command palette.

You can learn more about Take Over mode here.

为了esm而设计

darkMode 写在tailwind.config.cjs里面.编写暗色的50-900的色调 然后darkMode是class类型

这样我们能在vue模板中使用:class={'dark':darkMode}去控制

响应式的尺寸也在里面编写

容器给min-h-full表示最小高度100% 内层容器给grid布局 占12 mxauto 然后是响应式的部分:sm-px-6 lg:max-w-7xl lg:max-w-7xl这行代码表示超过lg尺寸最大的width就是1280px(80rem) 这部分的完整

                  <div class="grid grid-cols-12 mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:gap-5">

      <div :class="{'dark':darkMode}">
            <div class="bg-white dark:bg-dim-900">
                  <!-- 容器以及布局 -->
                  <div class="min-h-full">
                        <div class="grid grid-cols-12 mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:gap-5">
                              <!-- LeftSideBar -->
                              <div class="md:block xs:col-span-1 xl:col-span-2">
                                    <div class="sticky top-0">
                                          <SideBarLeft />
                                    </div>
                              </div>
                              <!-- MainContent -->
                              <!-- RightSideBar -->
                        </div>
                  </div>
            </div>
      </div>

naiveui提供的时间是转成时间戳的就很神奇，后面发现这样操作就ok了,这样的话后台对比是否在这个时间段内也很方便

+new Date('2012-09-03')

      $and: [{ date: { $gt: startTime } }, { date: { $lt: endTime } }]

注意还要把schema里面的date转化为Date格式

转化的结果

+new Date('2022-04-21 08:31:57')
1650501117000
//转后
+new Date('2022-04-21T00:31:57.000Z')
1650501117000

注意在前端把这种字符串转化

new Date('2022-04-21T00:31:57.000Z').toLocaleString()

在*.d.ts中声明

declare interface Window{
  $message: MessageApiInjection
}

在公司coding的时候 提交自己的git仓库代码 现在已经不能用密码了 需要用access Token 在setting -> Developer settings -> Personal access tokens 中生成 特别注意 勾选所有的权限！！！

最后 生成之后在电脑的凭据管理器中注入