Code Monkey home page Code Monkey logo

kirklin / boot-vue Goto Github PK

View Code? Open in Web Editor NEW
217.0 5.0 43.0 3.31 MB

Boot Vue is a lightning fast Vue 3 template with strongly typed TypeScript, UnoCSS, DaisyUI, Vue Router, Pinia, and Netlify support.

Home Page: https://boot-vue.vercel.app/

License: MIT License

JavaScript 4.21% Shell 0.97% HTML 9.00% Vue 44.80% TypeScript 39.28% CSS 0.36% Dockerfile 1.37%
vue vue-router tailwindcss tailwind-css tailwind-css-template tailwindcss-v3 pinia vueuse template vite vite-template pnpm

boot-vue's Introduction

Boot-Vue

Boot-Vue - Opinionated Vite Starter Template

Mocking up web app with Boot-Vue (speed)

English | 简体中文

Features

Coding Style

Recommended IDE Setup

Performance

Boot-Vue Outstanding performance

directory

# boot-vue
├─.github                                # Stores GitHub related configuration files.
│  ├─ISSUE_TEMPLATE                       # GitHub Issue templates
│  └─workflows                            # GitHub Actions related configuration files
├─.husky                                  # Stores Git Hooks related configuration files
│  └─_                                    # Stores Git Hooks execution scripts
├─.idea                                   # Stores IntelliJ IDEA related configuration files
│  ├─codeStyles                           # Stores code formatting rules
│  └─inspectionProfiles                  # Stores code inspection rules
├─.vscode                                 # Stores VS Code related configuration files
├─public                                  # Stores static resources required by the web application
├─README.assets                           # Stores images and other resources used by README.md
├─src                                     # Stores the source code of the web application
│  ├─assets                               # Stores static resources required by the web application
│  ├─components                           # Stores the components of the web application
│  │  └─Icon                              # Stores the components representing icons
│  ├─config                               # Stores the configuration files of the web application
│  │  ├─nprogress                         # Stores the configuration file of the progress bar library NProgress
│  │  └─unocss                            # Stores the configuration file of the UnoCSS
│  ├─constant                             # Stores the constant values used in the web application
│  ├─layouts                              # Stores the layout components of the web application
│  │  ├─Footer                            # Stores the layout component representing the footer of the page
│  │  └─Navbar                            # Stores the layout component representing the navigation bar of the page
│  │      └─components                    # Stores the child components of the Navbar layout component
│  │          ├─LocalesChange             # Stores the child component representing language switch
│  │          └─ThemeChange               # Stores the child component representing theme switch
│  ├─locales                              # Stores the content files of the web application's multiple languages
│  ├─router                               # Stores the routing configuration files of the web application
│  │  └─routes                            # Stores the modules of the web application's routes
│  │      └─modules                       # Stores the sub-modules of the routing modules of the web application
│  ├─store                                # Stores the state management files of the web application
│  ├─styles                               # Stores the style files of the web application
│  └─views                                # Stores the page components of the web application
│      ├─errorPages                       # Stores the components representing error pages
│      └─home                             # Stores the components representing the homepage
│          └─components                   # Stores the child components of the homepage components
├─test                                    # Stores the test code
│  └─__snapshots__                        # Stores the Jest snapshot test results
└─types                                   # Stores the TypeScript type declaration files

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

npx degit kirklin/boot-vue my-app
cd my-app
pnpm i

Usage

Development

Just run and visit http://localhost:8888

pnpm run dev

Build

To build the App, run

pnpm run build

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Docker Production Build

First, build the boot-vue image by opening the terminal in the project's root directory.

docker buildx build . -t viteboot:latest

Run the image and specify port mapping with the -p flag.

docker run --rm -it -p 8080:80 viteboot:latest

boot-vue's People

Contributors

kirklin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

boot-vue's Issues

Update docs on split deployment

Clear and concise description of the problem

Hello Thanks for building this project 😄 !

I used your template to build own UI. As the project grows, we are considering splitting the biz logic across several projects and deploying them as separate containers.

I remember a guide in your repo on how to deploy split services under a parent service, smth like:

Big Service >>

... Service A
... Service B

Now I don't see it anymore. Could you share a link to that guide please 🤝

Suggested solution

Update documentation

Alternative

No response

Additional context

No response

Validations

theme transition animation causes theme switching failure in certain browsers 主题切换动画导致部分浏览器主题切换失败

Describe the bug

在尝试切换主题时,主题切换动画在某些浏览器中表现异常,导致主题切换失败。
When attempting to switch themes, the theme transition animation behaves unexpectedly in certain browsers, leading to a failure in theme switching.

Reproduction

  1. 在苹果的Safari浏览器(或其他受影响的浏览器)中打开应用程序。
    Open the application in Apple's Safari browser (or any other affected browser).
  2. 导航到设置或首选项部分,该部分提供主题切换功能。
    Navigate to the settings or preferences section where theme switching is available.
  3. 从可用选项中选择不同的主题。
    Select a different theme from the available options.
  4. 观察主题切换过程中的动画行为。
    Observe the behavior of the theme transition animation during the switch.
  5. 注意主题切换过程中遇到的任何错误或异常。
    Note any errors or anomalies encountered during the theme transition process.
  6. 检查是否成功应用所选主题或者切换失败。
    Check if the selected theme is correctly applied or if the switch fails.

System Info

MacBook Safari浏览器

Expected Behavior (期望行为):

主题切换动画应在所有浏览器中平稳切换主题,无论使用何种浏览器。主题切换完成后,所选主题应正确应用。
The theme transition animation should smoothly switch between themes without any errors or glitches, regardless of the browser being used. The selected theme should be applied consistently after the transition.

Additional Information (附加信息):

经过调查,发现该问题与使用document.startViewTransition进行主题切换有关。在某些浏览器中不支持该方法,导致报告的动画错误,最终导致主题切换过程失败。
Upon investigation, it appears that the issue is related to the usage of document.startViewTransition for theme transitions. This method is not supported in some browsers, leading to the reported animation errors and ultimately causing the theme switching process to fail in those environments.

Possible Solution (可能解决方案):

可能的解决方案包括实现备用机制或替代方案来进行主题切换,以确保在不支持document.startViewTransition的浏览器中也能平稳切换主题。此外,可以在应用动画之前检查该方法的可用性,以防止出现错误。
A potential solution could involve implementing a fallback mechanism or alternative approach for theme transitions, which ensures smooth theme switching across different browsers, including those where document.startViewTransition is not supported. Additionally, it might be beneficial to check for the availability of this method before applying the animation, to prevent errors from occurring.

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Error with missing xdg-utils package

Describe the bug/issue

I had a problem installing vite-boot on multiple servers and the issue were not that obvious to find.
You need the package xdg-utils in order to be able to serve your project (error arriving when running dev) which is not the case in many non gui environnements like servers.
To correct this you just have to install it with your prefered system package manager :
$ apt install xdg-utils --fix-missing
Hope this helps !

移动端语言设置和主题设置点击空白处不会自动收起下拉框

Describe the bug

在移动端时,点击语言设置和主题设置后,再点击空白处的时候,不会自动收起

Reproduction

1

System Info

1

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.