0.0.1 • Published 1 year ago
bi-ui-components v0.0.1
Vue 3 + TypeScript + Vite
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.
Requirements:
- NodeJS: >= v16
Setup:
# install dependencies
$ npm install
# serve with hot reload at localhost:5173
$ npm run dev
# run the storybook at localhost:6066
$ npm run storybook
# build the library
$ npm run build
Project structure:
- src
- assets
include icons, scss, fonts using in components
- components
write your components in here
- elements
include the basic element based on HTML (select, input, table, ....)
- components
include components (SVG-render, BillingCard,...)
- elements
- constants
definde the constants
- directives
list your custom vue-directive
- examples
list your example that using our components
- stories
list the stories of the components that are rendered with Storybook
- assets
======================================================================================================================================================
======================================================================================================================================================
How to write the component/element and export it in our librar
1. Create your file in components/elements:
src/components/elements/your-element.vue
elements/components/your-component.vue
2. Add export your component in src/components/index.ts:
export { default as YourElement } from './elements/your-elements.vue'
export { default as YourComponent } from './your-component.vue'
3. Install your component and export with our library in src/components/main.ts:
Elements:
import { YourElement } from '@/components';
Components:
import { YourComponent } from '@/components';
Then add more lines in install
hoo to register the component;
app.component('YourElement', YourElement);
app.component('YourComponent', YourComponent);
Export the components registered, and run script to build
export { YourElement, YourComponent }
$ npm run build
Check more detail in src/components/main.ts
=====================================================================================================================================================
=====================================================================================================================================================
How to use our component in other project:
Install our component in other project (using local-link)
npm install {your_local_components} --no-save
example in my machine;
npm install /Users/bipham/Documents/Workspace/tessereum/arbo-ui-components --no-save
* We add the option --no-save
to prevent npm update the package.json file
Import the css and directives in src/main.ts:
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
import i18n from "@/plugins/i18n";
// Import css and directive of our component
import "arbo-ui-components/styles.css"
import { clickOutside } from 'arbo-ui-components'
const myApp = createApp(App)
myApp.use(i18n)
myApp.use(router)
// Register our directives
myApp.directive('click-outside', clickOutside);
// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')
Import our component in your vue files then use; (example: src/views/example.vue)
<template lang="pug">
.example-section
...
arbo-banner
arbo-button
arbo-modal
</template>
<script setup lang="ts">
import { ArboButton, ArboBanner, ArboModal } from 'arbo-ui-components'
...
=====================================================================================================================================================
=====================================================================================================================================================
Recommended IDE Setup
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Type Support For .vue
Imports in TS
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
0.0.1
1 year ago