Skip to content

A LIGHT Vue3 Starter Admin Template by Vue3 + Vite + TypeScript + Pinia + TailwindCSS + Mqtt + ESlint(Airbnb)

License

Notifications You must be signed in to change notification settings

tommy44458/light-vue3-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A LIGHT Vue3 Starter Admin Template.

This template should help get you started developing with Vue3, Pinia, TailwindCSS, ElementPlus, Mqtt and TypeScript in Vite. The template uses Vue3 <script setup> SFCs. Also, this template also supports MQTTv5 so that it can easily become a control system for IoT devices.

image

Check out the Online DEMO.

image

// login info
Account: tommy
Password: tommy

This starter template includes:

Collaboration-code specification

Many tech teams generally use Airbnb to constrain code specifications at present.

  • Through pre-commit to implement lint check,unit test,code formatting,etc.。
  • Combined with the VsCode(formatting automatically when saving:editor.formatOnSave: true)
  • Combined with the Git hooks(execute before commit:pre-commit => yarn lint)
  • IDE configuration(.editorconfig),ESLint configuration(.eslintrc.js.eslintignore),StyleLint configuration(.stylelintrc, .stylelintignore),for details, please refer to the corresponding configuration file。

Close code specification add .eslintignore and .stylelintignore to src/ directory respectively to ignore

Recommended IDE Setup

Support MQTT client

*.ts

// protocol = 'wss', 'ws', 'mqtt', ...
// host = ip or domain
// port = 8083, 1883, ...
import { useMQTT } from 'mqtt-vue-hook'
const mqttHook = useMQTT()

mqttHook.connect(`${protocol}://${host}:${port}`, {
    clean: false,
    keepalive: 60,
    clientId: `mqtt_client_${Math.random().toString(16).substring(2, 10)}`,
    connectTimeout: 4000,
})

views/console/ConsolePage1.vue

<script setup lang="ts">
import { useMQTT } from 'mqtt-vue-hook'

const mqttHook = useMQTT()

const form = reactive({
	// ...data
})

const mqttSubscribe = () => {
	mqttHook.subscribe(['+/vue3/starter/console/page1'], 1)

	// if receive mes from '+/vue3/starter/console/page1' before excute callback function.
	mqttHook.registerEvent(
		'+/vue3/starter/console/page1',
		// callback funtion
		(topic: string, message: string) => {
			const mesJson = JSON.parse(message.toString())
			ElNotification({
				title: `MQTT TOPIC: ${topic}`,
				message: mesJson,
				type: 'info',
			})
		},
		'key',
	)
}

const onPublish = () => {
	mqttHook.publish(
		'tommy44458/vue3/starter/console/page1',
		JSON.stringify({
			// ...form.data
		}),
	)
}

onMounted(() => {
	mqttSubscribe()
})

onUnmounted(() => {
	// remove Event by topic and key
	mqttHook.unRegisterEvent('+/vue3/starter/console/page1', 'key')
	mqttHook.unSubscribe('+/vue3/starter/console/page1')
})

Getting Started

Install

yarn install

Dev

yarn dev

Build

yarn build

Syntax check

// eslint
yarn lint
// stylelint
yarn lint:style