Vue3 is not used to points and setup to avoid the introduction of convenient operation

With the development of technology, the application of Vue3 is gradually popularized and matured. Let me record the process of rewriting the Vue2 project to Vue3 (no ts)

Table of contents

1. Global mount of V3

2. This of V3

3. ref of V3

4. ".sync" of V3

5. V3 ui library ( elementPlus )

6.V3 setup syntactic sugar and component free import

Personal vite.config, js files are for reference only

---

1. Global mount of V3

// v2的全局挂载
    import name from 'url'
    Vue.prototype.$usename = name 

// v3的全局挂载
    由于v3的vue是这样操作的 第一眼还不会操作
    import { createApp } from 'vue'
    
    先声明一个变量
    const app = createApp(App)

    然后就可以挂载了
    app.config.globalProperties.$usename = name

2. This of V3

// v2
    可以直接在组件内this.XXX

// v3由于没有this 根据官网提供的方法获取
    // 个人习惯用that代表
    const that = getCurrentInstance()
     that.ctx.$usename

3. ref of V3

// v3
 父组件
  <DialogCom ref="name" @updataPage="updataPage" />
  // 第一种 部分人在vite打包后发现组件使用不了
  const that = getCurrentInstance()
  that.ctx.$refs.name.子组件调用的函数(传值)

  //第二种
  const name = ref()
  name.value.子组件调用的函数(传值)

子组件
  const 被调用的函数 = () => {}
  // 注册声明
  defineExpose({ 被调用的函数 })

 The specific son-to-father, father-to-son I have an introduction link in another blog post as follows: http://t.csdn.cn/hr60c

4. ".sync" of V3

// v2
    父: <ListCom :visible.sync="变量"></ListCom>
    子: 接收父组件传过来的visible
        props: {
            visible: {
              type: Boolean,
              default: () => false,
            }
        }
        // 通过updata的方式修改
        this.$emit('update:visible', 修改的值)


// v3
    // v3的.sync移除 等价代替v-model
    父: <ListCom v-model:传给子组件的数据名='值'></ListCom>
  	子: const props = defineProps({
      		数据名:{
              type:Number,
              default:100
            }
    	})
		const emit = defineEmits(['update:数据名'])
        const btn = ()=> { //此处的btn为子组件触发修改事件
          emit('update:数据名',子组件想要修改的值);
        }

5. V3 ui library ( elementPlus )

// v2
    引入组件
    import { Message } from 'element-ui'
    挂载到原型
    Vue.prototype.$Message = Message
    使用
    this.$Message.XXX()

// v3
    按需引入 官网地址如下:https://element-plus.gitee.io/zh-CN/guide/quickstart.html
    先安装两款插件
    npm install -D unplugin-vue-components unplugin-auto-import
    在vite.config.js配置
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

    plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ],
    直接使用: ElMessage.XXX()
    

6.V3 setup syntactic sugar and component free import

What is used in v3 needs to be imported, and what needs to be returned is very inconvenient to operate. It is recommended that you configure as follows

插件下载安装  真的非常方便!!!
yarn add -D unplugin-auto-import     api按需引入
yarn add -D unplugin-vue-components  组件按需引入
配置 vite.config.js
import AutoImport from 'unplugin-auto-import/vue'
export default defineConfig({
  plugins:[
    AutoImport({
      //自动导入vue和vue-router和vuex的相关函数  个人还在使用vuex4过渡 不用的可以不写
      imports:['vue','vue-router','vuex']
    })
  ]
})

Personal vite.config, js files are for reference only

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue(),
  // elementPlus 按需导入AutoImport Components
  AutoImport({
    resolvers: [
      ElementPlusResolver(),
      // 自动导入图标组件  <i-ep-name />
      IconsResolver({
        prefix: 'Icon',
      }),
    ],
    imports: ['vue', 'vue-router', 'vuex']
  }),
  Components({
    resolvers: [
      // 自动注册图标组件
      IconsResolver({
        enabledCollections: ['ep'],
      }),
      ElementPlusResolver()
    ],
  }),
  // 图标组件
  Icons({
    autoInstall: true,
  }),
  ],
  base: './',
  publicDir: resolve('static'),//静态资源文件夹
  server: {
    port: ,
    open: true, // 项目运行自动打开浏览器
    host: '',
    // 反向代理
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  },

  build: {
    //打包环境移除console.log，debugger
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    }
  },

  resolve: {
    alias: {
      //别名配置
      "@": resolve(__dirname, "./src"),
    },
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },
})

If you guys have useful plugins or tricks, please let me know.