Vue3.0遇到的问题

一、对于Vue3.0中使用element-plues

• 对于引用时，使用按需引入element控件需 安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

  然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

  Vite

  // vite.config.ts
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  ​
  export default {
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }

  Webpack

  // webpack.config.js
  const AutoImport = require('unplugin-auto-import/webpack')
  const Components = require('unplugin-vue-components/webpack')
  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  ​
  module.exports = {
    // ...
      plugins: [
          AutoImport({
              resolvers: [ElementPlusResolver()],
          }),
          Components({
              resolvers: [ElementPlusResolver()],
          }),
      ],
  }

• 因为是 vue-cli创建的项目没有使用vite创建送一报了一个错误：

  Invalid options in vue.config.js: "plugins" is not allowed

  原因：webpack.config.js 文件格式错误

  解决方法：在plugins外添加一个configureWebpack进行包裹

  // webpack.config.js
  const AutoImport = require('unplugin-auto-import/webpack')
  const Components = require('unplugin-vue-components/webpack')
  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  ​
  module.exports = {
    // ...
    configureWebpack:{
       plugins: [
          AutoImport({
            resolvers: [ElementPlusResolver()],
          }),
          Components({
            resolvers: [ElementPlusResolver()],
          }),
       ],
    }
  }

• 对element控件的样式改变

  在页面的调试面板中获取到需要改变的控件类名

  使用：

  1. >>> 修改穿透 在原生css中使用
  <style>
      .a >>> .b   //此时.a中的样式可以影响到.b
  </style>
  2. /deep/ 这是在scss，sass，less预处理器中使用
  <style lang="scss" scoped>
      /*用法一*/
      .a{
          /deep/ .b{
              
          }    
      }
      /*用法二*/
      .a /deep/ .b{
  ​
      }
  </style>
  3.::v-deep  css原生和预处理器都可使用
  <style>
      ::v-deep .a{
  ​
      }
  </style>

二、Vue3.0中对于表单的操作

• 当Form做成一个组件形式时需要涉及form的销毁和加载使用nextTick

  <template>
      <Form v-if="reFresh"></Form>
      <button @click="close"></button>
  </template>
  <script>
  import { ref, nextTick } from 'vue'
  export default {
      name:'app',
      setup(){
        const reFerch = ref(false)
        const colse = () => {
            reFrech.value = false
            nextTick(() => {
                reFrech.vlaue = true
            })
        }
        return { reFerch, close }
      },
  }
  </script>

• 在Vue3.0中使用ref选择器

  <template>
      <Form>
          <stepOne ref="stepOne"></stepOne>
          <stepTwo ref="stepThree"></stepTwo>
          <button @click="console"></button>
      </Form>
  </template>
  <script>
  import { ref } from 'vue'
  export default {
      name:'app',
      setup(){
       const stepOne = ref()
       const stepTwo = ref()
       const console = () => {
           console.log(stepOne.value)     // 已选中demo
       }
       return { stepOne, stepTwo, console }
      },
  }
  </script>

• 在Vue3.0中Form中的控件封装在子组件中对其验证

  <template>
      <Form>
          <stepOne ref="stepOne"></stepOne>
          <stepTwo ref="stepThree"></stepTwo>
          <button @click="submit"></button>
      </Form>
  </template>
  <script>
  import { ref } from 'vue'
  export default {
      name:'app',
      setup(){
       const stepOne = ref()
       const stepTwo = ref()
       const submit = () => {
        const promiseOne = stepOne.value.FormOneRef.validate(isPass => {
          return isPass
        });
        const promiseTwo = stepTwo.value.FormTwoRef.validate(isPass => {
          return isPass
        });
         /**因为上面使用的表单validate属性里是一个回调函数，并且三个表单分散在三个组件中,
         * 需要同时拿到三个组件验证完的判断值，从而来判断接下来的操作
         */
        Promise.all([promiseOne, promiseTwo, promiseThree]).then((values) => {
          // console.log(values);
          // 判断必填值是否都已经填写
          if(!values[0] || !values[1] || !values[2]) return
          // 提交表单进行验证等操作
          console.log(data);
        })
       }
       return { stepOne, stepTwo, submit }
      },
  }
  </script>

• 在组件中对组件中的对象进行监听

  setup(props,{ emit }) {
      const data = reactive({
          a:1,
          b:2,
      })
      // 监听组件的值的变化
      watch(
        ruleForm,
        val => {
          emit("ruleFormOne", ruleForm);
        },
        { immediate: true }
      );
  }