This template should help get you started developing with Vue3, Pinia, WindiCSS, ElementPlus, Mqtt and TypeScript in Vite. The template uses Vue3 <script setup>
SFCs. Also, this template also supports MQTT so that it can easily become a control system for IoT devices.
Check out the Online DEMO.
// login info
Account: tommy
Password: tommy
- Vue 3
- Vite
- Pinia
- WindiCSS
- Vue Router
- ElementPlus UI
- Stylus
- Stylelint
- Eslint
- eslint-config-airbnb-typescript
- mqtt-vue-hook
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
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// protocol = 'wss', 'ws', 'mqtt', ...
// host = ip or domain
// port = 8083, 1883, ...
import mqttVueHook from 'mqtt-vue-hook'
// app.use(mqttVueHook, options)
app.use(mqttVueHook, `${protocol}://${host}:${port}`, {
clean: false,
keepalive: 60,
clientId: `mqtt_client_${Math.random().toString(16).substring(2, 10)}`,
connectTimeout: 4000,
})
<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')
})
yarn install
yarn dev
yarn build
// eslint
yarn lint
// stylelint
yarn lint:style