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-committo 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 installyarn devyarn build// eslint
yarn lint
// stylelint
yarn lint:style
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent