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
})
用到的数据改变都会调用回调函数,页面加载也会调用
最后一次更新于2021-12-02
0 条评论