在 vue 工程中，安装依赖时，需要 vue 和 vue-template-compiler 版本必须保持一致，否则会报错。

Module build failed: Error: Cannot find module ‘vue-template-compiler’

为什么二者版本必须一致呢？vue-template-compiler 承担哪些作用？其和 vue-loader 又有何关联？

vue-template-compiler

作用： 该模块可用于将 Vue 2.0 模板预编译为渲染函数（template => ast => render），以避免运行时编译开销和 CSP 限制。大都数场景下，与 vue-loader一起使用，只有在编写具有非常特定需求的构建工具时，才需要单独使用它

内容安全策略 (CSP) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。

需要注意的是，This package is auto-generated. For pull requests please see src/platforms/web/entry-compiler.js. – 这个包是自动生成的，请查看 entry-compiler.js 文件。

其文件路径，vue/src/platforms/web/entry-compiler.js

export { parseComponent } from 'sfc/parser'
export { compile, compileToFunctions } from './compiler/index'
export { ssrCompile, ssrCompileToFunctions } from './server/compiler'
export { generateCodeFrame } from 'compiler/codeframe'

可得知，vue-template-compiler 的代码是从 vue 源码中抽离的！接着，我们对比一下 vue-template-compiler 和 vue 关于编译的 API。发现对于 compile 等函数是一致，只是 vue-template-compiler 开放的参数和方法更多。因此，vue 和 vue-template-compiler 的版本必须一致（同一份源码）！

const compiler = require('vue-template-compiler')

const result = compiler.compile(`
  <div id="test">
    <div>
      <p>This is my vue render test</p>
    </div>
    <p>my name is {{myName}}</p>
  </div>`
)

console.log(result)

compiler.compile(template, [options])

{
  ast: ASTElement, // 解析模板生成的ast
  render: string,	 // 渲染函数
  staticRenderFns: Array<string>, // 静态子树
  errors: Array<string>,
  tips: Array<string>
}

{
  ast: {
    type: 1,
    tag: 'div',
    attrsList: [ [Object] ],
    attrsMap: { id: 'test' },
    rawAttrsMap: {},
    parent: undefined,
    children: [ [Object], [Object], [Object] ],
    plain: false,
    attrs: [ [Object] ],
    static: false,
    staticRoot: false
  },
  render: `with(this){return _c('div',{attrs:{"id":"test"}},[
		_m(0),			// 上述提到的静态子树，索引为0 <div><p>This is my vue render test</p></div>
		_v(" "),		// 空白节点 </div> <p> 之间的换行内容
		_c('p',[_v("my name is "+_s(myName))])	// <p>my name is {{myName}}</p>
	])}`,
  staticRenderFns: [
    `with(this){return _c('div',[_c('p',[_v("This is my vue render test")])])}`
  ],
  errors: [],
  tips: []
}

需要注意的是：children 存在3个节点，其中第二个为空节点 { type: 3, text: ' ', static: true } 即代码中的</div><p> 之间的内容。

compiler.compileToFunctions(template)

简化版的 compiler.compile() ，但只返回

{
  render: Function,
  staticRenderFns: Array<Function>
}

其通过 new Function() 方式

compiler.parseComponent(file, [options])

将 SFC （单文件组件或* .vue文件）解析为描述符「以下述提供SFC为例」

{
  template: {
    type: 'template',
    content: '\n<div class="example">{{ msg }}</div>\n',
    start: 10,
    attrs: {},
    end: 54
  },
  script: {
    type: 'script',
    content: '\n' +
      'export default {\n' +
      '  data () {\n' +
      '    return {\n' +
      "      msg: 'Hello world!'\n" +
      '    }\n' +
      '  }\n' +
      '}\n',
    start: 77,
    attrs: {},
    end: 174
  },
  styles: [
    {
      type: 'style',
      content: '\n.example {\n  color: red;\n}\n',
      start: 194,
      attrs: {},
      end: 236
    }
  ],
  customBlocks: [
    {
      type: 'custom1',
      content: '自定义块',
      start: 257,
      attrs: {},
       end: 261
    }
  ],
  errors: []
}

通常用于 SFC 构建工具，如 vue-loader、vueify等

compiler.generateCodeFrame(template, start, end)

高亮展示 start，end 代码段。

compiler.generateCodeFrame(`上述代码`, 15, 20)
1  |  <template>
2  |      <div class="example">{{ msg }}</div>
   |      ^^^^^
3  |    </template>

简介解析过程

入口文件 src/compiller/index.js

// 生成ast语法树
const ast = parse(template.trim(), options)
// 标记静态内容（以免diff的时候需要重复比较）
optimize(ast, options)
// 生成 render function code
const code = generate(ast, options)

vue-loader

webpack loader for Vue Single-File Components.
用于 Vue 单文件组件的 webpack 加载器。

Vue Single-File Components

*.vue 文件是一种自定义文件格式，使用类似于 HTML 的语法来描述 Vue 组件。每个 *.vue 文件都包含三种类型的顶级语言块：<template>，<script> 和 <style>，以及其他可选的自定义块：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>自定义块</custom1>

vue-loader 将解析文件，提取每个语言块，如有必要，将它们通过其他加载器进行管道传输，最后将它们组装回ES 模块，其默认导出为 Vue.js 组件选项对象。

• Template：每个*.vue. 文件一次最多可以包含一个 <template> 块；内容将被提取并传递给 vue-template-compiler 并预编译为 JavaScript 渲染函数，最后注入<script> 部分的导出组件中

• Script： 每个 *.vue. 文件一次最多可以包含一个 <script> 块；任何针对 .js 文件的 webpack rules 都将应用于 <script> 块中的内容

• Style： 默认匹配/\.css$/；可以包含多个 <style> 块；可以包含 Scoped 或者 module 属性；任何针对 .css 文件的 webpack rules 都将应用于 <style> 块中的内容

• Custom Blocks： 自定义块，以满足任何项目的特定需求

如果您希望将 *.vue. 组件拆分为多个文件，则可以使用 src 属性为语言块导入外部文件：

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

• 相对路径必须以 ./ 开头
• 可以从 npm 依赖项导入资源

如何工作

处理 SFC 中的每个语言块，然后组装成最终模块。

1. 使用 @vue/component-compiler-utils 解析 SFC 为每个语言块生成一个导入

   // import the <template> block
   import render from 'source.vue?vue&type=template'
   // import the <script> block
   import script from 'source.vue?vue&type=script'
   export * from 'source.vue?vue&type=script'
   // import <style> blocks
   import 'source.vue?vue&type=style&index=1'
   
   script.render = render
   export default script
   

2. 对相应语言块，增加其他处理规则

   import script from 'babel-loader!vue-loader!source.vue?vue&type=script'
   import 'source.vue?vue&type=style&index=1&scoped&lang=scss'
   

3. 处理扩展请求时，再次调用 vue-loader，但这次会明确将其传递给匹配的目标加载器

4. 对于 scoped 等进行处理（VueLoaderPlugin 会注入一个全局的Pitching Loader（src/pitcher.ts），它会拦截Vue的 <template>和<style>请求并注入必要的加载器）

参考地址

• https://astexplorer.net/
• https://github.com/vuejs/vue/tree/v2.6.10/packages/vue-template-compiler
• https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP
• https://github.com/vuejs/vue-loader/blob/master/docs/spec.md
• https://github.com/vuejs/vue-loader/blob/master/docs/guide/custom-blocks.md

使用vue-command开发web终端，不知道能不能完成，在此记录遇到的坑。

基本没有什么资料，找到的都是英文，如果有朋友们遇到好的资料，请留言分享，万分感谢。

1、安装

直接按照官网给出的命令安装vue-command

npm i vue-command --save

2、简单示例

安装完成后在vue新建页面，引入vue-command和对应的css

<template>
  <vue-command :commands="commands" />
</template>

<script>
import VueCommand, { createStdout } from 'vue-command'
import 'vue-command/dist/vue-command.css'

export default {
  components: {
    VueCommand
  },

  data: () =>  ({
    commands: { 
      'hello-world': () => createStdout('Hello world') 
    }
  })
}
</script>

简单的示例，完全是官网的例子，可以运行，得到的基本是这样的。

很简单，然后就没有然后了，对于一个拿来党来说，太难了

自己根据api添加事件，名称，终端标志等。

<template>
  <vue-command :commands="commands" title="收入分摊终端模块" :history=history :not-found="notFound" :pointer="pointer" @input="inputLater" @execute="executing">
    <template slot="prompt" slot-scope="prompt">
      <span class="term-ps" >
      {{ prompter }}
      </span>
    </template>
  </vue-command>

</template>

<script>
  import VueCommand from 'vue-command'
  import 'vue-command/dist/vue-command.css'

  import NanoEditor from './NanoEditor.vue'

  export default {
    data() {
      return {
        pointer: 3,
        prompter: '[RAS~]$',
        notFound: '您输入的指令不存在,请重新输入.',
        history: [],
        commands: {
          nano: () => NanoEditor
        }
      }
    },
    components: {
      VueCommand
    },
    methods:{
      inputLater(a){
        console.log(111)
        console.log(a)
      },
      executing(e,k) {
        console.log('executing')
        console.log(e)
        console.log(k)
      }
    }
  }
</script>

与后台交互的例子

父页面

<template>
  <vue-command
    ref="terminal"
    :commands="commands"
    :history="history"
    :hide-bar="hideBar"
    :is-in-progress="isInProgress"
    :not-found="notFound"
    :pointer="pointer"
    :stdin="stdin"
    :stdout="stdout"
    :intro="intro"
    :show-intro="showIntroFlag"
    :show-help="showHelpFlag"
    title="终端模块"
    @input="inputLater"
    @execute="executing"
    @executed="executed"
  >
    <template slot="prompt" slot-scope="prompt">
      <span class="term-ps" >
        {{ prompter }}
      </span>
    </template>
  </vue-command>

</template>

<script>
import VueCommand, { createStdout, createStderr, createDummyStdout } from 'vue-command'
import 'vue-command/dist/vue-command.css'
import NanoEditor from './NanoEditor.vue'
import ChuckNorris from './ChuckNorris'

const PROMPT = '[RAS~]$'
export default {
  components: {
    VueCommand
  },
  data() {
    return {
      showHelpFlag: true,
      showIntroFlag: true,
      intro: '一些东西需要执行',
      isInProgress: false,
      hideBar: false,
      stdout: '',
      stdin: '',
      pointer: 3,
      prompter: '[RAS~]$',
      notFound: '您输入的指令不存在,请重新输入.',
      history: [],
      commands: {
        cd: undefined,
        norris: () => ChuckNorris,
        nano: () => NanoEditor,
        'hello': () => createStdout('Hello world'),
        'help': () => createStdout(`Available programms:<br><br>
        &nbsp;cd [dir]<br>
        &nbsp;clear<br>
        &nbsp;hello-world<br>
        &nbsp;klieh<br>
        &nbsp;loading [--amount n] [--timeout n]<br>
        &nbsp;nano<br>
        &nbsp;norris<br>
        &nbsp;pokedex pokemon --color<br>
        &nbsp;pwd<br>
        &nbsp;reverse text<br>
      `)
      }
    }
  },
  created() {
    this.commands.cd = ({ _ }) => {
      if ((_[1] === 'home' || _[1] === 'home/') && this.prompt === PROMPT) {
        this.prompt = `${PROMPT}home`

        return createDummyStdout()
      }

      // Navigate from home to root
      if ((_[1] === '../' || _[1] === '..') && this.prompt === `${PROMPT}home`) {
        this.prompt = PROMPT

        return createDummyStdout()
      }

      // Navigate to self
      if (_[1] === '.' || _[1] === './' || typeof _[1] === 'undefined') {
        return createDummyStdout()
      }

      return createStderr(`cd: ${_[1]}: No such file or directory`)
    }
  },
  methods: {
    setHistory(data) {
      this.$refs.terminal.history.push(data)
    },
    inputLater(a) {
      console.log(111)
      console.log(a)
    },
    executing(e, k) {
      this.setIsInProgress = true
      // this.isInProgress = true
      this.stdin = '执行中....'
      this.stdout = '执行了'
      createStdout('执行中....')
      console.log('executing')
      console.log(e)
      console.log(k)
    },
    executed(e, k) {
      // this.isInProgress = false
      this.setIsInProgress = true
      console.log('executed')
      console.log(e)
      console.log(k)
    }
  }
}
</script>

子页面

<template>
  <div>
    <span v-if="!isLoading && !isError">{{ joke }}</span>
    <span v-if="isLoading && !isError">Loading ...</span>
    <span v-if="isError">There was an error getting the joke</span>
  </div>
</template>

<script>
const API = 'https://www.baidu.com'
const API_TIMEOUT = 5000 // 5 seconds

export default {
  inject: ['terminate'],

  data: () => ({
    abortController: new AbortController(),
    isError: false,
    isLoading: true,
    joke: ''
  }),

  async mounted() {
    // Abort getting joke when API request takes longer than defined in "API_TIMEOUT"
    setTimeout(() => {
      if (this.isLoading) {
        this.abortController.abort()
      }
    }, API_TIMEOUT)

    try {
      const response = await fetch(API, { signal: this.abortController.signal })
      if (!response.ok) {
        this.setIsError(true)
        this.terminate()

        return
      }

      const { value } = await response.json()
      this.joke = value
    } catch (error) {
      this.setIsError(true)
    } finally {
      this.isLoading = false
      this.terminate()
    }
  },

  methods: {
    setIsError(isError) {
      this.isError = isError
    }
  }
}
</script>

3、遇到的问题

a.使用prompt，根据官网示例，运行后控制台报错

Duplicate presence of slot "prompt" found in the same render tree - this will likely cause render er

这个遍历使用slot,可以使用作用域插槽，直接代码

<template slot="prompt" slot-scope="prompt">
    <span class="term-ps"  >
      {{ prompter }}
    </span>
</template>

b.prompt使用时候不能重复使用这个单词，比如上个代码段{{prompter}} 这个不能定义为prompt ，不知道什么原因

c.这个真不适合我这种新手

建议还是用xterm吧