【vue-blog】从vue2升级到vue3

添加vite.config.js

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

更改依赖

package.json

"dependencies": {
    // 修改版本号
    "vue": "^3.2.47",
    "vue-router": "^4.1.6",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@types/node": "^18.14.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.8.4",
    "vite": "^4.1.4",
    "vue-tsc": "^1.2.0"
    // 删除webpack依赖
    // "webpack": "^3.6.0",
    // "webpack-bundle-analyzer": "^2.9.0",
    // "webpack-dev-server": "^2.9.1",
    // "webpack-merge": "^4.1.0",
    // ...
  }

改写package.json > scripts

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
}

添加ts支持

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.node.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "types": [
      "node"
    ]
  }
}

index.html

<script type="module" src="/src/main.ts"></script>

修改App.vue

<script setup lang="ts">

import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
// 删除原有以下代码
// export default {
//   name: 'App',
//   components: {
//     Header,
//     Footer
//   }
// }
</script>

更改Vuex

store.js

import { createStore } from 'vuex'

import auth from './modules/auth'
import blog from './modules/blog'

const store = createStore({
  modules: {
    auth,
    blog
  }
})

export {store};

// 之前的配置
// import Vue from 'vue'
// import Vuex from 'vuex'
// import auth from './modules/auth'
// import blog from './modules/blog'
//
// Vue.use(Vuex)
//
// export default new Vuex.Store({
//   modules: {
//     auth,
//     blog
//   }
// })

编写 store.d.ts，以便在main.ts中ts能够正确提示引入store.js

declare module '@/store' {
  export const store: any;
  export default store;
}

修改router

import {createRouter,createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/pages/Index/template.vue')
    },
  ]
})

// 先前的代码
// import Router from 'vue-router'
// const router =  new Router({
//   routes: [
//     {
//       path: '/',
//       component: () => import('xxx.vue')
//     },
//   ]
// })

修改main.ts

import {createApp} from 'vue'
import App from './App.vue'

import { router } from '@/router'
import { store } from '@/store'

const app = createApp(App)
app.use(router)
app.use(store)

app.mount('#app')

// 先前的配置
// import Vue from 'vue'
// new Vue({
//   el: '#app',
//   router,
//   store,
//   components: { App },
//   template: '<App/>'
// })

升级element-ui为element-plus

1. npm i element-plus
2. 配置main.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

3. 配置element-plus自动引入

npm install -D unplugin-vue-components unplugin-auto-import

4. 配置vite.config.js

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})