Vue3 + ts踩坑记录

通过ref获取页面元素

这个是个大坑，我目前是这样获取到的：

<el-form
	ref="Form"
	:model="loginForm"
	:rules="loginRules"
>
	...
	...
	<!-- 密码 -->
    <el-form-item
    	prop="password"
    	key="password"
    >
    	<el-input
    		...
    		ref="passwordInput"
    		...
    	>
    		...
    		<span @click="showPwd">
    			...
    		</span>
    	</el-input>
    </el-form-item>
</el-form>

<script lang="ts">
...
...
export default defineComponent({
	...
	setup() {
		...
		const passwordInput = ref(ElInput);
		const Form = ref(ElForm);
		...
		//显示隐藏密码
		const showPwd = () => {
			...
			passwordInput.value.focus();
		}
		//登录
		const login = () => {
			Form.value.validate(async (valid:boolean) => {
				if(valid) {
					...
				}
			})
		}
	}
})
</script>

路由懒加载报错 Cannot read property ‘apply‘ of undefined

export const loadView = (view:any) => { // 路由懒加载
  return (resolve:any) => require([`@/views/${view}`], resolve)
}

解决办法：
首先安装 syntax-dynamic-import

npm install syntax-dynamic-import -D

然后在项目对应的 babel-config.js 里添加相应配置

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

路由按照Vue-router v4的动态路由重写下

const Login = () => import('../page/Login/Login.vue')
export const loadView = (view:any) => { 
  return () => import(`@/views/${view}`)
}

详细原因看这篇文章