1.第一步： 通过@vue/compiler-dom 编译器 这个parser来解析以下测试代码为例：
<template> <div> {{ testref }} </div></template><script setup>import { ref } from 'vue'const testref = ref('test') </script><style scoped>.test-page { background-color: #fff;}</style>
把上面的代码放到 ast explorer，parser 选择 @vue/compiler-dom 【相关推荐：vuejs视频教程、web前端开发】
可以发现，右侧的ast结构：代码被解析成 template、script和style这三部分，我们通过ast节点属性就可以获取到script标签内代码的字符串信息（图中的绿色框部分）。
代码如下：
const vuecompiler = require('@vue/compiler-dom')const analysecode = `<template><div> {{ testref }}</div></template><script setup>import { ref } from 'vue'const testref = ref('test') </script><style scoped>.test-page {background-color: #fff;}</style>`const parsevue = (vuecode) => { // 解析vue代码 const result = vuecompiler.parse(vuecode) const children = result.children // 获取script片段 let tscode = '' children.foreach(element => { if (element.tag == 'script') { tscode = element.children[0].content; } }) console.log(tscode)}parsevue(analysecode)
运行结果：
2.第二步：通过typescript解析在第一步中，我们通过@vue/compiler-dom提取出了 vue 文件 script标签内的代码字符串；接下来，把提取出的代码字符串交给 typescript处理，生成对应的 ast。
以上面代码为例：
const vuecompiler = require('@vue/compiler-dom')const tscompiler = require('typescript') const analysecode = `<template><div> {{ testref }}</div></template><script setup>import { ref } from 'vue'const testref = ref('test') </script><style scoped>.test-page {background-color: #fff;}</style>`const parsevue = (vuecode) => { // 解析vue代码 const result = vuecompiler.parse(vuecode) const children = result.children // 获取script片段 let tscode = '' children.foreach(element => { if (element.tag == 'script') { tscode = element.children[0].content; } }) console.log(tscode) // 将ts代码转化为ast // 第一个参数为命名，可以随意填， // 第二个参数是需要生成ast的源代码字符串 // 第三个参数表示ts编译器版本 // 第四个参数表示是否添加parent节点信息 const ast = tscompiler.createsourcefile('testcode', tscode, tscompiler.scripttarget.latest, true) console.log(ast) return ast}parsevue(analysecode)
运行结果（图片不是完整的）
完整的ast explorer
3.第三步：遍历分析 ast 各级节点通过typescript 的 compilerapi : foreachchild遍历ast节点
const ast = parsevue(analysecode) // 上面示例的函数const walk = (node) => { // ast遍历函数 tscompiler.foreachchild(node, walk); // 遍历ast节点 console.log(node); // 输出节点信息}walk(ast)
然后根据代码中常见的字面量、标识符、表达式、语句、模块语法、class 语法等语句各自都有对应的 ast 节点类型，就可以去做相应的分析了（这一块的详细知识可以网上搜下，可以结合可视化工具 ast explorer 观察）
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是一步步带你分析vue文件中的ts代码的详细内容。