初学vue前台系统创建过程问题

问题一：

第一次引入element-plus表单验证时报错： Vue3
ERROR Failed to compile with 2 errors 15:42:42

error in ./src/views/Login.vue?vue&type=script&lang=ts&setup=true

Module parse failed: Unexpected token (3:12)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { defineComponent as _defineComponent } from ‘vue’
  | import { reactive, ref } from ‘vue’> import type { ComponentSize, FormInstance, FormRules } from ‘element-plus’
  |
  | interface RuleForm {

error in ./src/views/Login.vue?vue&type=template&id=26084dc2&ts=true

Module parse failed: Unexpected token (7:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | const _hoisted_3 = /#PURE/_createElementVNode(“span”, { class: “text-gray-500” }, “-”, -1 /* HOISTED */)
  |> export function render(_ctx: any,_cache: any,$props:any,$setup: any,$data:any,$options: any) {
  | const _component_el_col = _resolveComponent(“el-col”)!
  | const _component_el_input = _resolveComponent(“el-input”)!

ERROR in ./src/views/Login.vue?vue&type=script&lang=ts&setup=true (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Login.vue?vue&ty
pe=script&lang=ts&setup=true) 3:12
Module parse failed: Unexpected token (3:12)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { defineComponent as _defineComponent } from ‘vue’
  | import { reactive, ref } from ‘vue’> import type { ComponentSize, FormInstance, FormRules } from ‘element-plus’
  |
  | interface RuleForm {
  @ ./src/views/Login.vue?vue&type=script&lang=ts&setup=true 1:0-138 1:0-138 1:139-266 1:139-266
  @ ./src/views/Login.vue 2:0-67 3:0-62 3:0-62 6:49-55
  @ ./src/router/index.js 13:19-79
  @ ./src/main.js 3:0-30 12:8-14

ERROR in ./src/views/Login.vue?vue&type=template&id=26084dc2&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules
/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Login.vue?vue&type=template&id=26084dc2&ts=true) 7:27
Module parse failed: Unexpected token (7:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | const _hoisted_3 = /#PURE/_createElementVNode(“span”, { class: “text-gray-500” }, “-”, -1 /* HOISTED */)
  |> export function render(_ctx: any,_cache: any,$props:any,$setup: any,$data:any,$options: any) {
  | const _component_el_col = _resolveComponent(“el-col”)!
  | const _component_el_input = _resolveComponent(“el-input”)!
  @ ./src/views/Login.vue?vue&type=template&id=26084dc2&ts=true 1:0-204 1:0-204
  @ ./src/views/Login.vue 1:0-74 6:68-74 16:73-18:3 17:29-35 16:2-18:4
  @ ./src/router/index.js 13:19-79
  @ ./src/main.js 3:0-30 12:8-14

webpack compiled with 2 errors

解决方法：

 1：第一次创建系统，报一堆错，其实就是忘了添加依赖
 vue add typescript     添加typescript    完美解决 被自己蠢到了
 2：如果上述解决方案无效，我查了其他的一堆解决方法
     （1）.typescriptd的配置是不是有问题，检查你的 tsconfig.json 文件是否包含了正确的设置
     （2）确保你的 vue-loader、typescript 和其他相关依赖项都是最新版本。
     （3）重启服务
     （4）清理和重新安装依赖项：删除 node_modules 文件夹和 package-lock.json 或 yarn.lock 文件。
     重新安装依赖项，使用 npm install 或 yarn