tiny-vue/examples/sites/demos/pc/webdoc/develop-demo-en.md

Development Example

This article is based onVite Project example to show how to useTinyVuecomponents.

Building the Vite project

Create aViteWorks:

yarn create vite
#or
npm init vite@latest

CreatedViteGo to the project directory and run the following commands to download and start the project:

yarn
#or
npm install

yarn dev
#or
npm run dev

After the browser is started, if the following interface is displayed, it indicates thatViteThe project is started successfully.

Install and useTinyVueComponents

Run the following command to install theVue 3.0version ofTinyVueComponent library:

yarn add @opentiny/vue@3
#or
npm install @opentiny/vue@3

Then modify thevite.config.js, add the following code highlighted section:

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': { ...process.env }
  }
})

When the installation is complete, pressCtrl + CInterrupt the current service, and then performyarn dev #npm run devRestart the service.

Next, modify theApp.vuefile, add the section highlighted by the following code (in theButtonComponent as an example):

<script setup>
//This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import { Button as TinyButton } from '@opentiny/vue'
</script>

<template>
  <img alt="Vue logo" src="@demos/resource/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <TinyButton type="success">Button</TinyButton>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

in the above writing<script setup>is in the single file componentSFCCombinations used in the mediumAPICompiler syntax. For details, see.Vue official website .

If you are not familiar with the above syntax, you can also use the standardSFCFormat:

<template>
  <TinyButton type="success">Button</TinyButton>
</template>

<script>
import { Button } from '@opentiny/vue'

export default {
  components: {
    TinyButton: Button
  }
}
</script>

Alternatively, a single component can be used.TinyVueComponents:

<template>
  <TinyButton type="success">Button</TinyButton>
</template>

<script>
import Button from '@opentiny/vue-button'

export default {
  components: {
    TinyButton: Button
  }
}
</script>

The green button shown below should appear on the browser interface, indicating thatTinyVueThe component has been introduced and takes effect.