关于vue2升级vue3遇到的问题总结第二篇

1.vue3+vue-router4的路由修改

import {
	createRouter,
	createWebHistory,
} from "vue-router"
import {
	getToken
} from '@/utils/auth'
import Layout from '@/layout/index.vue'

const routerHistory = createWebHistory()
export const constantRoutes = [{
		path: '/login',
		component: () => import('@/views/login/index.vue'),
		hidden: true
	},
	{
		path: '/',
		component: Layout,
		redirect: '/home',
		children: [{
			path: 'home',
			name: 'home',
			component: () => import('@/views/Home.vue'),
			meta: {
				title: '首页',
				icon: 'dashboard'
			}
		}]
	}
]
const router = createRouter({
	history: routerHistory,
	routes: constantRoutes
})


export default router

2.使用vite，文件路径用@替换src

在vite.config.js文件中添加以下代码

import {
	defineConfig
} from 'vite'
import {
	resolve
} from "path";
export default defineConfig({
	resolve: {
		alias: [{
			find: '@',
			replacement: resolve(__dirname, 'src')
		}, ]
	}
})

3.vue3+vuex4 store获取方式改变

因为在setup中没有this，所以获取store里面的数据方式改变了

<script lang="ts" setup>
import {useStore } from 'vuex'
import { computed } from 'vue'
const store = useStore()

const sidebar = computed(() =>{
	return store.getters.sidebar
})

</script>

4.el-date-picker组件 日期出现了NAN

在element-ui中使用el-date-picker组件时，使用了default-time属性，但是升级为element-plus时，日期选择器打开之后出现了NAN问题，查找得知default-time的类型由 String[] 改为了 Date[]，因为项目中要求结束日期要加上23:59:59 所以把value-format="YYYY-MM-DD 23:59:59"改成这个样子

5.el-date-picker组件 限制日期问题

在element-ui中 因为要限制开始时间和结束时间，所以使用了 picker-options 属性，但是在element-plus中 没有这个属性，所以把picker-options 直接换成 disabledDate 即可