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

?

1 2 3 4 5 6 7 8 9 10 11 12

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

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

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

?

1 2	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 变化

?

1 2 3 4 5 6 7

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

　　

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

     provide/inject

     globalProperties

?

1 2 3 4 5 6

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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 中配置

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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变量全局配置

?

1 2 3 4 5 6 7 8 9 10 11

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

组件内修改

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