1. React18
2. Next14
3. Tailwindcss
4. Ant Design
5. Alibaba Cloud
Elevator Management Platform, including a platform end, an enterprise end, and a maintenance personnel end. After the enterprise registration, the elevator maintenance needs are released at the enterprise end. The platform end is responsible for enterprise registration review and order dispatch circulation. Maintenance personnel receive orders through the mobile app.
1. Vue3
2. Vuex
3. ElementUI
4. scss
5. Java
6. Spring
a comprehensive solution designed to streamline the management of chemical reagents, lab equipment, and material borrowing records. Key features include automatic inventory tracking, borrowing history, risk reporting, and stock management, providing a powerful tool for optimized and efficient laboratory operations.
1. Vue2
2. Vuex
3. uview
4. scss
5. uniapp
6. Java
7. Spring
a comprehensive solution designed to streamline the management of chemical reagents, lab equipment, and material borrowing records. Key features include automatic inventory tracking, borrowing history, risk reporting, and stock management, providing a powerful tool for optimized and efficient laboratory operations.
1. Vue2
2. Vuex
3. uview
4. scss
5. uniapp
an HTML5 mobile solution for managing solar facilities. Key features include real-time monitoring, analytics, alerts, and recommendations to maximize efficiency and minimize downtime, driving success in renewable energy management.
1. Vue2
2. Vuex
3. scss
4. ElementUI
Unified management of supplier SKU, integrating product purchasing and expense reimbursement processes, enabling university professors to select teaching-related products from designated supplier SKUs without needing to apply for reimbursement for each purchase.
import { createStore } from 'vuex' // 导入
import { toRaw } from 'vue' // 这里是比较迷惑的，vue3需要用到；但是既然是vue3了为什么不用pinia
const store = createStore({
state: {
myState: '' // 定义一个state变量，也可以是对象类型
},
mutations: {
setMyState: (state, payload) => {
state.myState = payload.value
}
},
// 可以不添加action，但是action结合dispatch使用是异步调用
actions: {
handlerMyState: (context, payload) => {
context.commit('setMyState', payload)
}
},
getters: {
getMyState: (state) => {
return toRaw(state.myState) // 如果是vue3返回的会是proxy，需要用toRaw解构一下拿到真实的值
}
}
})
export default store
import { createApp } from 'vue'
import App from './App.vue'
import store from './store' // 导入/src/store/index.js
const app = createApp(App)
app.use(store) // 挂载
app.mount('#app')
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store, // 一点小差别
render: h => h(App),
}).$mount('#app')
{/* <script setup> */}
import { useStore } from 'vuex'
const store = useStore()
// 同步调用，setMyState是mutations中的方法名
store.commit("setMyState", { value: 'my value' })
// 异步dispatch修改值，handlerMyState是action中的方法名
store.dispatch('handlerMyState', { value: 'my value' })
// </script>
<span>{{store.getters['getMyState']}}</span>
this.$store.state.myState
<span>{{$store.state.myState}}</span>
npm install -g mkcert
mkcert create-ca
mkcert create-cert
生成了四个文件
ca.crt
ca.key
cert.crt
cert.key
// vue.config.js
const path = require('path')
const fs = require('fs')
module.exports = {
devServer: {
open: true,
https: {
cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
}
}
}
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const fs = require('fs')
const path = require('path')
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.join(__dirname, 'src')
}
},
server: {
open: true,
https: {
// 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
}
}
})
// manifest.json
"h5" : {
"devServer" : {
"https" : {
"cert" : "复制cert.cer中的全部内容，换行转换为\n"
"key" : "复制cert.key中的全部内容，换行转换为\n"
},
"proxy" : {} // 这个必须在这里配置，因为vue.config.js中的会冲突
},
"async" : {
"delay" : "10000"
},
"router" : {
"base" : "./"
}
}