Vue2 migrated to Vue3.0.5, <srcipt setup> development to deployment guide to avoid pits

Vue2 migrated to Vue3.0.5, <srcipt setup> development to deployment guide to avoid pits

begin

Vue3 has been out for a while. Recently, the company has a project that needs to be refactored. I refactored it with Vue3. In terms of development experience, I personally feel that the change is not very big, but I must say that vite is really fast. I encountered it during the development process. There are also a lot of problems, especially when deploying. If you don't read the document carefully, you will need to GG. Don't talk nonsense, just go to the topic.

Project structure

  • vue3.0.5
  • axios 0.21.1
  • element-plus 1.0.2-beta.35
  • vue-router 4.5.5
  • vuex: 4.0.0

Vue2 Vue3 , ref,reactive ,

Vue3 script setup

<template> <panel class="size-wrapper"> <template #footer class="dialog-footer"> <el-button type="primary" @click="onConfirmClick()"> </el-button> </template> </panel> </template> <script setup> import { ref, reactive, watch } from 'vue' import Panel from '@/components/Panel.vue' </srcipt>

data ,methods

//vue2 data() { return { loading: false, tableData: [] } }, methods { getList(){ this.loading = true this.tableData = [] this.loading = false } }
//vue3 <script setup> import { ref, reactive } from 'vue' let state = reactive({ loading: false, tableData: [] }) function getList(){ state.loading = true state.tableData = [] state.loading = false } </srcipt>
  • Api this ,

watch computed

//vue2 watch: { tableData (val) { this.tableData2 = [] } }, computed: { price () { return this.price1 * 20 } }
//vue3 <script setup> import { ref, reactive,watch,computed,watchEffect } from 'vue' let price = ref(10) let price1 = ref(20) let state = reactive({ price1: 10, price2: 20, price3: 0 }) // ref watch(price1, (newVal,oldVal) => { console.log(newVal,oldVal) }) // ref watch([price, price1], ([newPrice, newPrice1], [prevPrice, prevPrice1]) => { console.log(newPrice, newPrice1) }) // reactive watch(() => state.price1, (newVal,oldVal) => { console.log(newVal,oldVal) }) watch(() => state, (newVal,oldVal) => { console.log(newVal,oldVal) }) const price = computed(() => price1 * 20) const price2 = computed(() => state.price2 * 20) //watchEffect // watchEffect(() => { const {price1,price2} = state state.price3 = price1 + price2 }) </srcipt>
  • watch
  • watch reactive
  • watchEffect , ,

//vue2 <script> beforeCreate(){} create(){} mounted(){} destory(){} updated(){} ... </srcipt>
//vue3 <script setup> import { onMounted,onUpdated,onUnmounted } from 'vue' onMounted(() => { console.log('onMounted') }) onUpdated(() => { console.log('onUpdated') }) console.log(created) </srcipt> created onMounted
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeUnmount -> onBeforeUnmount
  • unmounted -> onUnmounted
  • errorCaptured -> onErrorCaptured
  • renderTracked -> onRenderTracked
  • renderTriggered -> onRenderTriggered
  • vue3 create ,setup create beforeCreate

ref

//vue2 <template> <panel class="size-wrapper" ref="panel"> </panel> </template> <script> mounted(){ console.log(this.refs.panel) } </srcipt>
//vue3 ref <template> <panel class="size-wrapper" ref="panel"> </panel> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import Panel from '@/components/Panel.vue' //ref null let panel = ref(null) onMounted(() => { // ref, .value const panelRef = panel.value console.log(panelRef) }) </srcipt>
//vue3 ref <template> <panel1 class="size-wrapper" :ref="el => setRefs(el, 'panel1')"> </panel1> <panel2 class="size-wrapper" :ref="el => setRefs(el, 'panel2')"> </panel2> <panel3 class="size-wrapper" :ref="el => setRefs(el, 'panel3')"> </panel3> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import Panel from '@/components/Panel.vue' import Pane2 from '@/components/Pane2.vue' import Pane3 from '@/components/Pane3.vue' // react let refs = ref({}) let setRefs = (el, name) => (refs.value[name] = el) onMounted(() => { // ref, .value const panel1Ref = refs.value.panel1 const panel2Ref = refs.value.panel2 const panel3Ref = refs.value.panel3 console.log(panel1Ref,panel2Ref,panel3Ref) }) </srcipt>
  • ref, script , ref="form", script ref , vue form is undefined
  • ref , ,

// <template> <panel class="size-wrapper" ref="panel"> <DescDialog v-model:visible="state.visible" :data="state.data"> </DescDialog> </panel> </template> <script setup> import { reactive, onMounted } from 'vue' import Panel from '@/components/Panel.vue' let state = reactive({ visible: false, data: [] }) </srcipt>
// <template> <div> <el-dialog title=" " v-model="visible" :show-close="false"> <div v-html="sizeData"></div> <template #footer class="dialog-footer"> <el-button type="primary" @click="onConfirmClick()"> </el-button> </template> </el-dialog> </div> </template> <script setup> import { defineProps, defineEmit, reactive, useContext } from 'vue' // , const { expose } = useContext() defineProps({ visible: { type: Boolean, default: () => false }, data: { type: Array, default: () => [] } }) const emit = defineEmit(['update:visible']) const onConfirmClick = () => { emit('update:visible', false) } expose({ onConfirmClick }) </script> <style lang="less"> </style>
  • vue2 :loading.sync => v-modle:visbile
  • vue2 props => defineProps
  • vue2 $emit => defineEmit,emit

vuex

  • vue2 , modules user.js( )
import * as userApi from '@/server/api/user' export default { state: { userInfo: {} }, mutations: { setUserInfo(state, data) { state.userInfo = data }, clearUserInfo(state, data) { state.userInfo = {} }, }, actions: { async getUserInfo({ commit, state }) { const res = await userApi.getUserInfo() commit('setUserInfo', res.data) } } }
<script setup> import { isRef } from 'vue' import { useStore,computed,isRef } from 'vuex' const store = useStore() const userInfo = computed(() => store.state.user.userInfo) const getUserInfo = () => store.dispatch('getUserInfo') const setUserInfo = () => store.commit('setUserInfo') const is = isRef(userInfo) console.log(is) // true, script .value, </script>
  • userStore vuex

//vue2 <script> mounted(){ console.log(this.$route.query) console.log(this.$route.params) //this.$router.push({path:/index}) } </script>
//vue3 <script setup> import { onMounted } from 'vue' import { useRoute, useRouter } from 'vue-router' const route = useRoute() const router = useRouter() onMounted(() => { console.log(route.query) console.log(route.params) //router.push({path:/index}) }) </script>
  • router , vuex

  • UI axios ,
//vue2 import Vue from 'vue' Vue.prototype.$message = message Vue.prototype.$notification = notification Vue.prototype.$info = Modal.info Vue.prototype.$success = Modal.success Vue.prototype.$error = Modal.error Vue.prototype.$warning = Modal.warning // <template> <panel class="size-wrapper" ref="panel"> </panel> </template> <script> mounted(){ this.$loading().show() this.$loading().close() } </srcipt>
//vue3 import App from '@/App.vue' const app = createApp(App) app.config.globalProperties.$message = message app.config.globalProperties.$notification = notification app.config.globalProperties.$info = Modal.info app.config.globalProperties.$success = Modal.success app.config.globalProperties.$error = Modal.error app.config.globalProperties.$warning = Modal.warning // <script setup> import { getCurrentInstance } from 'vue' //const { ctx } = getCurrentInstance() // proxy ctx const { proxy: ctx } = getCurrentInstance() onMounted(() => { const loading = ctx.$loading() loading.closed() }) </script>
  • getCurrentInstance
  • ctx , GG, ctx, proxy ctx, GG
  • ctx , , _

vite.config.js

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], // outDir: 'dist', // // server: { port: 3000, open: true, https: false, ssr: false, // proxy: { '/api': { target: 'http://127.0.0.1:8461/api', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }, //@ resolve: { alias: { '@': path.resolve(__dirname, 'src') } } })

  • vue3
  • Api ,
  • devtools , ,
  • getCurrentInstance().ctx ,
  • vue3