vue cli的使用、node.js、npm、babel、webpack的辨别

node.js是js服务端的运行环境，类似java的jdk。jdk安装后需要手动设置环境变量，node.js安装包会自动设置环境变量。

node.js里面包含了npm包管理工具，npm相当于java的maven中央仓库，下载包，有中央仓库。

babel是js的编译工具，把es6的语法编译成es5的形式，浏览器只支持es5的语法。

webpack是打包的工具，类似maven的打包工具。maven把所有class文件汇集成统一jar包，webpack把所有的js、html、css文件打成一个html文件，这样可以直接放在浏览器运行。

有了一系列的工具能力，js变得跟java类似，不再是单纯的脚本语言，晋升为服务端语言。

vue cli是vue的脚手架，可以用来生成vue项目。vue本身的vue.js很小，脚手架内嵌了。而且脚手架整合了其他的功能，例如打包、解析。安装脚手架之后，就可以用vue create name创建项目。脚手架和具体的项目没关系，一套脚手架可以创建多个vue cli项目。进而会有vue cli的版本问题。话说前端的这些不兼容的版本真让人头疼，像springboot出一个启动器starter不香吗。

Note：vue cli也是npm管理的包，而不同的npm版本，下载下来的脚手架版本也可能是不同的。所以之后引入element plus之后，版本冲突，可能是自己的nodejs版本太低了。

pr：element plus之所以能做成组件化的库，是因为vue可以一个template一个独立组件，所以直接copy一个element的组件到单独的vue文件，用组件时import即可。element根本是标签库，不同的标签有不同的UI样式和特殊属性，而输出组件的方式可因人而异。

Note：引入element组件时，script中的（lang=“ts” setup）需要删掉。下方的import需要变成export default，输出整个组件。 之后需要做的就是vue的基本语法了，组件交互、事件绑定。

<template>
  <el-input
    v-model="textarea"
    :rows="2"
    type="textarea"
    placeholder="Please input"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const textarea = ref('')
</script>

<template>
  <el-input
    v-model = "textarea"
    :rows="5"
    type="textarea"
    placeholder="Please input"
  />
</template>

<script>
export default{
  data(){
    return {
      textarea : ""
    }
  }
}
</script>