vue2 转 vue3+ts

1.vite 创建一个 vue3+ts的项目

2.依赖转变

复制vue2 package 项目依赖。

修改 vue-router 3=> vue-router4 ； vuex4 => pinia  ；

Ui库 vant2 => vant4

main.js  转换为   main.ts

将需要使用到的 js,css 引入 main.ts

　　a. 配置@指向 src

// vite.config.js
import path, { resolve } from "path"

export default defineConfig({
  resolve: {
    alias: {
      /** @ 符号指向 src 目录 */
      "@": resolve(__dirname, "./src")
    }
  },
  plugins: [vue()],
})

　　b.将需要使用到的插件引入 到 main.ts

       通过 .use()  安装插件,如： 

import router from ‘./router.ts’
createApp(app).use(router).mount(‘#app’)

      c.vuex 转 pinia

　可能会疏忽的点

     c.1.单独的js 使用 pinia，需要导入pinia

     c.2.actions 不支持箭头函数，箭头函数会丢失 this 指向（原本this指向到 state）。

     d.vue-router的转变

     d.1 引入api的方式变化，H5模式变成了方法

     d.2  keep-alive  transition 变化

<router-view v-slot="{ Component }"  >
      <transition>
        <keep-alive  >
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>

　　

3. 全局属性和方法的配置

     provide/inject

     globalProperties

3.	import * as global from "@/utils/global"
4.	import wx from 'weixin-js-sdk'
5.	import * as utilsFn from '@/utils/index.js'
6.	app.config.globalProperties.$utilsGlobal = global
7.	app.config.globalProperties.$wx = wx
8.	app.config.globalProperties.$utilsFn = utilsFn

4.插件

如果使用到 postcss，需要修改postcss 配置文件名 为postcss.config.cjs

将 编译的配置 复制到postcss.config.cjs

如下：使用了 px 转 viewport

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    "postcss-px-to-viewport": {
      unitToConvert: "px",
      viewportWidth: 750,
      viewHeight: 1334,
      unitPrecision: 5,
      propList: ["*", "!font*"],//font-size,font-weight等不转换
      viewportUnit: "vw",
      // fontViewportUnit: "vw",
      selectorBlackList: [".hairlines", "vant"],//vant-ui样式不转换
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/,
      landscapeUnit: "vw",
      landscapeWidth: 750
    }
  }
}

也可以在vite.config.ts 中配置

import pxtovw from 'postcss-px-to-viewport'
const loder_pxtovw=pxtovw({
  unitToConvert: "px",
  viewportWidth: 750,
  viewHeight: 1334,
  unitPrecision: 5,
  propList: ["*", "!font*"],//font-size,font-weight等不转换
  viewportUnit: "vw",
  // fontViewportUnit: "vw",
  selectorBlackList: [".hairlines", "vant"],//vant-ui样式不转换
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  exclude: /(\/|\\)(node_modules)(\/|\\)/,
  landscapeUnit: "vw",
  landscapeWidth: 750
})

export default defineConfig({
  css: {
    postcss:{
        plugins: [loder_pxtovw]
    }
}
})

Sass变量全局配置

css: {
    preprocessorOptions: {
      scss: {
        /**如果引入多个文件，可以使用
       * '@import "@/assets/scss/globalVariable1.scss";
       * @import"@/assets/scss/globalVariable2.scss";'
      **/
        additionalData: '@import "@/assets/css/variables.scss";',
      }
    }
  }

组件内修改

Vue3 组件内的 template 必须使用 v-if