刚开始做海外项目时，有点受不了写

，加上本就需要对每个页面都进行需求的修改。所以正好趁此机会直接把项目迁移到了

。 不过时间已经过去挺久了，本文主要是以回忆为主。

当时是直接当一个新项目来做，所以直接用 

npm init vite@latest my-vue-app -- --template vue-ts

旧项目由很多全局方法、属性的挂载。这种用法在

app.config.globalProperties.$utils = utils;
app.config.globalProperties.$md5 = md5;
app.config.globalProperties.$in = i18n;

app.use(router).use(store).use(ViewUIPlus).use(i18n);

 我们还需要补充一下类型，以便在业务代码中使用

// router/index.ts
declare module 'vue-router' {
  interface RouteMeta {
    title?: string;
    parent?: string;
    keepAlive?: boolean;
    activePath?: string;
  }
}
const routes: Array<RouteRecordRaw> = [...];

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

export default router;

基本没有太大更改，正常来说上了

更方便, 但是考虑项目基本没怎么使用

，所以就不升级了，直接改写一下初始化方法即可

本次升级其实是渐进式的，因为

的代码其实可以不用改动。但是既然使用

怎么行呢。所以后来基本我做每个页面都会将其转换为

的写法，所以对于全局方法直接引入即可。例如一些

 导致的，vite使用esm规范，而require是cjs的规范语法，如果不通过社区插件，官方推荐是使用

 来引入资源文件。如果是原本是

目录下的资源，因此可以在utils中直接封装一个方法

// |-utils
//    |-utils.ts
// |-assets
//    |-xxx.png
// vite中获取资源不能使用require
export function getAssetsImage(name: any) {
  return new URL(`../assets/${name}`, import.meta.url).href;
}

进行了合并， 因此直接全局替换掉即可

中是使用v-model直接双向绑定当前页码。

当时copy过来没有修改，导致当我在代码中手动设置

值时，虽然回调都会执行，但是页面上的当前页码并不会更新，我还写了

来解决这个问题，没想到在后来看其源码发现能绑定一个

Vue2+webpack项目迁移到Vue3+Vite

创造 Candy

实现一个滑块验证功能

React+Tailwindcss实现暗黑模式

proxy

前言

开始

router

store

全局方法的修改

语法修改

插槽

require

$listner

组件库修改