Vue 3中的 defineComponent是什么

defineComponent是为了ts的类型推导，如果直接export default{} ，则可能将{}理解为对象，而加上defineComponent({}) 则 {} 变成了 defineComponent的参数 通俗一点来讲就是 ts中用的，比不用好。

vue3使用element-puls

首先安装element-puls，然后手动添加vue.config.js 这是使用vue-cli创建项目的配置文件，

安装npm install unplugin-vue-components 然后配置文件中添加：

const Components = require('unplugin-vue-components/webpack')
const {
  ElementPlusResolver
} = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
}

第一次小报错：**Invalid options in vue.config.js: "plugins" is not allowed**

因为没有添加configureWebpack 修改 webpack配置需要在configureWebpack这里修改

这是配置按需导入，则不需要在main.js导入了 任何地方都可以直接调用

关于 模板Html文件里的：htmlWebpackPlugin.options.title

是webpack打包使用，在vue.config.js中添加：

chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '你的标题'
        return args
      })
  },

style scoped

添加样式的私有性

关于vue3添加全局方法

出了各种各样的bug，先说方法：

onst app = createApp(App)
app.config.globalProperties.$http = axios
app.config.globalProperties.$message = ElMessage

vue3需要通过config.globalProperties添加方法。同时再组件中通过如下方式使用

import { getCurrentInstance} from 'vue'
steup{
const { proxy } = getCurrentInstance()
propx.$http...
propx.$message....
}

vue3表单验证

获取ref的方法和vue2又有点差别：

proxy.$refs.formref.validate((valid) => {
        console.log(valid);
      })

不再是this了，vue3的proxy相当于vue的 this

axios 发送post请求遇到的问题

默认传输的数据格式是json 导致参数错误（后台处理问题）

使用qs模块 ，设置请求拦截器解决

// 请求拦截器
axios.interceptors.request.use(config => {
  // console.log(config.data);
  // console.log(qs.stringify(config.data));
  config.data = qs.stringify(config.data)
  return config
})

路由传参

import { useRouter, useRoute } from "vue-router";

这两个是不同的：Router是组件路由-可以调用push 转跳 route是全局路由 可以查看携带的参数

// 传参数
var router = useRouter();
router.push(
            {
                path: '/pc/articleList',
                // 路由query传参
                query: {
                    cate_id_son: data.cate_id_son
                }
            });
//接收参数

const router = useRoute()
console.log(router);
console.log(router.query);

vue watchEffect 类似与react的 useEffect！

watchEffect(async () => {
      const { data: { data: res } } = await proxy.$http.get('/user/subjectfiles?sname=' + route.query.sname)
      data.Listdata = res
    })

用到的数据改变都会调用回调函数，页面加载也会调用