Vue3+Vite+TypeScript项目开发

技术栈

• vue3.0+
• vue-router4.0+
• vuex4.0+、vuex-persistedstate
• vite2.0+
• typescript
• element-plus
• axios

App的routerView

  <div class="main">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </div>

vue-router应用

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './entry'

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

vuex应用

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

let timer: any = null

export default createStore({
  state: {
    listData: {
      a: 10
    },
    num: 10
  },
  getters: {
    doubleCount: state => state.num * 2
  },
  mutations: {
    setData(state, value) {
      state.listData = value
    },
    addNum(state) {
      state.num = state.num + Math.random()
    }
  },
  actions: {
    setData(context) {
      context.commit('setData')
    },
    addNum(context) {
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        console.log('模拟延时')
        context.commit('addNum')
      }, 1500)
    },
  },
  modules: {},
  // 数据状态持久化 vuex-persistedstate
  plugins: [createPersistedState({
    key: 'VUEXCACHE',
    storage: window.sessionStorage,
    reducer(val)  {
      return {
        // 只储存state中的num
        num: val.num
      }
    }
  })]
})

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import './assets/less/app.less'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import pageTitle from './components/pageTitle.vue'

const app = createApp(App)

window.$version = {
  vue: app.version,
  ele: ElementPlus.version
}

app.component('pageTitle', pageTitle)

app.use(router)
  .use(store)
  .use(ElementPlus, { locale })
  .mount('#app')

项目地址