vue加油站-区分制作前端软件作用

        今天讲述的前端软件的使用情况，是因为在制作h5页面的学习过程中，我发现了非常多好用的前端软件。当然，最常用的是webstorm和HbuilderX和记事本。当然，使用viscode和myeclipse也是可以的。像我在大学课程中学的经常是基于tomcat+vue+node.js+idea+Hb写一个项目，在这个过程中就需要配置非常多的环境和前后端分离，或者Axious网络交互等情况。在学习的过程中，说实话是把我绕晕了的。所以，博主开始摸索其他的前端软件的使用方法，选出了一个我认为简单的一个来。那就是WebStorm！

        那现在就开始演示一下使用这个软件创建一个项目的过程吧。

（1）首先，我们需要在桌面创建一个新建文件夹

（2）打开管理员的cmd，去给我们的项目进行配置，如果说没有配置的话，提示如下：

当遇到这种情况，我们可以按照以下步骤（这里我选用的是下载pnpm方法）具体可查看vite官网中文文档。

一.全局安装：使用管理员cmd输入：npm install pnpm -g

右键单击开始按键，按 A 键进行控制台，输入npm install pnpm -g 命令进行安装。参数 g 表过全局安装。

看到搭建的命令行

二、设置下载源

1. 查看下载源：

pnpm config get registry

2. 切换淘宝源，可以加快下载速度

pnpm config set registry https://registry.npmmirror.com/

3. 还原：

pnpm config set registry https://registry.npmjs.org

三.进行新建文件夹的位置，打开cmd，输入pmnp命令行创建文件

这里的名字输入项目名称，博主的是hongmeng

这是第一个选择自动生成框架的位置，我们目前已学了vue，react和svelte，但是该项目需要用的是vue框架，所以直接选择vue

同理，这里可以选择ts和js的需求，博主选用了ts，当出现下列的提示时，显示文件项目搭建成功，文件夹内可自动生成文件

但是！！！！我们查看文件夹的时候会发现缺少了一个node_modules作为项目依赖。所以我们需要在该文件夹内cmd输入pnpm i的命令，建立项目依赖。

建立完成，自动生成依赖

接着，我们将这个vue项目运行在本地电脑，在cmd中输入 pnpm run dev

将local的地址复制到浏览器中即可查看当前搭建的架构

最后，当我们要进行网页设计的时候，可以将文件夹hongmeng拖进webstorm或者viscode中进行！当然，在这里我要重点的提示一下，因为，ts的版本问题是基于node.js的基础上去运行的，所以，建议大家下载node.js的时候选择版本16+的，大家可以先使用cmd输入node -v查看自己电脑中是否下载过node.js的版本。

好啦！到这里，vite基于vue来初始化工具创建一个项目文件就到此结束啦！

程序员们请到自己习惯使用的软件中的src部分继续完成自己的代码吧！

问题：

1.使用这种方式，一定要先安装pnpm方式，另外还有两种方式，如npm类可在vite官网中文文档中查看，如果没有安装，直接输入pnpm create vite会显示报错！

2.修改vue文件时，不能删除App.vue文件，这个是根组件。不然容易出现报错，如main.ts中找不到app.vue的文件的情况