Vue3全家桶+Vite+TypeScript项目开发

技术栈

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

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')

项目地址

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值