Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/v-poc/vui-vc-next
Vue3 with Vite5 Playground - Mobile web UI components - (vue3+vite5).
https://github.com/v-poc/vui-vc-next
vite vite5 vitejs vitepress vue vue-component vue-components vue-composition-api vue-ui vue-ui-components vue3 vue3-ui vue3-vite vue3-vite-ui vue3-vite-vitepress vue3-vite5 vue3-vite5-ui vuejs vui vui-vc
Last synced: 4 months ago
JSON representation
Vue3 with Vite5 Playground - Mobile web UI components - (vue3+vite5).
- Host: GitHub
- URL: https://github.com/v-poc/vui-vc-next
- Owner: v-poc
- License: mit
- Created: 2020-07-18T12:24:49.000Z (over 4 years ago)
- Default Branch: dev
- Last Pushed: 2024-09-24T04:31:23.000Z (5 months ago)
- Last Synced: 2024-10-07T02:06:10.572Z (5 months ago)
- Topics: vite, vite5, vitejs, vitepress, vue, vue-component, vue-components, vue-composition-api, vue-ui, vue-ui-components, vue3, vue3-ui, vue3-vite, vue3-vite-ui, vue3-vite-vitepress, vue3-vite5, vue3-vite5-ui, vuejs, vui, vui-vc
- Language: Vue
- Homepage: https://nikoni.top/vui-vc-next/
- Size: 1.45 MB
- Stars: 17
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vui-vc-next (aka VUI.VC.next)
[](https://www.npmjs.com/package/vui-vc-next)
> Yet another **lightweight** and **Vite-powered** Mobile web UI components based on **Vue 3** and **Vite 5**.
## Contains
- [x] [Vue](https://v3.vuejs.org/) [](https://www.npmjs.com/package/vue)
- [x] [Vue Router](https://router.vuejs.org/) [](https://www.npmjs.com/package/vue-router)
- [x] [Vite](https://github.com/vitejs/vite) [](https://www.npmjs.com/package/vite) [](https://nodejs.org/en/about/releases/)
- [x] [Vue 3 SFC support via @vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) [](https://npmjs.com/package/@vitejs/plugin-vue)
- [x] [HMR](https://vitejs.dev/guide/features.html#hot-module-replacement)
- [x] [Dev Server Proxy](https://vitejs.dev/config/#server-proxy)
- [x] [Library Mode](https://vitejs.dev/guide/build.html#library-mode)
- [x] [CSS Pre-processors](https://vitejs.dev/guide/features.html#css-pre-processors)
- [x] [Sass](https://sass-lang.com/) [](https://www.npmjs.com/package/sass)
- [x] [PostCSS](https://vitejs.dev/guide/features.html#postcss)
- [x] [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) [](https://www.npmjs.com/package/postcss-pxtorem)
- [x] [Vitepress](https://github.com/vuejs/vitepress) [](https://www.npmjs.com/package/vitepress)## Preview
Try [StackBlitz](https://stackblitz.com/github/v-poc/vui-vc-next?file=package.json) or try [QR code SFC playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE+VlVJLm5leHQ8L2gxPlxuICA8aDM+c2NhbiB0aGUgUVIgY29kZSB0byBhY2Nlc3MgdGhlIGV4YW1wbGVzIG9uIG1vYmlsZS90YWJsZXQgZGV2aWNlOjwvaDM+XG4gIDxkaXYgdi1odG1sPVwiaW1nXCI+PC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuaW1wb3J0IHFyY29kZSBmcm9tICd2LXFyLWNvZGUtbmV4dCdcblxuY29uc3QgdHlwZU51bWJlciA9IDgsIGVycm9yQ29ycmVjdGlvbkxldmVsID0gJ0wnXG5jb25zdCBxciA9IHFyY29kZSh0eXBlTnVtYmVyLCBlcnJvckNvcnJlY3Rpb25MZXZlbClcbnFyLmFkZERhdGEoJ2h0dHBzOi8vbmlrb25pLnRvcC92dWktdmMtbmV4dC8nKS5tYWtlKClcblxuY29uc3QgaW1nID0gcXIuY3JlYXRlSW1nVGFnKClcbjwvc2NyaXB0PlxuIiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidi1xci1jb2RlLW5leHRcIjogXCJodHRwczovL3VucGtnLmNvbS92LXFyLWNvZGUtbmV4dEAwLjEuNi9kaXN0L3YtcXItY29kZS1uZXh0LmVzLmpzXCJcbiAgfVxufSJ9) to scan to access the examples on mobile/tablet device.
## Compatibility Notes
- Due to usage of new runtime helpers, code generated by the template compiler in >= `3.2` will not be compatible with runtime < `3.2`.
Please note that vui-vc-next `v0.13.21+` contains code pre-compiled by Vue >= `3.2`, the library will be only compatible with Vue >= `3.2`.
## Status
- More UI components WIP based on Vue 3.
- Currently JavaScript version only, will provide TypeScript codebase in next major version.
- About project test, will provide unit/e2e test in next major version.## Usage
Select the components you need to build your web App. Please check [VUI-POC](https://github.com/v-poc/vui-poc) for some reference.
[VUI (based on vue3)](https://github.com/v-poc/vui-vc-next) is able to run in cross-platform solutions by [Taro3](https://github.com/NervJS/taro). Please check [VUI-Taro](https://github.com/bluepower/vui-taro-poc) for some reference.
- miniprogram (weapp/swan/alipay/tt/qq/jd) - `zh-CN` project
- quickapp - `zh-CN` project
- h5
- react native> The mobile-first responsive-UI is also fit for desktop web.
>
> `vui-vc-next` is for `Vite 5.x` (Library Mode) and onward. Vite 1.x's demo is [archived](https://www.npmjs.com/package/vui-vc-next?activeTab=versions). `VUI.VC.next` is the playground project of [`v-poc`](https://github.com/v-poc) Organization, the naming `VUI next` is not relavant to [`vue ui`](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui).## Project setup
### How to setup your project
```
npm i
```### Compiles and hot-reloads for development
```
npm start
```### Compiles and minifies for production
#### build lib
```
npm run build
```#### build demo
```
npm run build-demo
```## Project docs - [`VUI.VC.next` docs](https://nikoni.top/vui-vc-next/docs)
### Compiles docs for development
```
npm run dev-docs
```### Compiles and minifies docs for production
```
npm run build-docs
```## Customize configuration
About vite and vitepress, please check Configuration Reference - [vite](https://vitejs.dev/config/), [vitepress](https://vitepress.vuejs.org).
## License