Vue3不习惯的点及setup免引入便捷操作

随着技术的发展Vue3的应用也是逐渐普及和成熟,记录一下个人改写Vue2项目到Vue3的过程(无ts)

目录

1.V3的全局挂载

2.V3的this

3.V3的ref

4. V3的 ".sync"

5.V3的ui库 ( elementPlus )

6.V3 setup语法糖及组件免引入

个人的vite.config,js文件 仅供参考

---

1.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.V3的this

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

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

3.V3的ref

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

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

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

 具体的子传父  父传子我另一篇博文里面有介绍 链接如下:http://t.csdn.cn/hr60c

4. V3的 ".sync"

// 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库 ( 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语法糖及组件免引入

v3里面用到什么就需要引入什么 还需要return出去 操作起来十分不便捷 推荐大家如下配置

插件下载安装  真的非常方便!!!
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']
    })
  ]
})

个人的vite.config,js文件 仅供参考

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']
  },
})

大佬们有好用的插件或者是小技巧都可以告诉我哦