组件开发的环境准备： nodejs安装，npm镜像源的修改，pnpm包管理器的安装（全局安装），基于pnpm创建脚手架项目

Node.js 是一个开源的、跨平台的 JavaScript 运行环境（本质是Chrome引擎的封装）,允许开发者使用 JavaScript 来编写服务器端代码
npm(Node Package Manager)是 Node.js 包管理器, 用来安装各种库、框架和工具

【Node.js官网】 
https://nodejs.org

【npm官网】
https://www.npmjs.com

Node.js安装的时候一直按next就可以了，直到最后按finish就完成安装了，效果如下图

接下来如下图

  

 在画圈的地方输入cmd然后按回车键，跳出如下图

【设置淘宝镜像源（默认镜像源是国外网址，国内访问经常失败，所以要设置淘宝镜像源）】
输入：npm config set registry https://registry.npmmirror.com/ 按回车键

再安装pnpm工具包： npm install -g pnpm

 接下来创建脚手架：pnpm create vue 

项目名称可改可不改，配置脚手架相关插件（最简单脚手架项目就是全部选“否（一直按回车键）”）

接下来就直接按照可执行以下命令的3个命令执行

  cd vue-project

再输入  pnpm i

  再输入 pnpm dev 启动它

复制画圈的网址到浏览器打开它

接下来在软件（ Visual Studio Code）打开

                        ​​​​​​​        ​                         

【常用vscode插件的安装】  
1. Vue - Official （Vue官方插件，强烈推荐，默认的xxx.vue文件是没有语法高亮的，都是一片白色，不利于阅读，安装这个插件以后，语法就会高亮）
2. 有些vscode编辑器版本较低，无法使用，这时候可以安装最新的vscode编辑器，或者换下面这个语法高亮插件（但是这个插件不好用，不推荐）：
   Vue 3 Support - All In One  
3. Vue VSCode Snippets  (我们经常需要使用一些现成的代码片段，这个插件为我们提供大量代码片段，提高编码效率)

安装好后打开src这个文件，把App.vue这个文件的内容全部删掉，输入v3（vbase-3-setup）,按回车（把画圈的地方删掉）

这样基本就完成了，只需要再输入内容就可以运行了

（运行只要打开之前复制在浏览器那个网页就行，没反应的话就刷新一下浏览器）